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:

Calendar widget
Vertical menu
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.

Creating a child theme where all modifications takeplace
Creating a functions.php file in the child theme
Duplicating sidebar.php from the parent to the child theme
Creating a new widget area using functions.php
Placing a widget area above the navigation menu and adding the new widget area using sidebar.php
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: __( ‘Second Vertical Sidebar’, ‘twentyfourteen-child’ ), ‘id’ => ‘sidebar-4’, ‘description’ => __( ‘Second sidebar that appears on the left.’, ‘twentyfourteen-child’ ), ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘

‘, ‘after_title’ => ‘

‘, ) ); } //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 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. 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 Here’s the code you need for sidebar.php all in one place. ‘secondary’ ) ); ?>


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.

Leave a comment

Your email address will not be published.