How To Add Page-specific Ad Links To The Content Sidebar in the WordPress Twenty Fourteen Theme

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.

<?php
/**
 * The Content Sidebar Specific To Front Page
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen_Child
 * @since Twenty Fourteen Child 1.0
 */

if ( ! is_active_sidebar( 'sidebar-front' ) ) {
  return;
}
?>
<div id="sidebar-front" class="content-sidebar widget-area" role="complementary">
  <?php dynamic_sidebar( 'sidebar-front' ); ?>
</div>  <!-- #sidebar-front -->

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' => '<aside id="%1$s" class="widget %2$s">',
   'after_widget'  => '</aside>',
   'before_title'  => '<h1 class="widget-title">',
   'after_title'   => '</h1>',
 ) );
}

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:

  1. Open page.php inside the parent theme’s folder
  2. Highlight and copy all its content
  3. Create a file in your child theme and call it front-page.php
  4. Open front-page.php and paste the code from page.php that you previously copied from the parent theme.
  5. 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.
  6. 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: <?php get_sidebar( 'content' ); ?>. 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.
Advertisements

2 thoughts on “How To Add Page-specific Ad Links To The Content Sidebar in the WordPress Twenty Fourteen Theme

  1. Dear Maria,

    Thank you so much for your extended support but I am totally clueless right now. In spite of going through your post several times and trying to follow it but all in vain 😦
    I am still stuck with the first phase which is making a child theme. I am stuck at the first stem of making a child a theme which is going to wp-content/themes. How do I go to wp-content/themes? Is it through FTP? Or is there any other easier option? Thanks again.

    • Hi Aaliyah,
      Thanks for going through my tutorial. I don’t know what your level of expertise is with website building. I assume my target audience is familiar with accessing and modifying files on the server and only needs guidance on customization tasks performed on HTML templates and WordPress themes. However, I’d be happy to answer questions about file transfer. FTP is what I use to access files on the server because it’s easy, quick and the tool I use is free (i.e., FileZilla). However, your hosting company must have offered you a way to access the directory of your website from some sort of control panel or file management tool. If you consult their knowledge base/FAQs or get in touch with their support team, you’ll get the answers you need. If you feel things get over your head, I’d be glad to take over the project and solve any issues you might have.

      Thanks again for your interest πŸ™‚

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s