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

Last week we started work on my new design and finished up the header. This week we’ll focus on the homepage.

Other Posts In This Series

The Crazy Slider Background

While I originally thought about coding this completely in CSS3 so it can resize with our browser, I realized that it would require too many ugly spans and non-semantic elements, so instead I’ll be using it as a PNG and using CSS3’s background resize to get it to “go with the flow”.

Let’s create a div and place it at the top of index.php, since it only needs to show on the homepage. Your index.php should look like:

<?php get_header(); ?>
 
	<?php query_posts('pagename=home'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
		<div id="sliderBkg"></div>
	<?php endwhile; ?>
 
<?php get_footer(); ?>

Now for the fun part, the CSS! Let’s give sliderBkg our standard background element. Here’s the tricky part. We want this background to resize when we resize the browser below the standard 960px width. So, we’ll give it max & min width and height to the full size of the background image, and set the standard height and width to 100%. We’ll also need to tell it to resize with background-size and center the whole div.

#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%;  clear: both; height: 100%; margin: 100px auto 0; max-height: 328px; max-width: 1096px; width: 100%; }

As you can see…it works!

For IE, we’ll need to give it a set height and width to make the slider show up at all.

.no-backgroundsize #sliderBkg { height: 328px; width: 1096px; }

I want this section to be an actual slider showing the newest five portfolio items. I’m simply using custom post types and post thumbnails here.

<div id="sliderBkg">
		<div id="slider">
			<?php query_posts('post_type=portfolio&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a>
			<?php endwhile; wp_reset_query(); ?>
		</div>
	</div>
	</div>

My jQuery plugin of choice is the simple jQuery cycle plugin, I don’t use an actual WordPress plugin for this. I hide the overflow with simple CSS, and position it within our nice background. Make sure you DON’T specify a set height and width…use percentages so it will scale down, and max width/heights so it won’t overscale up!

One issue I’ve come across this point is the issue of scaling heights. So far I haven’t found a way to scale the height correctly when using percentages…for example, if you scale down the new design, the background of the slider doesn’t match up with the images in the slider at all points. The only thing I’ve been able to do is to try to catch it at correct points with media queries and manually resize it at important size points, like for the iPhone and iPad. If anyone knows a fix for this, I’d be happy to hear.

@media only screen and (max-width: 1024px) {
		#slider { height: 26.999999%; }
}
 
@media only screen and (max-width: 960px) {
	header .container > a { display: block; float: none; text-align: center; }
	header ul { clear: both; float: left; text-align: center; width: 100%; }
	header ul li { display: inline-block; float: none; }
 
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
 
	#slider { height: 14.70732%; }
}
 
@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
}
 
@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}

These specifically target the iPhone and iPad in both landscape and portrait modes. I also made some adjustments to the menu in iPhone portrait mode, removing the social media icons, as I felt they got in the way of the main target. I swear, this is the longest I have EVER spent on coding such a simple header and slider!

Looking at the slider in iPhone portrait mode, it’s obvious it’s not working at that size…all that work for nothing! I decided to remove the lovely circle background, and instead at the border that will be around the images in the sub pages, as well as increasing the height, so you can see a little more.

@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}

Homepage Content

We now have our homepage tagline area, which I’ll use for the homepage’s h1, since it’s full of keywords and nice and descriptive.

<div class="container">
			<h1><?php echo get_post_meta(4748, 'Tagline', true);?></h1>
	</div>

We’ll simply use multiple backgrounds for the lines, and set them to center, so they can easily expand and contract.

.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }

Checking it in Internet Explorer 9 looks great, but anything below doesn’t support multiple backgrounds, so we’ll need a fallback. I’ll just use the divider on the bottom to separate it from the text blurbs beneath.

.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; }

Underneath our tagline, we’ve got three pieces of content that we’ll be pulling from our Home page inside of WordPress, plus a blog roll of our newest posts:

<section>
			<div class="callout"><?php echo get_post_meta(4748, 'Callout 1', true);?></div>
			<div class="callout"><?php echo get_post_meta(4748, 'Callout 2', true);?></div>
 
			<div class="callout end">
				<h2>From The Blog</h2>
				<ul>
					<?php query_posts('category_name=blog&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<li><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a></li>
					<?php endwhile; wp_reset_query(); ?>
				</ul>
			</div>
		</section>

Each callout is a bit smaller than a third of the container, allowing for some padding. We’re finally getting into more of the math part of responsive design, and Lord knows I hate math! Basically, to get our percentage rates, we divide the size of our element by it’s container. Each callout is 275px and the container is 980px. So you’d get:

275 / 980 = 0.28061224

Move that over two points and you have 28.061224% and yes – it’s advisable to keep the entire string of numbers for the most accurate size. Multipled by three columns, that gives us 84.183672%, which means we have 15.816328% left for padding (yes this really does suck). Divided by two, we can give the first two callouts a right padding of 7.908164%. Here it is all together:

.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }

Surprised the math was correct the first time? Yea me too. Now it’s time for some styling on those columns.

The three columns look great until you get down to the iPhone in landscape mode and below, so we’ll need to fix that.

@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column { padding: 0 0 15px; width: 100%; }
}

The columns work great every where else, including Internet Explorer!

Where We’re At

We’ve covered a lot of ground already. In case you’re lost, here’s my CSS so far:

/*
Theme Name: Amber Circles
Description: This theme is a combination of Hijinks (www.amberweinberg.com) and HTML5 Boilerplate (http://html5boilerplate.com/)
Author: Amber Weinberg
Author URI: http://www.www.amberweinberg.com.com/
 
*/
 
/*****HTML5 BOILERPLATE MINIFIED*******/
 
article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;font-family:sans-serif;color:#222;margin:0}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;cursor:pointer;-webkit-appearance:button;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}::-moz-selection{background:#f8e8c0;color:#222;text-shadow:none}::selection{background:#f8e8c0;color:#222;text-shadow:none}a:focus{outline:thin dotted}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}table button{overflow:auto}table input{overflow:auto}input[type="button"]{cursor:pointer;-webkit-appearance:button}input[type="reset"]{cursor:pointer;-webkit-appearance:button}input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"]{box-sizing:border-box}input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}
 
/****BODY STYLES********/
 
body { background: url('images/bkg.jpg') #FFF; color: #222; font: 100% Droid Sans, Arial, sans-serif; }
 
p { font-size: .8125em; line-height: 1.55em; margin: 0; padding-bottom: 15px; }
 
h1, h2 { font-size: 1.125em; text-transform: uppercase; }
h3 {}
 
a { color: #e5763d; font-weight: 700; text-decoration: none; }
a:hover { color: #68a1a0; }
 
.container { margin: 0 auto; max-width: 960px; padding: 0 3%; }
 
/****HEADER STYLES*******/
 
header { border-top: 5px solid #222; float: left; margin-bottom: 15px; padding-top: 15px; width: 100%; }
header .container > a, header li { float: left; }
header .container > a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul { float: right; padding: 5px 0 0; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; }
header li.current-menu-item a { font-weight: 700; text-decoration: line-through; }
 
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }
 
header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; font-weight: 700; opacity: 1; }
 
.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; font-weight: 700; }
 
/*****NAV STYLES*******/
 
 
/*****FOOTER STYLES*******/
 
 
/*****HOME CONTENT STYLES*******/
 
#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto 0; max-height: 328px; max-width: 1096px; width: 100%; }
#slider { float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; overflow: hidden; width: 87.591241%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
 
.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; text-transform: none; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }
.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; }
 
.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }
.column ul { color: #a5cecd; font-size: .8125em; line-height: 1.7em; list-style: none; margin: 0; padding: 0; }
.column p { padding: 0; }
.column p + a { clear: both; float: left; font-size: .8125em; padding-right: 20px; }
.column p + a span { background: url('images/arrowLink.png') no-repeat right; float: right; height: 15px; padding-right: 25px;  }
 
/*****SUB CONTENT STYLES*******/
 
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
 
/*Blog*/
 
.single #comments { float: left; margin-top: 30px; width: 100%; }
.single .commentlist { float: left; position: relative; width: 100%; }
.single .commentlist > li { padding: 10px; }
.single .comment-author img { float: left; margin-right: 5px; }
.single .commentmetadata { position: absolute; right: 10px; top: 10px; }
 
#respond { float: left; margin-top: 30px; }
 
/*****MEDIA QUERIES FOR MOBILE STYLES *******/
 
@media only screen and (max-width: 1024px) {
		#slider { height: 26.999999%; }
}
 
@media only screen and (max-width: 960px) {
	header .container > a { display: block; float: none; text-align: center; }
	header ul { clear: both; float: left; text-align: center; width: 100%; }
	header ul li { display: inline-block; float: none; }
 
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
 
	#slider { height: 14.70732%; }
}
 
@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column { padding: 0 0 15px; width: 100%; }
}
 
@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}
 
/******PRINT STYLES*********/
 
@media print{
	*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after{content:""}a[href^="javascript:"]:after{content:""}a[href^="#"]:after{content:""}pre{border:1px solid #999;page-break-inside:avoid}blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr{page-break-inside:avoid}img{page-break-inside:avoid;max-width:100%!important}@page{margin:.5cm}p{orphans:3;widows:3}h2{orphans:3;widows:3;page-break-after:avoid}h3{orphans:3;widows:3;page-break-after:avoid}
}

Here’s my header.php file:

 
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]-->
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]-->
	<head>
		<meta charset="UTF-8"/>
 
		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
 
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
 
		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
		<?php wp_head(); ?>
 
		 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 
  		<script src="<?php bloginfo('template_url');?>/js/libs/modernizr-2.0.6.min.js"></script>
	</head>
 
	<body <?php body_class(); ?>>
 
		<header>
			<div class="container">
				<a title="Amber Weinberg: Freelance Web Developer specializing in WordPress, Mobile, CSS and HTML5 Development" href="<?php bloginfo('siteurl');?>"><img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development"/></a>
				<?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?>
			</div>
		</header>

And my index.php file:

<?php get_header(); ?>
 
	<div id="sliderBkg">
		<div id="slider">
			<?php query_posts('post_type=portfolio&posts_per_page=1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<?php
					$image_id = get_post_thumbnail_id();
					$image_url = wp_get_attachment_image_src($image_id,'full');
					$image_url = $image_url[0];
				?>
				<a title="<?php the_title();?>" href="<?php the_permalink();?>"><img src="<?php echo $image_url;?>" alt="View <?php the_title();?>" width="100%"></a>
			<?php endwhile; wp_reset_query(); ?>
		</div>
	</div>
 
	<div class="container">
		<h1><?php echo get_post_meta(4748, 'Tagline', true);?></h1>
 
		<section>
			<div class="column"><?php echo get_post_meta(4748, 'Callout 1', true);?></div>
			<div class="column"><?php echo get_post_meta(4748, 'Callout 2', true);?></div>
 
			<div class="column end">
				<h2>From The Blog</h2>
				<ul>
					<?php query_posts('category_name=blog&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<li><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php $title = the_title('','',FALSE); echo substr($title, 0, 28);?>…</a> <?php the_time('m/d/y');?></li>
					<?php endwhile; wp_reset_query(); ?>
				</ul>
			</div>
		</section>
	</div>
 
<?php get_footer(); ?>

I decided to remove the jQuery slider, as the animation was distracting and had issues resizing with the browser. Still with me so far?

What’s Next

We’ll next venture on to the footer and the sub pages, stay tuned!