Let’s say you’d like to have some ad links displayed on the right sidebar of your Twenty Fourteen WordPress theme, but only on one page. You’d like the rest of the pages with a right sidebar to display regular links.

Here’s one way to achieve this.

The WordPress Theme Customization Problem
The Twenty Fourteen WordPress theme has three widget areas, also known as Dynamic Sidebars in WordPress language.

Widget Areas In the WordPress Panel
Widget Areas In the WordPress Panel
In this post, I’m going to be interested in the Content Sidebar. This is the widget-ready area that Twenty Fourteen displays to the right of the main content.

Content Sidebar In WordPress Twenty Fourteen Theme
Content Sidebar In WordPress Twenty Fourteen Theme
Whenever you apply the Default template of the Twenty Fourteen theme to a page, the display includes the Content Sidebar to the right of the main content.

The typical scenario when you could find the technique I’m going to illustrate here handy, is when you’d like to display a widget on one or more specific pages that is different from all the other pages.

For instance, you could have some ads that are related to the topic of a particular page but not to another page. Or you’d like to display ads on one page and regular links on all the other pages, which is the example I’m going to discuss here.

My Solution To The WordPress Theme Customization Problem
My proposed solution to this particular problem includes creating a specific page template for the page where the sidebar with the ads will be displayed.

Also, assuming you’re following along, you’ll be creating a fourth widget area specifically for this page template. This widget area will have the same class as the Content Sidebar of the Twenty Fourteen theme, so the same styling will be applied to it without any effort on our part. Also, the new widget area will appear in the same location as the Content Sidebar, only on the new template page, so it will look exactly the same.

Here’s how to go about it.

1: Create A Child Theme

This is a case where creating a child theme is necessary. In fact, you’re going to modify and add template files and new functionality, therefore, a child theme will prevent them from being deleted after a theme update.

From now on, all the work will be done inside the child theme.

2: Create The New Sidebar File

Because my plan includes replacing the Content Sidebar with a new sidebar on a specific page, the next move is to create the new file for the sidebar. Using similar code to the sidebar-content.php file of Twenty Fourteen will do the job for us.

I’m going to call my sidebar sidebar-front because it’s going to be displayed only on the Home page. You’re free to choose a different name. Create the file that contains the code for the sidebar, I call it sidebar-front.php. Here’s what the code looks like in this file.

Notice how the new sidebar has a unique id – sidebar-front – but has the content-sidebar class, the same class used in the Twenty Fourteen right sidebar. This way we’re sure the same CSS style rules will be applied to the new sidebar.

3: Register The New Sidebar

Next, let’s register the new sidebar with WordPress. This step is what makes the widget area appear in the Widgets panel of the WordPress back-end.

Create a functions.php file in the child theme and add this code:

<?php
/* Twenty Fourteen Child v.1 Functionality */

//Set up a new sidebar for the front page
function twentyfourteen_child_widgets_init() {
register_sidebar( array(
‘name’ => ( ‘Sidebar Front’, ‘twentyfourteen_child’ ), ‘id’ => ‘sidebar-front’, ‘description’ => ( ‘Additional sidebar that appears on the right of the front page.’, ‘twentyfourteen_child’ ),
‘before_widget’ => ”, ‘after_widget’ => ”,
‘before_title’ => ‘

‘, ‘after_title’ => ‘

‘,
) );
}

add_action( ‘widgets_init’, ‘twentyfourteen_child_widgets_init’ );
Now, you can check if your new sidebar appears in the widgets panel, together with the other Twenty Fourteen widget areas.

Go To Appearance > Themes and activate your new child theme. Next, go to Appearance > Widgets and check that your Sidebar Front is where it should be.

New Sidebar Front In The Widgets Panel
New Sidebar Front In The Widgets Panel
Great, it’s there! The new sidebar is ready to host your widgets, but it’s not being displayed anywhere at the moment. Here’s how to remedy this.

4: Create A Front Page Template

The simplest way to do this is by following these steps:

Open page.php inside the parent theme’s folder
Highlight and copy all its content
Create a file in your child theme and call it front-page.php
Open front-page.php and paste the code from page.php that you previously copied from the parent theme.
Change the comment at the top of front-page.php by adding the info WordPress needs to recognize the new template: /**

  • Template Name: Front Page***/. If you need more guidance on how to create a WordPress page template, here’s a useful Codex tutorial.
    Scroll down towards the bottom of front-page.php, before the closing of the #main-content tag and find the call to the Content Sidebar. This looks like this: . Replace ‘content’ with ‘front’. Save your work.
    That’s all, your new page template is ready to be applied to a page. Let’s create one!

5: Add A New Page

Adding pages from your WordPress panel is quite easy. Go to Pages > Add New and you access the Page editor. Choose a title, categories and tags for the new page and add your content. In this case, you can call your page Home, Front Page, or whatever you see fit for the content of your new page. I called my new page Home.

The important bit here is to locate the Template dropdown box inside the Page Attributes section to the right of your WordPress Page editor, and select your newly created template for that page: Front Page.

Templates Dropdown Box In The Page Attributes Section
Templates Dropdown Box In The Page Attributes Section
Now save your new page. To display your new page as your website’s Home page you need to perform one last task.

Go to Settings > Reading in your WordPress install and adjust the Front Page display setting so that it looks like this.

WordPress Reading Settings Panel
WordPress Reading Settings Panel
By indicating a static page as your Home page, and selecting your newly added page, you’ve ensured that the page called Home is the page your users land on when they first access your website. Also, your Home page’s structure and the way it looks, will be dictated by the front-page template.

6: Add Your Ad Links To The New Sidebar Front

To check the result of such hard work, the next step is to add the ad links to our new Sidebar Front. To do this, just head over to Appearance > Widgets, locate the Sidebar Front, and add your ads. If you have some automatically generated HTML to display your ads, simply paste the code inside a Text Widget, save it and visit the site to make sure it all looks as it should.

Here’s what my Home page looks like now.

Newly Created Sidebar Front Displayed in Home Page
Newly Created Sidebar Front Displayed in Front Page
If I visit any other page that uses the default Content Sidebar (by having the Default Template applied to it rather than our new Front Page Template), I’ll see regular links.

Default Twenty Fourteen Content Sidebar Displayed On Sample Page
Default Twenty Fourteen Content Sidebar Displayed On Sample Page
To Sum Up
In this post I’ve shown how to add a new WordPress Dynamic Sidebar and a new Page template to your WordPress child theme so that you can show different content in the sidebar of a specific page.

The customization power WordPress puts in your hands is enormous, and with it comes great responsibility. Enjoy 🙂

What’s been like customizing the Twenty Fourteen theme for you? I’d love to hear from you in the comments below.

Leave a comment

Your email address will not be published.