Show or Hide Theme Elements

Topics:

Introduction

By default, ThemeStarta provides you numerous options that can be customized to create your unique WordPress theme. However, you may not want to utilize all of these functions in your theme design, or you may want to display certain elements only when certain areas of your site are viewed.

This is where the “Show” and “Hide” options come into play. You can specify whether you want to permanently hide theme elements such as blocks, sidebars, pagination, breadcrumbs and so on, or if you want show them only in certain areas of your theme.

While some theme elements, (e.g. slider buttons), have only one show or hide setting, (e.g. show or hide in the slider), most theme elements can be set to show or hide in different areas of your theme. For example, you might set your Second Menu Block to show on your front page, but to be hidden on your other pages.

There are a total of eight different areas of your theme in which you can choose to show or hide theme elements.

There are the four default areas, (front page, blog, single posts, pages), and also an additional four areas available via optional use page templates.

This tutorial explains how to:

  • work with the 4 default show & hide areas
  • show or hide blocks
  • show or hide pagination
  • show or hide sidebars
  • show or hide post info
  • show or hide breadcrumb trails
  • show or hide slider elements
  • work with the 4 additional page template based show & hide areas

Note: When you show or hide an element of your theme you will still see that element available in your ThemeStarta preview. For example, if you hide the Spotlights block, the Spotlights block will still display in the ThemeStarta preview editor even though the Spotlight won’t display in your actual site. If you want to hide a block, content area element or sidebar, and if you don’t want what you’ve hidden to display in the preview either, you can disable the preview.  To do this, go to the very top of your ThemeStarta preview window, just below the Saving, Updating and Theme Defaults buttons, where you will see the following ThemeStarta Options bar:

Click the ThemeStarta Options bar to access the options panel for disabling previews of blocks, content area elements and sidebars. Locate the element you want to disable from previewing, click the relevant radio-button, then save your settings.

Warning: Be aware that you can disable the preview of a block, content area element or sidebar, but if you haven’t also hidden the block using the “Show” and “Hide” options, the block will still display in your live theme even if you can’t see it in the ThemeStarta preview editor. In other words, you must both hide the element and disable the preview of that element for both to function.

Let’s now look at the four default areas that are available for you to “Show” and “Hide” your theme elements in.  

Default Show & Hide Areas

Various theme elements such as blocks, sidebars, pagination and so on can all be set to either show or hide in the four default areas of your theme.

These four default areas are:

  1. Front Page: Your front (home) page, whether it is displaying your latest posts or a specific page.
  2. Blog: Any multiple post display that is not on the front page of your site, such as your category pages, tag pages, search results, or your latest posts (if displayed via a sub-page).
  3. Single Posts: An individual post viewed by itself.
  4. Pages: An isolated page viewed by itself, such as an “About” or “Contact” page.

To show or hide a theme element such as a block, sidebars, breadcrumbs and so on in a default area:

1. Locate the Show & Hide bar for the theme element you wish to show or hide (see below for specific locations for various elements):

2. Click anywhere on the Show & Hide bar to expand the Default Show & Hide options:

3. Click the relevant Show or Hide radio-button in one or all of the four options to select whether you want the theme element to be shown or hidden in those areas of your site.

4. Click  to apply the change and   so that the changes can be visible in your live theme design.

These settings can be used to quickly create different layouts that allow for different presentations in the four default areas of your theme.

For example, you might set your Front Page display area to display the Spotlights block but to hide the Content Area block. At the same time you might set your Pages to only display your Header block and Content Area block but hide all others.

These options allow for highly optimized theme creation to hone in on very specific goals where you present only the information you specifically want your visitor to see and exactly where you want them to see it.  

Show or Hide Blocks

All ThemeStarta themes are, by default, comprised of up to 8 separate “blocks”:

  1. Header Settings
  2. Main Menu Settings
  3. Second Menu Settings
  4. Spotlight Settings
  5. Featured Strip Settings
  6. Content Area Settings
  7. Footer One Settings
  8. Footer Two Settings

You do not have to make use of each of these blocks in your design. You can hide any block you don’t want included in your theme, or set individual blocks to only display when specific areas of your WordPress site are viewed. 

To set the show or hide settings of a block:

1. Open the relevant block settings panel, then look for the Show & Hide bar:

2. Click anywhere on the Show & Hide bar to expand the Default Show & Hide options:

Note: Page Next and Previous links will still be displayed on your custom page as long as the default setting for content on pages is set to “Show”. If you want content to show on your custom page template but don’t want Next and Previous links to show, this can be controlled separately via the Content Area Settings > Pagination option panel. 

Let’s look at the hide and show options for pagination now.  

Show or Hide Pagination

Pagination is the term applied to how content on your blog is kept connected from page to page using links. Sometimes these links might simply read “Next Post” and “Previous Post”, or “Page 1″, “Page 2″ and so on.

ThemeStarta comes with in-built pagination. It will automatically apply pagination to help users navigation forward and back through content by placing pagination links at the bottom of your content pages.

Note: Pagination only displays where content is available on multiple pages. If your site consists of just a single post, for example, pagination would not be visible even if pagination is enabled, because there would be no other content on any other pages to link to.

Example pagination links: 

ThemeStarta gives you the option to hide or show pagination links. To do so:

1. Open the Content Area Settings > Pagination option panel.

Do this by clicking on , then locate the heading Pagination and click the Show & Hide bar shown directly beneath it: 

You have four core areas of your theme where pagination is utilized:

  • Front Page Pagination. Displays full page-numbered pagination on your front/home page
  • Blog Pagination. Displays full page-numbered pagination on pages that display your posts.
  • Single Post Next & Previous LInks: When an individual post is viewed, displays “Next” and “Previous” links to other posts
  • Pages Next & Previous LInks: When a page is viewed, displays “Next” and “Previous” links to other pages.

2. Select the Show radio-button of the relevant area of your theme where you want pagination to be displayed, or select the Hide radio-button of the relevant area of your theme where you want pagination to be hidden.

3. Click  to apply the change and   to make the changes visible in your live theme design.   

Show or Hide Slider Buttons

Refer to the “Show & Hide” section of the Slider Buttons tutorial. 

Show or Hide Slider Arrows 

Refer to the “Show & Hide” section of the Slider Arrows tutorial. 

Show or Hide Post Outside Slider Area

If your slider has its height and/or width set to “fixed width” in the Spotlights Settings > Slider > Layout options panel, you also have the option of making the slider smaller than the Spotlights block, enabling you to use the remainder of the Spotlights area to display any other kind of post content (such as text, images, video etc) in combination with the content of your slideshow. 

To show post content outside of the slider area you need to enable the function:

1. Open the Content Area Settings > Post Outside Slider option panel.

Do this by clicking on , then locate the heading Post Outside Slider and click the Show & Hide bar:

2. Click the Yes radio-button.

3. Click  to apply the change and   to make the change visible in your live theme design.

Note: To adjust the height and width of the Slider view the Height and Width Dragging tutorial. To display content in the Spotlight outside of the slider, view the Spotlight Block Settings tutorial. 

Show or Hide Sidebars

Sidebar’s can be hidden from your theme completely, or you can choose to make Sidebar’s visible only when certain areas of your site are viewed.

To set the show or hide settings of your sidebars (applies to all Sidebars):

1. Open the Content Area Settings > Sidebars option panel.

Do this by clicking on , then locate the heading Sidebars and click the Show & Hide bar:

The four show and hide display options are:

  1. Front Page: Whether the sidebar is displayed on your front (home) page.
  2. Blog: Whether the sidebar is displayed on any multiple post display page that is not on the front page of your site, such as your category pages, tag pages, search results, or your latest posts (if displayed via a sub-page).
  3. Single Posts: Whether the sidebar is displayed when viewing an individual post by itself.
  4. Pages: Whether the sidebar is displayed when viewing an isolated page, such as an “About” or “Contact” page.

2. Click the relevant Show or Hide radio-button for one or all of the four options to select whether you want the block to be shown or hidden in those areas of your site.

3. Click  to apply the change and   so that the changes can be visible in your live theme design.

Note: Your selections will apply to each sidebar you have in your theme. 

Show or Hide Post Info

Information specific to your posts can be hidden from your theme completely, or you can choose to make post information visible only when certain areas of your site are viewed.

Post info applies to the following types of information:

  • author info
  • post time and date
  • comments
  • taxonomy info (including categories and tags)

To set the show or hide settings of your post info:

1. Open the Content Area Settings > Post Info option panel.

Do this by clicking on , then locate the heading Post Info and click the Show & Hide bar:

The four show and hide display options are:

  1. Front Page: Whether post info is displayed on your front (home) page.
  2. Blog: Whether post info is displayed on any multiple post display page that is not on the front page of your site, such as your category pages, tag pages, search results, or your latest posts (if displayed via a sub-page).
  3. Single Posts: Whether post info is displayed when viewing an individual post by itself.
  4. Pages: Whether post info is displayed when viewing an isolated page, such as an “About” or “Contact” page.

2. Click the relevant Show or Hide radio-button for one or all of the four options to select whether you want post info to be shown or hidden in those areas of your site.

3. Click  to apply the change and   so that the changes can be visible in your live theme design.

Note: Your selections will apply to all post info for the relevant area. 

Show or Hide Breadcrumb Trails

Breadcrumb trails are useful to help visitors keep track of how they got to where they are. Breadcrumb trails also provide a neat quick jump link resource to help visitors navigate around similar areas of your site that they are presently looking in.

You can hide breadcrumb trails completely from your theme completely, or you can choose to display them only when a visitor is viewing a specific area of your site. 

Example breadcrumb trail:

To set the show or hide settings of your breadcrumb trails:

1. Open the Content Area Settings > Breadcrumbs option panel.

Do this by clicking on , then locate the heading Breadcrumbs and click the Show & Hide bar:

The three show and hide display options are:

  1. Blog Breadcrumb Trail: Whether a breadcrumb trail is displayed on any multiple post display page that is not on the front page of your site, such as your category pages, tag pages, search results, or your latest posts (if displayed via a sub-page).
  2. Single Post Breadcrumb Trail: Whether a breadcrumb trail is displayed when viewing an individual post by itself.
  3. Pages Breadcrumb Trail: Whether a breadcrumb trail is displayed when viewing an isolated page, such as an “About” or “Contact” page.

2. Click the relevant Show or Hide radio-button for one or all of the four options to select whether you want a breadcrumb trail to be shown or hidden in those areas of your site.

3. Click  to apply the change and   so that the changes can be visible in your live theme design.

Note: Your selections will apply to all post info for the relevant area.

The default areas described at the top of this tutorial are the four areas available in any WordPress theme. However you can also set theme elements to show or hide in four additional areas through ThemeStarta’s in built page templates.

These additional areas are designed to allow you to show and hide exactly what you want depending upon the page being viewed.

Let’s look at that now. 

Page Templates Show & Hide

ThemeStarta’s four in built page templates make it easy for you to specify exactly what you want to hide or show on specific pages.

1. Go to the very top of your ThemeStarta preview window, just below the Saving, Updating and Theme Defaults buttons, where you will see the following ThemeStarta Options bar:

2. Click the ThemeStarta Options bar, then click the Page Template Settings bar. Doing so will give you access to the Page Template Settings options panel:

3. Make sure that the Enable radio-button is selected.

4. Give your new page template a name that will help you identify what you have created for the template for. For example, if you were creating a custom page template designed not to show your Sidebar, you might name your template No Sidebar Template.

Note: You don’t have to give your template a unique name if you don’t want to as the default names of Template One and Template Two will work.

5. Click  to apply the change. 

Now that you have enabled page templates, (and named one or more templates in a way that will help you remember what they are for), you can proceed to set theme elements such as blocks & sidebars to show or hide in them.

6. Locate the Show & Hide bar for the theme element you wish to show or hide (see below for specific locations for various elements):

7. Click anywhere on the Show & Hide bar to expand the available show and hide options. Underneath the the Default Show & Hide options you will see the Page Template Show &  Hide options:

The four show and hide display options are by default named as you see above. If you have given your page templates a custom name, the default names above will be replaced by the custom names you applied at step 4 & 5 above.

8. Click the relevant Show or Hide radio-button in one or all of the four options to select whether you want the theme element to be shown or hidden when the custom page template is viewed.

9. Repeat step 6 to 8 for each theme element that you want to show or hide in your custom page template.

10. Click  to apply the change and   so that the changes can be visible in your live theme design.

11. To make use of your custom page template in your WordPress site, add a new Page or edit and existing Page via the WordPress dashboard. Look for the Page Attributes panel:

12. From the Template drop-down list, select the custom page template you want to use. Once you publish or update the page this setting will tell WordPress to apply the custom page template you created in ThemeStarta. That is, when the page you’ve just created or updated is viewed, only content contained in the blocks specified as “Show” in the ThemeStarta preview will be displayed.