How To Change Widgets And Vertical Menu Display In WordPress Twenty Fourteen

Very recently, I had a great client who turned to me for a solution to a customization problem. He’d been working with the WordPress Twenty Fourteen theme, and wanted to change the way widgets and the vertical menu are ordered in the theme’s left column.

Here’s what I did to achieve the desired result.

Default Display Of The Twenty Fourteen Left Column

By default, the left column in the Twenty Fourteen Theme gives users the ability to display a vertical menu on top. Below it, it’s possible to place some widgets, e.g., Archives, Recent Posts, etc.

Here’s what the left column looks like by default, once some content has been added to it.

WP Twenty Fourteen Theme Default Left Column
WP Twenty Fourteen Theme Default Left Column

The image above shows the default display of the Twenty Fourteen left column after I added a vertical menu and the following widgets: Calendar, Archives and Recent Posts.

The Design Goal

My client’s ideal display instead would be:

  1. Calendar widget
  2. Vertical menu
  3. Archives and Recent Posts widgets.

In actual fact, my client had a Text widget portraying a beautiful image that he wanted to showcase on top of the menu. However, for this demo, I’m going to use a calendar widget. Therefore, let’s pretend that he wanted to display a calendar at the top of the left column.

This display order is impossible to achieve either by using the standard WP drag and drop functionality or by resorting to CSS styling.

What’s To Be Done?

Here are the steps to take to achieve the display order my client was after.

  1. Creating a child theme where all modifications takeplace
  2. Creating a functions.php file in the child theme
  3. Duplicating sidebar.php from the parent to the child theme
  4. Creating a new widget area using functions.php
  5. Placing a widget area above the navigation menu and adding the new widget area using sidebar.php
  6. Adding widgets from the WP Widgets panel (Appearance > Widgets) in the admin area or from the Theme Customizer area (Appearance > Customize). One widget should appear above and others below the vertical sidebar menu.

Here’s what you’re going to learn by following along with this tutorial:

  • How to create a child theme
  • How to modify a WordPress template file using a child theme
  • How to add functionality to a child theme by coding a widget area
  • How to implement the widget area inside the theme’s template.

Let’s Get Coding!

#1: The Child Theme

For this post, I created a demo child theme, and named it Twenty Fourteen Child. This is crucial. In fact, if you only need to apply light CSS modifications, something like the Simple Custom CSS plugin could be sufficient.

However, when it comes to adding functionality and/or modifying template files, the use of a child theme is mandatory. This ensures that we don’t lose the goodness coming from the parent theme. At the same time, we keep all our modifications safe in the child theme when the time comes to install parent theme’s updates in the future.

Here’s a quick refresher on how to create a Twenty Fourteen child theme.

  • Create a folder inside your WordPress themes folder and call it anything sensible you like. For this demo, I called mine twentyfourteen-child
  • Create a .css file and name it style.css
  • Open the newly created style.css and add the following CSS code at the very top.
/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    
 Description:  Twenty Fourteen Child Theme
 Author:       
 Author URI:   
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:          dark, green, translation-ready, three-columns, responsive-layout
 Text Domain:  twentyfourteen-child 
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

To make the child theme yours, add your name in the Author spot, your website’s URI in the Author URI spot, and the tags that most reflect your theme’s features according to WordPress’ Guidelines.

Keep in mind that the most crucial info above is the Template field. This must contain the parent theme’s name as it’s printed in the folder name. In our case it’s twentyfourteen.

Save your work, access the Themes panel in the WP back-end and check that your Twenty Fourteen Child theme is there. Go ahead and activate it.

Also, for this demo, make sure you add a vertical menu in the Menus panel of your WP install and check the Secondary menu in left sidebar checkbox as the Theme locations under Menu Settings.

Vertical Menu In WP Admin Panel
Vertical Menu In WP Admin Panel

If you’re following along, save your menu and pack yourself on the back – the preliminary work has been done!

#2: functions.php

Next, create a .php file inside the twentyfourteen-child folder and name it functions.php. Open it inside a code editor and add the following lines:

<?php
// Twenty Fourteen Child Functions and Definitions

Save your file for now. We’ll pick it up later.

#3: Duplicate sidebar.php

To achieve the desired design, we need to modify something inside sidebar.php, therefore the next step is to make a copy of this file and paste it inside the child theme’s folder.

Now the file structure inside your twentyfourteen-child folder looks like this:

Twenty Fourteen Child File Structure
Twenty Fourteen Child File Structure

#4: Create A New Widget Area

In WP language, a widget area is also called Dynamic Sidebar. It’s a place in your WP site where you can add widgets by dragging them from the Widgets panel or from the Theme Customizer panel and dropping them into the widget area.

Here’s what the Twenty Fourteen default Widgets areas look like:

Default WP Twenty Fourteen Widget Areas
Default WP Twenty Fourteen Widget Areas

Let’s add a new widget area! This is done in functions.php, therefore open this file if you haven’t already.

Here’s the code.

function tf_child_widgets_init() {
//register an additional sidebar 
  register_sidebar( array(
    'name'          => __( 'Second Vertical Sidebar', 'twentyfourteen-child' ),
    'id'            => 'sidebar-4',
    'description'   => __( 'Second sidebar that appears on the left.', 'twentyfourteen-child' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
  ) );
}

//hook this function into the widgets_init action
add_action( 'widgets_init', 'tf_child_widgets_init' );

The code above creates a function that I named tf_child_widgets_init() (tf is a prefix I used to stand for Twenty Fourteen – just a way to avoid naming conflicts).

The tf_child_widgets_init() function registers a dynamic_sidebar called sidebar-4 for WordPress and Second Vertical Sidebar for humans.

The function is then hooked into the widgets_init() action, an event that fires when WordPress initializes its widgets. This way, WP "becomes aware" of the presence of the new widget area.

Save your files and access the WP Widgets area. By now it should display the new Second Vertical Sidebar widget area, like so.

New Twenty Fourteen Child Widgets Area
New Twenty Fourteen Child Widgets Area

We have a new widget area where we can place widgets to our heart’s content. What’s left now to be done is to make sure the widgets we add here appear on the page at the desired location.

Time to start on the next step.

#4: Place A Widget Area Above The Navigation Menu And Add The New Widget Area

Displaying the contents we place inside a widget area, is done by adding some code to the relevant WP template file, in this case to sidebar.php. Therefore open this file in your code editor if you haven’t already.

Above this line of code, where the vertical navigation starts

<?php if ( has_nav_menu( 'secondary' ) ) : ?>

cut (Ctrl+C on Windows/Cmd+C on Mac) the following code snippet, which at the moment is under the navigation menu, and paste (Ctrl+V on Windows/Cmd+V on Mac) it above the navigation menu.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  </div><!-- #primary-sidebar -->
<?php endif; ?>

The code above ensures that content inside sidebar-1 gets displayed on the page. More precisely, after our intervention, it now gets displayed above the vertical navigation menu.

Next, add our new widget area below the navigation menu. Remember that for WordPress this widget area is called sidebar-4

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
  <div id="supplementary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-4' ); ?>
  </div><!-- #supplementary-sidebar -->
<?php endif; ?>

Here’s the code you need for sidebar.php all in one place.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  </div><!-- #primary-sidebar -->
<?php endif; ?>
	
<?php if ( has_nav_menu( 'secondary' ) ) : ?>
  <nav role="navigation" class="navigation site-navigation secondary-navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
  </nav>
<?php endif; ?>
	
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
  <div id="supplementary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-4' ); ?>
  </div><!-- #supplementary-sidebar -->
<?php endif; ?>

That’s all we need to accomplish our goal. Now, we can place widgets both above the vertical navigation menu inside the sidebar-1 widget area and below it inside the sidebar-4 widget area. Feel free to visit the Codex page for the register_sidebar() function.

#6: Add Widgets

Go to Appearance > Widgets in your WP admin panel, and start adding widgets whichever way you like. My client’s request was about having the calendar widget on top of the menu and the Archives and Recent Posts widgets below the menu. Therefore, this is what I’ve done.

Here’s the result.

New Left Column In Twenty Fourteen Child Theme
New Left Column In Twenty Fourteen Child Theme

To Sum Up

Once again, to customize a WordPress theme, it’s important to gain some knowledge of its code structure. Then, work out a plan of action and go ahead.

WordPress offers ready-made functions, hooks and filters that let us perform most common tasks easily.

What about you, how do you find working with the Twenty Fourteen theme? Let me know using the comment box below.
Advertisements

2 thoughts on “How To Change Widgets And Vertical Menu Display In WordPress Twenty Fourteen

  1. I’m having trouble with this – followed all of your steps, but when I now add widgets via the ‘second vertical sidebar’ area in wordpress, they aren’t appearing on my website and the sidebar is just blank. Do you know why this is happening?

    • Hi Eleanor,

      Thanks for your comment. Not having your code in front of me makes it a bit difficult to come up with a solution to your problem. My first guess would be this: did you follow step 4 in the post? In other words, did you add this code to sidebar.php?


      <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
      <div id="supplementary-sidebar" class="primary-sidebar widget-area" role="complementary">
      <?php dynamic_sidebar( 'sidebar-4' ); ?>
      </div><!-- #supplementary-sidebar -->
      <?php endif; ?>

      I hope this helps, let me know if you have any more issues with this 🙂

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