Step-By-Step: Turning A Design Responsive in WordPress, Part 5

Phew, can you believe how far we’ve come? Cross your fingers for the finale, we only have four mockups left to code: blog single, extras, about and contact. Let’s see if we can make it in one post!

Other Posts In This Series

Blog Single

Last week we coded the blogroll page, and the blog single page is almost exactly the same thing – with the addition of some meta, comments and sharing. So go ahead and copy/paste the HTML from the archives.php to single.php, and add in the additional pieces:

<?php get_header(); ?>
	<div class="container">
		<section id="heading">
			<h1>The Blog</h1>
		<article id="blog">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<h2><?php the_title();?></h2>
					<p class="meta">Posted on <?php the_time('F d, Y');?> in <?php the_tags('', ', ');?></p>
					<?php the_content(); ?>
						<div class="author">
							<?php echo get_avatar( get_the_author_email(), '75' ); ?>
							<h3>About the author</h3>
							<p><?php the_author_meta('description'); ?></p>
						<a href="" class="twitter-share-button" data-count="vertical" data-via="amberweinberg">Tweet</a><script type="text/javascript" src="//"></script>
						<div id="fb-root"></div>
						<script>(function(d, s, id) {
						  var js, fjs = d.getElementsByTagName(s)[0];
						  if (d.getElementById(id)) {return;}
						  js = d.createElement(s); = id;
						  js.src = "//";
						  fjs.parentNode.insertBefore(js, fjs);
						}(document, 'script', 'facebook-jssdk'));</script>
						<div class="fb-like" data-href="<?php the_permalink();?>" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false"></div>
			<?php endwhile; wp_reset_query(); ?>
			<?php comments_template(); ?>
		<?php get_sidebar(); ?>
<?php get_footer(); ?>

Again, we just have some basic CSS. The meta is a basic paragraph element given a display block, so we can add padding without the math.

#blog p.meta { background: rgba(165,205,205,.5); border: 1px solid rgba(89,153,151,.5); display: block; font-size: .9375; font-weight: bold; margin-bottom: 20px; padding: 3px 1%; }

The bottom meta is surrounded with a section tag so we can float the author box and sharing options together. This section requires a bit more math, but nothing we haven’t done before.

#blog section section { float: left; width: 100%; }
#blog section section > * { float: left; margin-right: 1%; }
#blog section .author { padding: 1.8121911%; width: 78.167116%; }
#blog section .author img { float: left; margin-right: 10px; }
#blog section .author p { line-height: 1.2em; padding: 0; }
#blog section .author a { color: #222; }
#blog section .author a:hover { color: #68a1a0; }
#blog section > iframe, #blog section .fb-like { margin-top: 20px; }

The comments section is pretty easy. Thanks to the HTML5 Boilerplate, the structure is already there, especially for reply comments. Just some more simple styling:

#blog #comments { background: url('images/divider.png') no-repeat center bottom; clear: both; margin: 0; padding: 0 0 10px; text-transform: uppercase; }
.commentlist { margin: 0; padding: 0; }
.commentlist li { list-style: none; }
.comment-body { border-top: 1px solid #f3d2c4; float: left; margin-top: 15px; padding-top: 15px; position: relative; width: 100%; }
.commentlist > li:nth-of-type(1) > .comment-body { border: none; }
.comment-body .avatar { margin: 0 15px 0 0; width: auto; }
.comment-body .comment-author { font-size: .8125em; font-weight: bold; padding-bottom: 10px; text-transform: uppercase; }
.comment-body .fn { font-style: normal; padding-right: 2px; }
.comment-meta { font-size: .8125em; right: 0; position: absolute; text-transform: uppercase; top: 0; }
.comment-reply-link { color: #222; margin-top: 10px; padding: 2px 15px; }
#respond { clear: both; width: 100%; }
#respond h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; padding: 12px 0; text-transform: uppercase; }
#respond input[type=submit] { font-size: 1em; font-weight: bold; margin-bottom: 10px; }

Checking it in devices shows the author and comments area getting a bit squished, so let’s fix that.

@media only screen and (max-width: 960px) {
	#blog section .author { width: 98.1878089%; }
@media only screen and (max-width: 480px) {
	.comment-meta { display: none; }

Then don’t forget the regular RGBa fallbacks for IE!

Contact Page

A super simple layout with just a large image, some info and a form. This page is all done using the WYSIWYG and a contact plugin and a bit of CSS.

The only edits we need to make for mobile devices is to remove the map from the iPhone and stretch the form 100%.

@media only screen and (max-width: 480px) {
.page-id-1066 #page .alignleft { display: none; }
.page-id-1066 #page .content { width: 100%; }

The About Page

Another super simple page and very similar to the contact page. I’ll go ahead and skip this one…I think you can handle it on your own 😉

Extras Page

My Extras page is a bit more complicated than the others, and is close to the portfolio main page. We’re going to list all of the apps at the top of the page, then a small list of links to the little extras I make at the bottom. The PHP just requires two loops and very simple markup:

<?php get_header(); ?>
	<div class="container">
		<section id="heading">
			<h1>Extra Dev</h1>
			<p>A place for all the extra goodies I make.</p>
		<p>Please excuse the mess! I'm swapping over the design, and won't be ready until the end of this week!</p>
		<?php query_posts('post_type=apps&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><?php the_post_thumbnail('apps');?></a>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><img src="<?php echo get_post_meta($post->ID, 'Logo', true);?>" alt="<?php the_title();?>"/></a>
				<?php the_content();?>
				<a class="btn" href="<?php echo get_post_meta($post->ID, 'Link', true);?>">Visit Website</a>
		<?php endwhile; wp_reset_query(); ?>
		<div class="heading">
			<h2>Templates, Plugins and More</h2>
			<p>Stuff for you to download</p>
		<?php query_posts('category_name=extras&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a>
		<?php endwhile; wp_reset_query(); ?>
<?php get_footer(); ?>

Each app has it’s own screenshot, a logo, a description and a button. Let’s first give it some standard styles and IE fallbacks

.tax-ex .wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-ex .wp-post-image:hover { opacity: .5; }
.no-rgba .tax-ex .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }

And force WordPress to make our featured image resizable based on browser. Remember, we come at these numbers by dividing the number of the item (the image) by the container (which is 960px)

.tax-ex .wp-post-image { height: auto !important; margin-right: 1.5625%; width: 35.416667% !important; }

We’ll also need to make sure the image looks nice in the iPhone, so we’ll make it extend the whole width:

.tax-ex .wp-post-image { margin: 0 0 10px; width: 97% !important; }

The bottom extras are is easy, we’re just doing some simple math and styles

.extras { color: #222; float: left; font-size: .775em; margin: 0 1% 1% 0; padding: 1.2%; width: 30%; }
.extras:nth-of-type(3n+3) { margin-right: 0; }
.extras:hover { color: #222; }

For devices under 600px though, we’ll need to clear the extras and make them extend 100%.

@media only screen and (max-width: 600px) {
	.extras { clear: both; margin: 0 0 10px 0; width: 97.6% }

Oh Boy!

Fantastic work we’ve done, eh? Feel free to ask questions about ANYTHING you don’t understand and I’ll do my best to help.

Look for the eBook version next week, and happy coding!