1. Upload and activate Twenty Thirteen child theme from Super Plugin:
When modifying themes it is good practice to use child themes. Creating these can be fiddly. It far easier and quicker to simply install one. I’m a grateful to the authors of Super Plugin’s Thirteen Twelve Child them for their brilliant work here. This theme comes with several additional sidebars for widgets. Unfortunately none of them in on the left, but it’s a start.
First, download zip file from here. You will not need to unzip it. (https://superplug.in/twenty-thirteen-child-theme/).
Then, go to “Themes” tab and click on “Add New” and upload the zip file from your Downloads folder (or wherever you saved it to) and activate it. At first you will see no changes to your site.
You will make all changes to files on this theme, not the main Twenty Thirteen theme files.
2. Create a div container on the top left hand side corner of the page.
Note: My site uses static pages only and no posts so I made all changes to the page.php file.
I’m the first to admit that there are probably better ways to do this. I’m not a css expert, I just did what worked. This was the first thing to work after I tore out my hair searching everywhere, trying to fiddle with stuff and following impossible instructions. Someone out there could let us know how to do this better. I hunted around and created an amalgam of sorts from different code out there from various twenty thirteen customisations (I now wish I’d kept a list of all of the sources for this post but didn’t think to at the time). A lot of this code is probably redundant.
The code goes to the page.php file of the child theme. Do a search for the following lines and place the div code there:
CODE GOES AFTER THIS LINE: get_header(); ?>
AND BEFORE THIS LINE: <div id=”primary” class=”content-area”>
<div id=”tertiary” class=”sidebar-container” role=”complementary”>
<div style=”margin-left: 10px; margin-left: 30px; width: 180px;”>
<div class=”sidebar-inner”>
<div class=”widget-arealeft”>
<aside id=”recent-posts-2″ class=”widget widget_recent_entries”>
</aside>
</div>
</div>
</div>
</div>
At the end of this, your new “widget area” should appear on the left top corner of the page, but the page itself will have gone a little wonky.
3. Using the style.css file, line up the different elements to fit page.
Still in the Editor, scroll to the top of the page to change the files being shown on the Editor to the original Twenty Thirteen theme (“Select Theme To Edit”). Make sure you click to select the the original theme. The find the original style.css file and scroll down to item number 5.0. To make things easy I just copied everything under this heading.
Then, navigate back to the style.css file of the child theme and past the code right under the following line:
COPY THE CODE AFTER THIS LINE: @import url(“../twentythirteen/style.css”);
Next, make changes to the margin and width values until your page lines up properly. Make sure you click the Update button to activate your changes ( to be on the safe side, you could save a copy of the code on Notepad just in case things go all wonky and you need to go back a step). Here are the values that worked for my page.
* 5.0 Content
* —————————————————————————-
*/
.hentry {
padding: 40px 0;
}
.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
margin-left: 170px;
max-width: 604px;
width: 100%;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
max-width: 1040px;
padding: 0 376px 0 60px;
}
/**
4. Populate your new left sidebar.
Cheat – I then just went ahead and filled the div container in the pages.php file with the same html code I’d have used in the ‘Text’ widget. My html for the book link just went between the <aside> </aside> lines.
But if you’re feeling adventurous (and your knowledge of css is better than mine) you can instead place the ‘get sidebar php’ function in that container to move the child theme’s top content widget area into position, and fiddle with margins, etc to line everything up properly. This was just too much work for me, especially since the cheat got me where I wanted.
It’s not the cleanest code, but it works. If someone can tart this up for us, I’d be grateful.
