Dynamically Adding Sidebars in Genesis

Share this post

This post covers dynamically adding sidebars in Genesis utilizing a plugin, code and the Primary sidebar widget.

genesis simple sidebarsMost people are fine with having one Primary sidebar widget on their Wordpress sites. Whatever content is loaded to the Primary Sidebar widget area is displayed on pages and posts. But what happens when you need more than one sidebar widget?

Most of our sites are developed using the Genesis Framework. When we need additional sidebars we utilize the Genesis Simple Sidebars plugin. This great plugin allows you to create unlimited number of sidebar widgets. You then only need to assign the appropriate sidebar widget to each page.

What if You Want Your Blog Posts to Have Different Sidebar Content Than Your Interior Pages?

sidebar selectorUsing Genesis Simple Sidebars you could create a new sidebar called Blog Posts, and then each time you create a new blog post, select the Blog Post sidebar. Your interior pages would show the content in the Primary Sidebar, your Blog pages the content in Blog sidebar.

That seems like a nuisance though, having to remember to assign the sidebar every time you create a post. If you’re doing content marketing you’re more likely to be creating more posts than pages, so there is a better option.

Use the Primary Widget to display the content you want in the sidebar on your blog home page and on your single blog post pages. Then create a Page Sidebar Widget area (or several if you want different sidebars on different sections of your site) and add the content for your site pages. Then assign the Page Sidebar widget to each new page you create. (remember once your site is built you’re more likely to create posts than pages)

Houston We Have A Problem

We recently worked on a B2B website redesign for Diamond Global, a trusted foreign worker agency used by Canadian employers. Their site included regular pages, blog post pages and job listings. The theme we used is the Genesis child theme Epik.

To understand the problem you have to understand how the pages and posts of the site are created:

  • Pages: Normal like any other Wordpress site
  • Blog Posts: Normal like any other Wordpress site
  • Job Listings: (Created via WP Job Manager plugin) Job listings are created as posts.

job listing optionsAnd there is our problem. We needed specific job related intent on the job listing pages, but because the job listings were actually posts, by default the pages utilized the Primary Sidebar Widget for sidebar content.

And when creating the job listing pages, the option to select a specific sidebar widget was not available.

Requirements
Here is what we needed to accomplish:

  1. Majority of Pages: Default sidebar content
  2. Industry Pages: Specific Industry related content
  3. Blog Home Page and Posts: Blog related sidebar content
  4. Jobs Section Pages and Listings (posts)

**Once again I want to emphasize that this issue exists because Job Listings are added as posts and unlike blog post pages, do not include the option to select a specific sidebar.

The Solution
We went through a number of possible solutions before settling on using the Widget Logic plugin with some code to dynamically control which sidebar content appeared on specific pages

widget logicThe Widget Logic plugin ads a section at the bottom of each text widget that allows you to add custom code to the widget. We used this to control what pages and posts will display the content in its sidebar.

The text in the ‘Widget logic’ field can be full PHP code and should return ‘true’ when you need the widget to appear.

Operator Controls We Used

! (NOT) to reverse the logic, eg !is_home() is TRUE when this is NOT the home page.

|| (OR) to combine conditions. X OR Y is TRUE when either X is true or Y is true.

&& (AND) to make conditions more specific. X AND Y is TRUE when both X is true and Y is true.

Dynamically Adding Sidebars in Genesis

Interior Pages

interior page w sidebar
size-full wp-image-5345″ />

Industry Pages

Industry Page

Blog Pages

blog page w sidebar
size-full wp-image-5343″ />

Job Pages

find a job
size-full wp-image-5342″ />

Industry Pages
industry sidebar selectionOur site Industry section is made up of only pages so we took the easy path and created an Industry Sidebar Widget using Genesis Simple Sidebars. Then on each of the industry pages we selected the Industry Sidebar widget to display sidebar content.

**All of the content we are adding to widgets in the following steps are added to the Primary Sidebar Widget!

Site Pages (excluding Industry Pages)
All of the pages on the site, excluding industry pages and posts, featured the same sidebar content so we started by adding the content into the Primary Sidebar widget. The only issue to deal with was that as pages, this content also displayed on the Industry pages which were already displaying content form the Industry sidebar widget. The Primary sidebar also displayed on the Blog Post and Job Listing pages.

excluding pages postsSo for this to work we needed to work we needed to allow the Primary sidebar content to show on all pages except those in the Industry section and any posts. Using Widget Logic and a little code we are able to do just that.

!is_page( array( 77,10,194,197,203,471 ) ) && !is_single()

This code tells Wordpress to not display this content on pages with id #’s 77,10,194,197,203,471 and to not display this content on Posts

Code Explanation

!is_page - This statement contains two parts:

  • ! – Not
  • is_page – is a page

This combination tells the Wordpress Not Page

( array( 77,10,194,197,203,471 ) ) – This tells Wordpress which pages the “Not Page” refers to.

Combined it tells Wordpress to not display content on pages with these page id #’s.

&& – And statement

!is_single() – This statement contains two parts:

  • ! – Not
  • is_single – is a post

The end result is the content we added to the Primary Sidebar Widget is not displayed on Industry pages or Posts (blog and job listings)
blog sidebar content
Blog Home Page and Post Sidebars
Our next step was to control what content is shown on our blog Home page and single posts. Normally we could assign content to our blog sidebar by using “is_single()”.

But because our Job Listings are also posts, we not able to exclude the Job Listing Posts. Instead we approach this by including on categories used by our blog posts.

is_single() && in_category( array( 4,18,19,21 ) ) || is_page(’77’)

This code tells Wordpress to display this sidebar content if it is a Post in category id #’s 4, 18, 19 and 21. Or display content on page with id #77 (our blog home page).

Code Breakdown

is_single() – If this is a Post

&& – and

in_category( array( 4,18,19,21 ) ) – This code contains two statements

  • in_category – is in category
  • ( array( 4,18,19,21 ) ) – with these id #’s

Combined these four statements tell Wordpress that if it is a post AND in the following categories, then display the content. The end result is that content is displayed only on blog posts.

Next we need to ensure the content is added to our Blog Home page.

|| – Or statement

is_page(’77’) – is page with id #77

Combined it tells Wordpress to add content to our Blog home page.

**If you want to add more content to blog related pages or posts you would add the content to the Primary Sidebar and then add the following code to the Widget Logic box:

CODE: is_single() && in_category( array( 4,18,19,21 ) ) || is_page(’77’)

***If you add additional categories to your blog you will need to add the category id # to the code. ( array( 4,18,19,21, xx ) )

**You also need to exclude the new category from the Job Listings posts by adding the category id # to the code below in – Find A Job Pages and Job Listings (posts).

Find A Job Pages and Job Listings (posts)
Our Jobs section consists of a couple of pages and a number of job listings (posts). To display content we are going to tell wordpress to display Jobs related sidebar content by excluding blog categories and on specific pages.

is_single() && !in_category( array( 4,18,19,21 ) ) || is_page( array( 10,194,197,203,471 ) )

This code tells Wordpress to display this content if it is a Post not in category id #’s 4, 18, 19 and 21. Or display content on pages with id #‘s 10, 194, 197, 203, and 471.

Code Breakdown

is_single() – If this is a Post

&& – and

!in_category – This code contains two statements

  • ! – NOT
  • in_category – in category

( array( 4,18,19,21 ) ) – with these id #’s

Combined they tell Wordpress to display content if it is a Post not in category with id #’s 4, 18, 19 and 21.

Next we need to tell Wordpress to display the content on the job related pages.

|| – Or statement

is_page – is a page

( array( 10,194,197,203,471 ) ) – with these page id #’s

Combined this tells Wordpress to display content on pages with id #’s 10, 194, 197, 203, and 471.

**If you want to add more content to Job related pages or posts you would add the content to the Primary Sidebar and then add the following code to the Widget Logic box:

CODE: is_single() && !in_category( array( 4,18,19,21 ) ) || is_page( array( 10,194,197,203,471 ) )

***If you add additional categories to your blog you will need to exclude them from your Job Listing code: is_single() && !in_category( array( 4,18,19,21, xx ) )

That’s it. The end result is are able to dynamically assign sidebars to different pages and posts.

Surge Labs is a conversion optimization company helping companies improve conversions by 20% or more. The knowledge we gain through conversion optimizations benefits the websites we design. Need help building or redesigning your site to be conversion focussed? Contact us at 678-951-9506, via email at info at surgelabs.com, or complete our FastForm.


Initiate Contact

Only complete this form if you want us to call you.  We do not quote a project until we first have a conversation. We will reach out to set up a time to chat.