Skip to main content Skip to secondary navigation Accessibility Feedback

Adding a sidebar to Go Mobile First

About a month ago, I released a free mobile-first starter theme for WordPress called Go Mobile First. To help you use it, I’m writing a series of tutorials on how to make some common changes.

Today, we’ll be adding a sidebar to Go Mobile First.

Getting Setup #

Before we get started, there’s a few things you’ll need to do:

  1. Download a good text editor. Gedit is free, cross-platform, and works really well.
  2. Install MAMP (or WAMP if you use Windows). This will let us work locally so we don’t mess up a live site. You can find really good instructions on setting up MAMP on Smashing Magazine.
  3. If you didn’t install WordPress as part of your MAMP setup, do that now.

Creating a Backup #

Before we start working, save a copy of Go Mobile First and rename the folder “go-mobile-first-with-sidebar.” Then open up the style.css file and change the theme name to Go Mobile First with Sidebar. If we mess anything up, you want it to be a copy, not the only version of your site.

Launch the WordPress admin panel and activate our “new” theme. Then, pull up the site.

Now, let’s get to it!

Note: This tutorial is based on version 1.4 of Go Mobile First, which was the most recent version at time of writing.

Starting with Mobile First #

First, let’s sketch out how we want the site to look on small screens, and then how we’ll enhance it for bigger screens.

On small screens, we’ll keep our single column layout. The sidebar will appear below the body content but above the footer.

On bigger screens, the content will float to the left, and the sidebar will float to the right.

Adding a Sidebar to the HTML #

Create a new file in your text editor and save it to the Go Mobile First with Sidebar folder under the name sidebar.php. This is the name WordPress uses to for the sidebar template.

For now, write <p>This is the sidebar</p> and save the file. We’ll come back and add real content later.

We need to refer to the sidebar template in all of the locations where we want it to appear. Those include:

  • The archive of posts by category, tag, etc. (archive.php)
  • The landing page (index.php)
  • Individual pages (page.php)
  • Individual posts (single.php)

Open up each of those files in your text-editor and locate <?php get_footer(); // Pulls in the footer.php template ?>. Just above that bit of code, add:

<?php get_sidebar(); // Pulls in the sidebar.php template ?>

As the comment says, this pulls in the sidebar template. Save each of the files, and refresh your browser. Down at the bottom of your site, you should see this:

It’s not much to look at just yet, but that’s ok. We just need to add some styling.

Defining the Structure #

On small screen, we want the sidebar to appear down at the footer, but on bigger screens, we want it to float to the right.

We’ll need to make some updates to our stylesheet. Open up style.css.

We don’t need to change our mobile-first base styles, so scroll down to the Media Queries section and locate:

/* For screens greater than 680 pixels in width */
@media (min-width: 681px) {

On bigger screens, we’re going to reset the .container width to 960 pixels. Since our articles and pages aren’t the only content on the page anymore, we’ll need to add a new structure calls to set the width for the main content section, as well as a new class to set the width for the sidebar.

At the top of this section, add the following code:

/* 
    A fixed width on bigger screens. 
    Set the container width to 960 pixels. 
    We need to reset max-width to match.
*/
.container {
    width: 960px;
    max-width: 960px;
}

/* Set width of main content area and float to the left */
.main {
    width: 640px;
    float: left;
}

/* Set width of sidebar and float to the right */
.aside {
    width: 260px;
    float: right;
}

Save and refresh your browser.

You should notice that your site content is now really wide. That’s because we haven’t added these new classes to the HTML yet.

Adding Structure to the HTML #

Let’s start with the sidebar.

Open up sidebar.php. We’re going to wrap the content in <aside class="aside"> and </aside>. Aside is one of the new semantic divs in HTML5. While you can style these elements directly, we use this div for several other things in Go Mobile First, so we’ll use the aside class to style it.

Your sidebar.php file should look like this:

<aside class="aside">

    <p>This is the sidebar</p>

</aside>

Next, open up index.php. Below <?php get_header(); // Pulls in the header.php template ?>, add <div class="main">. At the bottom of the page above <?php get_sidebar(); // Pulls in the sidebar.php template ?>, add </div>.

Your code should look like this:

<?php get_header(); // Pulls in the header.php template ?>

<!-- This is the template for the page that displays all of your blog posts -->

<div class="main">

    <!-- A BUNCH OF PAGE CONTENT -->

</div>

<?php get_sidebar(); // Pulls in the sidebar.php template ?>

<?php get_footer(); // Pulls in the footer.php template ?>

Save and refresh your browser. Your site should now look like this:

Now repeat the process you used with index.php on archive.php, single.php, and page.php.

Clearing Floats #

You may notice there’s a random line next to the sidebar. That’s an issue cause by the float: left and float: right properties on the .main and .aside sections. The border on the footer is wrapping around the main content section.

The .container section clears floats, but it’s called after the footer. Let’s fix that.

In footer.php, there’s this snippet of code:

</section><!-- End the main section (started in the header) -->

This ends the <section class="container"> div that’s started in the header. Cut-and-paste to the top of the footer.php template. This will end that section and clear floats before the footer starts.

However, this also means there’s no container around the footer content anymore so let’s add one. You code should now look like this:

</section><!-- End the main section (started in the header) -->

    <!-- Start the footer section. Class tags center and lighten text, and reduce font size. -->
    <footer class="container small muted text-center">

Save and refresh your browser. This is what you should see:

Viola! No more line.

Adjusting the Break Point #

If you decrease the size of your browser, you’ll notice that a lot of content moves offscreen before the site shifts to the fluid base layout. That’s because the min-width parameter on the media query is based on a 640 pixel wide site, not a 960 pixel one.

Accounting for 20 pixels of padding on each side, the new breakpoint should be 1001 pixels – 960 pixels plus 40 pixels plus 1 pixel more than the largest size for base styles.

Update the media query so that it looks like this:

/* For screens greater than 1,000 pixels in width */
@media (min-width: 1001px) {

Save and refresh your browser. If you decrease the size of your browser window, the site should now resize itself correctly.

Finishing Touches #

On smaller screens, the sidebar content blends in to the main content section. Let’s add a top-border that only appears on small screens.

First, open up style.css. Under @media (min-width: 1001px), let’s add a new class we can use to hide items on big screens:

.hide-big-screens {
    display: none;
}

Add that snippet after the .alignright styling, and then open up sidebar.php. Just after <aside class="aside">, add:

<hr class="hide-big-screens">

This inserts a line that’s hidden on screens that are bigger than 1,000 pixels. Save and refresh your browser.

You may notice that on bigger screens the sidebar text appears to be a bit higher than the main content. That’s because h1 tags have a top-padding of 14 pixels. To line things up nicely, add the .padding-top class, which adds 14 pixels of top padding, to the aside div:

<aside class="aside padding-top">

Save and refresh your browser. The sidebar content should now be lined up with the content in the main section.

Switching Sides #

Rather have your sidebar on the left? That’s easy.

We still want it to appear below the main section on smaller screens, so we don’t even need to touch the HTML. We’ll just switch the floats on bigger screens.

Open up style.css and locate this bit of code:

/* Set width of main content area and float to the left */
.main {
    width: 640px;
    float: left;
}

/* Set width of sidebar and float to the right */
.aside {
    width: 260px;
    float: right;
}

We’re simply going to switch .main to float: right and .aside to float: left, like this:

/* Set width of main content area and float to the right */
.main {
    width: 640px;
    float: right;
}

/* Set width of sidebar and float to the left */
.aside {
    width: 260px;
    float: left;
}

Save and refresh your browser. And that’s that.

Wrapping Up #

You’ve now added a sidebar to the Go Mobile First theme. Nice work!

To move these updates to your live site, upload the modified theme to your web server (if you use WordPress’s built-in theme uploader, you’ll need to zip the file first) and activate it.

If you got stuck anywhere along the way, you can download the files from this tutorial on GitHub.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests