The ultimate guide to a quickly customized mobile responsive Wordpress theme

Date: Tue Apr 14 2015 Wordpress »»»» techsparx

wordpress-logo-stacked-rgb.pngI'm getting up to speed with Wordpress. One thing I wanted was to quickly get a halfway decent looking mobile responsive theme, and then get on with the business of writing my content. My belief is that it's folly spending too much time on creating the perfect theme & look & feel, and that it's the content which is more important. At the same time good theme design can present your content to help your visitors feel good about the site, and come back for more. In other words we must strike a balance between a simple-to-implement theme, getting on with the business of writing ones message, and spending the time to ensure the resulting site is useful to the visitors.

With that in mind - I have some wisdom to share after setting up http://LongTailPipe.com to my (current) liking. I have some changes in mind as I roll in some new kinds of content, but it's pretty good for right now.

Not knowing what to do, I found a video tutorial which clarified an approach:

  • Start with the twentytwelve theme
  • Make a child theme
  • Customize the stylesheet etc to your hearts content
  • PROFIT

Why the TwentyTwelve theme?

  • Automattic (Wordpress's sponsor company) designs the TwentyNNNN themes as both decent themes, and as examples of theme writing
  • It's a mobile-responsive theme, whose inner design is pretty good, and is focused on blogging

There are other mobile-responsive themes that you can start with. For my needs I've moved on to the Nirvana theme, but working with the TwentyTwelve theme formed a solid basis of understanding with which I was able to experiment with several themes before settling on Nirvana.

Why a "child theme"? One can write a theme from scratch, and according to a book I read (Pro WordPress Theme Development (Expert's Voice in Web Development)) doing so gives one lots more control. However, I'm finding it much simpler to start (at this stage) from a base theme, and to modify that theme by setting up a custom child theme.

  • It's fast and easy to make a child theme
  • You automatically inherit everything from the parent theme
  • You copy over and modify anything you need to customize from the parent theme

A Wordpress "child theme" is a theme which declares it's "parent" so that Wordpress will use the parent theme to supply anything missing in the child theme. In other words, when Wordpress looks for a theme file or asset or anything, it first turns to the child and then to the parent if the child is unable to supply the resource.

Creating the child theme

Step 0 - install the TwentyTwelve theme.

Step 1 - in ...site.../wp-content/themes create a directory named "twentytwelve-xyzzy" (replacing "xyzzy" with a code of your choice). This directory will hold your child theme.

Step 2 - Copy wp-content/themes/twentytwelve/style.css to wp-content/themes/twentytwelve-xyzzy/style.css

Step 3 - Open wp-content/themes/twentytwelve-xyzzy/style.css and make these changes to the content block at the top.

  • Theme Name: Twenty Twelve for Colossal Caverns
  • Template: twentytwelve

Step 4 - just after the comment saying "Reset" at line 53 - enter this code:


@import url('../twentytwelve/style.css');

Once you've done this you can head to the Appearance section of your site dashboard, and see a new theme choice "Twenty Twelve for Colossal Caverns" (or whatever phrase you put in the style.css). Simply activate and voila, you've got a child theme.

The fact that nothing looks any different just means you haven't changed anything yet. If you're itching to change something, scroll down to line 489 where the body element CSS lives, and add something like


body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: red /* was:  #444 */;
}

Visit your site, and you'll see all the text is red. Happy?

While you're here, make the browser window and see how the mobile-responsive features work.

Familiarizing yourself with the Twenty Twelve style.css

It's useful to first familiarize yourself with the stylesheet to make sure your edits "stick" and work the right way in all environments.

Theoretically, because of the @import statement we added earlier, it's possible to delete everything in style.css after line 53 and then just enter CSS for anything you wish to change. I'd suggest instead to keep style.css as is, and modify away.

The twentytwelve designers followed a "mobile first" strategy, meaning that by default everything is set up right for mobile devices (with small screens). Then later in the stylesheet are breakpoints where conditional CSS is used to change things around for larger screens.

Between line 0 and line 482, the twentytwelve style.css resets the defaults for every element.

Starting at line 482 is the comment "Basic Structure" where the theme starts the work of structuring the content on the page. Note that everything is being set up for mobile devices (small screens) at this stage.

Then at line 1456-1472 is the first media query, with a block of CSS declarations for devices at least 600 pixels wide. Note that it redeclares CSS which had already been declared. In other words, this is the CSS for mid-size devices.

Then at line 1647 is another media query, for devices at least 960 pixels wide.

Finally at line 1674 is the media query for printers, so that someone printing your pages get a well laid-out print-out.

What's a media query?


@media screen and (min-width: 960px) {
...
}

This is CSS code which says, if the content is being displayed on the screen, and the browser window is at least 960px wide, then the following enclosed set of CSS declarations apply.

In other words, this CSS instructs the browser to query display characteristics, and then adjust the applicable CSS to match the current display. You can easily see this in operation by narrowing the browser window. Setting it to 599 pixels wide, 600 pixels wide, 601 pixels wide, for example, should demonstrate the changes which occur at that breakpoint.

Owning your site-wide footer

Should the footer of your site be an advertisement for Wordpress? And a link to the Wordpress site? I think not. And this will give us our first shot at modifying the presentation of the site.

Copy wp-content/themes/twentytwelve/footer.php to wp-content/themes/twentytwelve-xyzzy/footer.php

Edit footer.php and you'll see this:

<footer id="colophon" role="contentinfo">
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" 
  title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>">
  <?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->

You might not be able to follow every nuance of the code - but it's easy to see there's a link here to wordpress.org and also the result of the "do_action" function. I didn't want any of that, and made my footer.php have this instead:

<footer id="colophon" role="contentinfo">
	<div class="site-info">
	</div><!-- .site-info -->
</footer><!-- #colophon -->

You could, if desired, add something else here. But this is good enough for the moment.

Now go to your site, reload the page, and see that the link to wordpress.org is gone.

Trim out excess stuff in blog & archive listings

The next thing I wanted to do was to streamline the presentation. The default was on the site front page, as well as archive pages and category/tag pages, the "river of news" display shows a full line of stuff like the posting date, the author, the categories it was posted in, and so on. I'm sure they had a good reason for this but to me that looks like extra fluff. I just wanted the post title, the extract, and the featured image.

Let's take a step back for a moment to go over which template file does what purpose.

It's possible to put something at the top of each theme template file so you know which template is used in rendering which piece of content.

For example, copy wp-content/themes/twentytwelve/content.php to wp-content/themes/twentytwelve-xyzzy/content.php - then just below the comments at the top of the file put this code:


<p>content.php</p>

Then browse the site and see which pages say "content.php".

The http://wphierarchy.com/ site has a very good map to follow which will somewhat work for all themes.

But, wait, content.php isn't shown on wphierarchy.com. What gives? In single.php and some other template files is this:

<?php get_template_part( 'content', get_post_format() ); ?>

The codex page for get_template_part says it's a way of using an additional template. Wordpress's theme structure leads to a lot of repeated code, and this is a way of reducing the repetition. It says to load content.php or else content-format.php depending on the post format.

Where single.php is on the map shown on wphierarchy.com, it then calls content.php. If you look at archive.php, index.php, and some other files, you'll find a similar use of get_template_part.

Studying content.php we'll see that it's used both for displaying excerpt's, and for displaying the full content. For example:

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
</h1>
<?php endif; // is_single() ?>

The is_single function detects whether this is the only post on the page, or whether there will be lots of posts on the page (like an archive page). If the latter it makes the header a link to the post's page, while if it's the former there's no link.

I did several changes in this file. One key was this:

<?php if ( is_search() || !is_single() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

In other words, if this is part of search results or otherwise not a single-post-on-page scenario, it only shows "the_excerpt" and nothing else. But if it is a single post (is_single) then show "the_content" as well as the "links". Then further down the footer is only shown if is_single is true.

This immediately trims out all the fluff I mentioned earlier.

Conclusion

This will give you enough rope with which to hang yourself, or to make your site look as you want.

The twentytwelve theme is a pretty good starting point within certain limits. It has a single sidebar on the right, and focuses a blog (river of news) style of presenting the content. You can change a lot of this around by copying and modifying the template files.

The same pattern holds true for the other themes - make a child theme - then copy and modify the template files. These other themes have different strategies for theme innards, and in some cases those different strategies make it harder to figure out how to modify the theme. What I liked about the twentytwelve theme is it's fairly close to the documentation on the Codex, and that map on wphierarchy.com

I said earlier I'd chosen to use the Nirvana theme. It offers additional features that are useful:

  • Its dashboard lets you configure fonts and colors to your hearts content w/o modifying any code
  • It supports any font from Google fonts, simply by typing in the font name

The customizations in the Nirvana dashboard don't let you do EVERYTHING, but they cover a pretty good chunk of things. It's still useful to set up a child theme, then install modified template files for the things you really want to change.

Good luck, and let me know what you think.

«««««« Does buying eBooks mean we must sell our soul to Big Brother? Drupal & Blogger user tries Wordpress after years of sneering, and likes it »»»»»»