AmberWeinberg.com » php http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Fri, 03 Feb 2012 15:14:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Step-By-Step: Turning A Design Responsive in WordPress, Part 3http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/#comments Wed, 12 Oct 2011 16:37:12 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4844 Back for another week? In the first week, we got our design ready and coded the header. Last week, we coded the homepage content. This week we’ll be finishing up the homepage and the footer, and doing some testing. Maybe we’ll even get into one of the sub page designs, maybe not.

Other Posts In This Series

The Footer

The footer is probably the easiest part of the whole design. We simply need to float the footer 100% and add the background and the centering container.

	<footer>
			<div class="container"></div>
		</footer>
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }

I went ahead and added a widget bar to the footer, so I wouldn’t need to go into the code to update the content.

<footer>
			<ul class="container">
				<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>
				<?php endif; ?>
			</ul>
		</footer>

This time, while we have four different columns, they’re all different widths and style, so it’s time to break out the maths again. The first widget’s target width is 255px, and with the parent being, of course, 960px that makes it 26.5625% wide. The second column is 192px so 20% width, third column is 212px, 22.083333%, and the fourth is 130px, 13.541667%. This leaves us with 5.9375% of right margins for the first three columns. Broken down, the equation comes to:

26.5625 + 20 + 22.083333 + 13.541667 (the width of the columns) = 82.1875 (total width of columns) – 100 (percent) = 17.8125 (space left over before we hit 100%) / 3 (number of columns needing margins) = 5.9375 (amount each column can have as a margin).

It seems more complicated than it is, I promise.

footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%;  }
footer #text-14 { width: 26.5625%; }
footer #text-15 { width: 20%; }
footer .widget_twitter_vjck { width: 22.083333%; }
footer #text-17 { margin-right: 0; width: 13.541667%; }

Let’s check it in IE7-9 now. A few styling bugs in IE7, but nothing that wasn’t easily fixed. Now for the devices. iPad landscape and portrait look great. Not so much with the iPhone in both portrait and landscape. We’ll need to make the columns on their own line, like we did with the content above.

@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
}

I wasn’t happy with the way the hero area was displaying across resolutions. The circle background and border just wouldn’t match up correctly. Finally realized that by removing the border from the background and making it an actual border, I could make it match in sizes. For IE, I just specified it’s old image with the PNG border, because I didn’t want to compromise on the style. The new slider area now looks like:

#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto 0; max-height: 328px; max-width: 1099px; width: 100%; }
#slider { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; padding: 1%; width: 87.591241%; }
#slider a { float: left; height: 100%; max-height: 199px; overflow: hidden; width: 100%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
.no-backgroundsize #sliderBkg { background: url('images/sliderBkgIE.png') no-repeat; }
.no-backgroundsize #slider { padding: 0; }

Now that we’ve finished the homepage, it’s time to do some extra testing. First, we need to validate the doc. It may not seem important anymore, but I believe that it’s essential to help find bugs and issues, as well as promoting standards.

And ouch..there’s a lot…31 errors which is more errors than I’ve ever had in my entire life…on closer inspection it looks like they’re mostly due to the HTML5 boilerplate being implemented correctly. Simply by moving the IE if statements below the doctype (I coulda sworn that’s how they where in the example!), our errors get cut down to 8. These were easily fixed, except for one created by a plugin and a standard WP validation error (hoping they fix that soon!).

What about Android? It’s time we fired up the simulator for that as well.

And woot! Perfect as well. Let’s move on.

The Portfolio Landing Page

The portfolio landing page displays all of the portfolio pieces, separated by category. I’m also going to include some neat rollover effects here.

This section is pretty basic. We’ll be looping through each category, and displaying the thumbnails to the right, with the title to the left:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Client Portfolio</h1>
			<p><?php category_description();?></p>
		</section>
 
		<section>
			<h2>WordPress</h2>
 
			<div class="items">
				<?php query_posts('work=wordpress-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>Mobile</h2>
 
			<div class="items">
				<?php query_posts('work=mobile-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>CoreCommerce</h2>
 
			<div class="items">
				<?php query_posts('work=corecommerce&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>Static</h2>
 
			<div class="items">
				<?php query_posts('work=static-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
	</div>
 
<?php get_footer(); ?>

We’ll need to start out styling the heading section first. This is simple to get working responsively, by just giving it 100% width and allowing the browser to resize at will.

The circle headings and thumbnails will remain a fixed size however, to preserve the integrity of the layout.

#heading { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; margin-bottom: 20px; padding: 22px 0 10px; width: 100%; }
#heading h1 { margin: 0 0 15px; }
 
.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .items { float: right; width: 80%; }
.tax-work .items img.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-work .items a:nth-of-type(3n+3) { margin-right: 0; }

When the window is reduced, the thumbnails fall below the circle nicely, but the circle itself is left in the top left corner, so we’ll add a rule to a media query to position in the middle and give it a bit of space at the bottom.

.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
.tax-work .portfolio .items { width: 100%; }
.tax-work .portfolio .items img { display: block; float: none; margin: 0 auto 10px; }

Now for the hovers. I wanted the the titles in the circle to disappear and a short description to appear when the user hovered over any item in that section. I also wanted to do this in CSS only. Here’s my solution:

<h2><span class="title">Mobile</span><span class="desc">mobile web sites built in CSS3, HTML &amp; JS</span></h2>

I put the description and title into seperate spans in HTML, which I hide with display none in CSS. Then when the user hovered over the items div, it would display the span.desc and hide the span.title

.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .portfolio:nth-of-type(3) h2 { background: rgba(229,118,61,.6); }
.tax-work .portfolio:nth-of-type(4) h2 { background: rgba(238,142,104,.6); }
.tax-work .portfolio h2 span.desc { color: #222; font-size: .7125em; font-weight: normal; line-height: 1.55em; position: relative; top: -10px; text-transform: none; }
.tax-work .portfolio h2 span.desc, .tax-work .portfolio:hover h2 span.title { display: none; }
.tax-work .portfolio:hover h2 span.desc { display: block; }
 
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items img:hover { opacity: .5; }

Nothing to it! Doing a quick check in the iPhone and iPad, the iPhone looks great but we have a few issues on the iPad. We basically just need to move our statements around.

@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%; }
	.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
	.tax-work .portfolio .items { text-align: center; width: 100%; }
	.tax-work .portfolio .items img { float: none; }
}

This results in the circle on top and rows of two thumbnails on portrait mode of the iPad, full regular display on landscape mode of the iPad, and then the circles on top and rows of one thumbnail on both views of the iPod (and Android of course!).

Now it’s time to take a quick peek at IE…which needs fall backs for the circles and the borders since IE8 and below doesn’t support RGBA.

.no-rgba .portfolio h2 { background: rgb(165,206,205); }
.no-rgba .items img { background: rgb(229,118,61); border: 1px solid rgb(183,91,43);

While not the prettiest, having rounded corners and opacity just isn’t a big enough issue for me to make image fallbacks…plus the amount of IE8 and below users I have is less than 2% of my total traffic.

Another End!

We’ll be back next time for some more responsive goodness!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/feed/ 2 Hijinks: A Developer’s Blank WordPress Themehttp://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/ http://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/#comments Tue, 13 Sep 2011 14:30:57 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3415 A lot of people have been asking if I use a framework for WordPress. I use my own custom blankish framework that allows me to quickly get started on projects.

I’ve recently cleaned it up with the launch of WordPress 3.0 and thought I’d give it to you guys for free. It’s basically the core files, cleaned up, with all the nonsense divs removed, a basic structure and some basic CSS.

Have fun!

You can now Download Hijinks Version 2.6 from Github

Any requests or bugs? Let me know and I’ll get on it :)

Old Changelog

Features in V 2.6

  • Cleaned up CSS
  • Removed extra HTML
  • Indented head elements for easier reading
  • Added sample custom post types w/ sample custom taxonomies applied

Features in V 2.5

  • Removed Timthumb
  • Added Post Thumbnails
  • Cleaned up CSS

Features in V 2.4

  • Fixed error in search.php template
  • Cleaned up comments.php code

Features in V 2.3

  • Added comments template into single.php
  • Cleaned up/shortened CSS reset

Features in V 2.2

  • Basic Comments Styling (Avoids the ugly stock styling)
  • Alphabetical ordering of declarations in CSS

Features in V 2.1

  • Removal of container div – now harnessing HTML/Body tags as container & cleaner code!
  • Shortening of  CSS Reset
  • Added more elements to CSS

Features in V 2.0

  • HTML5 compliant!
  • HTML5 header components
  • Cleaned up code
  • Removal of some branded areas
  • Timthumb support
  • WordPress 3 menu support (functions file)

Features in V 1.1

  • Bug Fix – PHP errors in Search template

Features in V 1.0

  • XHTML 1.0 compliant
  • CSS Reset
  • Stripped Loops, Divs
  • Custom search form w/ javascript text remove on click
  • Built-in functions: Multiple excerpt lengths, except removed [...],  sidebar
]]> http://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/feed/ 66 Think Vitamin Membership Review–Great Way to Expand Your Web Knowledgehttp://www.amberweinberg.com/think-vitamin-membership-review%e2%80%93great-way-to-expand-your-web-knowledge/ http://www.amberweinberg.com/think-vitamin-membership-review%e2%80%93great-way-to-expand-your-web-knowledge/#comments Tue, 26 Jul 2011 13:30:33 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4564 I’ve been investing a lot of my time lately on learning new things. I prefer to stay a front-end developer, but I’ve always wanted to play in different languages and keep up to date with design trends. Following long how-to books really isn’t my thing, as I usually end up falling asleep before the first chapter ends.

I’ve never been a big fan of video on the web either, since I’m never at my computer unless I’m working so I never have time to watch. However, upon learning that Think Vitamin created a new membership service, called Think Vitamin Membership, I was immediately interested.

Read the rest of my post on FreelanceFolder

]]> http://www.amberweinberg.com/think-vitamin-membership-review%e2%80%93great-way-to-expand-your-web-knowledge/feed/ 0 CoreCommerce Token Guide eBookhttp://www.amberweinberg.com/corecommerce-token-guide-ebook/ http://www.amberweinberg.com/corecommerce-token-guide-ebook/#comments Thu, 21 Jul 2011 15:52:27 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4549 Just finished writing a new guide for CoreCommerce‘s new php-less token system. Enjoy!

View & Download the eBook

]]> http://www.amberweinberg.com/corecommerce-token-guide-ebook/feed/ 11 How To Build A WordPress CMS Theme – Part 7: Subpages, Finale and an eBook!http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-7-subpages-finale-and-an-ebook/ http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-7-subpages-finale-and-an-ebook/#comments Fri, 24 Jun 2011 15:19:12 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4437 We’ve come a long way through the series, and sadly, it’s time to finish up! All we’ve got left is a couple of subpages, so let’s go!

Remember you can see the demo of the WordPress version here, and see the regular HTML/CSS site here. You can also download everything in Part 4 . Let’s get it started!

Chapter 18: The About Page

Here’s the regular HTML content for the about page:

<div id="main">
		<div id="title">
			<h2>About</h2>
		</div>
 
		<div class="about">
			<div class="aboutHeader">
				<h3>Discovery</h3>
			</div>
			<div class="aboutText">
				<p>Sophie discovered the sweet art of cake design when the search for her own	wedding cake ended in disappointment. Sophie believes that a cake should not only taste great, but should be a spectacular centerpiece that captures both the style and mood of an event.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader">
				<h3>So the story goes</h3>
			</div>
 
			<div class="aboutText">
			<p>Trained by some of the most prestigious cake designers in the country, Sophie brings a combination of education, natural artistic talents, a meticulous eye for detail and an eye for colour to every custom cake she creates.</p>
 
			<p>Inspired by the endless possibilities of the edible arts, Sophie works with her clients imaginations to bring their vision to cake.</p>
			</div>
		</div>		
		<div class="about">
			<div class="aboutHeader borderBottom fixed">
				<h3>Contact</h3>
			</div>
			<div class="aboutText borderBottom">
				<p>For more information, contact us via email at <a href="mailto:info@sophiebifieldcakecompany.com">info@sophiebifieldcakecompany.com</a> or by telephone at (613) 869-7674.</p>
			</div>
		</div>		
	</div>

The about page is easy and mostly just a content dump. Open up that page inside of the WordPress admin and dump the following content in

<div class="about">
			<div class="aboutHeader">
				<h3>Discovery</h3>
			</div>
			<div class="aboutText">
				<p>Sophie discovered the sweet art of cake design when the search for her own	wedding cake ended in disappointment. Sophie believes that a cake should not only taste great, but should be a spectacular centerpiece that captures both the style and mood of an event.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader">
				<h3>So the story goes</h3>
			</div>
 
			<div class="aboutText">
			<p>Trained by some of the most prestigious cake designers in the country, Sophie brings a combination of education, natural artistic talents, a meticulous eye for detail and an eye for colour to every custom cake she creates.</p>
 
			<p>Inspired by the endless possibilities of the edible arts, Sophie works with her clients imaginations to bring their vision to cake.</p>
			</div>
		</div>		
		<div class="about">
			<div class="aboutHeader borderBottom fixed">
				<h3>Contact</h3>
			</div>
			<div class="aboutText borderBottom">
				<p>For more information, contact us via email at <a href="mailto:info@sophiebifieldcakecompany.com">info@sophiebifieldcakecompany.com</a> or by telephone at (613) 869-7674.</p>
			</div>
		</div>

Now, depending on how savvy your client is, you may want to break this done into custom fields, since it includes a lot of divs. I don’t think it’s too necessary here, because when the client views the regular WYSIWYG, they’ll be able to edit the content without messing with the layout too much.

Check out the about page right now, and you’ll see it’s a mess of ugliness. We need to add the #main container and the #title div to our page template – page.php:

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
		<?php endwhile; ?>
	</div>
 
<?php get_footer(); ?>

Refresh and ta da!

Chapter 19: The Menu Page

Here’s another easy page to that’s mostly a content dump. For the sake of the tutorial, I’m going to pretend that the client doesn’t want to do any layout in the WYSIWYG on this page, besides normal styling tags, so we’ll need to create two custom fields, one for the left column and another for the right. Here’s the original HTML:

<div id="column1">
			<h3>Sussex (Chocolate Buttercream)</h3>
				<p>Our signature flavour - a combination of chocolate cake and buttermilk that be a hit at your next event. Available with chocolate and vanilla buttercream. </p>
 
			<h3>The Byward (Chocolate Fudge)</h3>
				<p>If chocolate cake wasn’t enough, we just added a chocolate fudge into the mix. Available with chocolate buttercream, vanilla buttercream, chocolate or vanilla ganache. </p>
 
			<h3>The Village (Vanilla Bean)</h3>
				<p>Maybe your not such a chocolate person. Why not give our vanilla bean a go. Made with Madagascar Vanilla and moist to the last drop.</p>
 
			<h3>Available Buttercream Flavours</h3>
				<p>Vanilla<br />
				Chocolate<br />
				Chocolate chip<br />
				Strawberry</p>
		</div>
 
		<div id="column2">
			<h3>Banana Boat (Banana Yogurt)</h3>
				<P>A take on traditional banana bread - this is a great option for the health conscious. Available with chocolate, vanilla or chocolate chip buttercream.</p>
 
			<h3>Over the Rainbow (Rainbow Carrot)</h3>
				<p>Available seasonally this carrot cake uses the freshest of ingredients from local farms in Ottawa. Available with vanilla buttercream or cream cheese frosting for a more traditional approach.</p>
 
			<h3>Lemon Meringue</h3>
				<p>Sweet with just a touch of tart, our lemon cake uses an italian buttercream to offer a refreshing flavour that would make any mouth water.</p>
 
			<h3>Available Ganache Flavours</h3>
				<p>Milk Chocolate<br />
				Dark Chocolate<br />
				White Chocolate</p>
		</div>

First, let’s dump the content into the admin area. Open up the menu page, and scroll down to the “Custom Fields” section. Add a new custom field called “Left Column” and dump it’s content into the value field. Do the same for the right column, naming it “Right Column”.

Then open up your page.php template file. Instead of creating a whole new template page just for these two columns, we’ll make it easy on ourselves (and the client), by just adding a conditional – if the client is using these two fields, then show the correct HTML, if not, then don’t. This makes it easy to also add double columns to other pages as well.

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
 
			<?php if($myImageFileName = get_post_meta($post->ID, 'Left Column', true)){ ?><div id="column1"><?php echo get_post_meta($post->ID, 'Left Column', true);?></div><?php } ?>
			<?php if($myImageFileName = get_post_meta($post->ID, 'Right Column', true)){ ?><div id="column2"><?php echo get_post_meta($post->ID, 'Right Column', true);?></div><?php } ?>
		<?php endwhile; ?>
	</div>
 
<?php get_footer(); ?>

Chapter 20: The Challenge!

The last page I’m going to show you how to do is the gallery page. If you look on the original site, you’ll see it includes a gallery that switches between several thumbnails, and then can slide left to right to show different projects.

This is another layout that can be done in different ways, but I’m going to use a custom post type for this one. Open up your functions.php file and add the code for a custom post type:

register_post_type('gallery', array(
	'label' => __('Gallery'),
	'singular_label' => __('Gallery'),
	'public' => true,
	'show_ui' => true,
	'capability_type' => 'post',
	'hierarchical' => false,
	'rewrite' => true,
	'query_var' => false,
	'supports' => array('title', 'editor', 'author', 'custom-fields'),
));

Refresh your WordPress admin area, and you should now see a “Gallery” section in the left hand nav. Now let’s look at the HTML required for that page:

 
		<div id="slideshow">
			<div id="slideshowContainer">
				<div class="slide">
					<div class="images">
						<a name="lady1"></a><img src="images/slideshow/lady_spot_main.png" alt="lady_spot_main" width="319" height="387" />
						<a name="lady2"></a><img src="images/slideshow/lady_spot_001.png" alt="lady_spot_001" width="319" height="387" />
						<a name="lady3"></a><img src="images/slideshow/lady_spot_002.png" alt="lady_spot_002" width="319" height="387" />
						<a name="lady4"></a><img src="images/slideshow/lady_spot_003.png" alt="lady_spot_003" width="319" height="387" />
					</div>
 
					<div class="slideText">
						<h3>Lady Lace</h3>
						<p>With a hint of elegance and a touch of romanticism this golden lady cake has it all. A startling centerpiece at any event, this lady of lace will truly be the belle of the ball! Featuring a golden bust with sugar flowers, rice paper fans and a stunning silver brooch, this cake is almost too good to eat. Speaking of eating, our golden lady would be delicious in our trademark Sussex (chocolate butter cream) flavor.</p>
 
						<ul class="thumbnail">
							<li><a href="#lady1"><img src="images/slideshow/lady_thumb_main.png" alt="lady_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#lady2"><img src="images/slideshow/lady_thumb_001.png" alt="lady_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#lady3"><img src="images/slideshow/lady_thumb_002.png" alt="lady_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#lady4"><img src="images/slideshow/lady_thumb_003.png" alt="lady_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Lady Lace - Slide 1 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="mask1"></a><img src="images/slideshow/mask_spot_main.png" alt="mask_spot_main" width="319" height="387" />
						<a name="mask2"></a><img src="images/slideshow/mask_spot_001.png" alt="mask_spot_001" width="319" height="387" />
						<a name="mask3"></a><img src="images/slideshow/mask_spot_002.png" alt="mask_spot_002" width="319" height="387" />
						<a name="mask4"></a><img src="images/slideshow/mask_spot_003.png" alt="mask_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Mysterious Masquerade</h3>
						<p>Everyone needs a bit of mystery in their life. Our stunningly dramatic red, white, and black masquerade cake is one of our leading cake designs. The elegance of the feathers and finely detailed hand-ruffled ribbons give this cake its flair. Attention to detail is what this cake is all about with the red ruffled sugar mask, the delicately painted edges and the hand placed sugar dragees. To make the event complete, hand each guest a red mask to wear for the night!</p>
 
						<ul class="thumbnail">
							<li><a href="#mask1"><img src="images/slideshow/mask_thumb_main.png" alt="mask_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#mask2"><img src="images/slideshow/mask_thumb_001.png" alt="mask_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#mask3"><img src="images/slideshow/mask_thumb_002.png" alt="mask_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#mask4"><img src="images/slideshow/mask_thumb_003.png" alt="mask_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Maskquerade - Slide 2 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="music1"></a><img src="images/slideshow/music_spot_main.png" alt="music_spot_main" width="319" height="387" />
						<a name="music2"></a><img src="images/slideshow/music_spot_001.png" alt="music_spot_001" width="319" height="387" />
						<a name="music3"></a><img src="images/slideshow/music_spot_002.png" alt="music_spot_002" width="319" height="387" />
						<a name="music4"></a><img src="images/slideshow/music_spot_003.png" alt="music_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Music Staff</h3>
						<p>Everyone has a favorite song. Our five-tiered black and white musical cake brings the spirit and vibe of your favorite song to your party, wedding or event. Featuring detailed sheet music wraps, romantic purple butterflies and flowers, this cake will leave you and your guests singing and dancing. The perfect cake to celebrate a recent graduation, engagement or even to welcome summer! There won't be a wrong note with this stunning cake. (This design was inspired by Young Designs holiday party. <a href="http://youngjewelrydesigns.com">http://www.youngjewelrydesigns.com/)</a> </p>
 
						<ul class="thumbnail">
							<li><a href="#music1"><img src="images/slideshow/music_thumb_main.png" alt="music_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#music2"><img src="images/slideshow/music_thumb_001.png" alt="music_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#music3"><img src="images/slideshow/music_thumb_002.png" alt="music_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#music4"><img src="images/slideshow/music_thumb_003.png" alt="music_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Music - Slide 3 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="white1"></a><img src="images/slideshow/white_spot_main.png" alt="white_spot_main" width="319" height="387" />
						<a name="white2"></a><img src="images/slideshow/white_spot_001.png" alt="white_spot_001" width="319" height="387" />
						<a name="white3"></a><img src="images/slideshow/white_spot_002.png" alt="white_spot_002" width="319" height="387" />
						<a name="white4"></a><img src="images/slideshow/white_spot_003.png" alt="white_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Vintage Glam</h3>
						<p>There is nothing quite like the image of a beautiful bride in a flowing white gown on her wedding day. Inspired by a bridal gown at Luxe Bridal Boutique, our six tier white wedding cake tastes as good as it looks. The entire cake is edible from the silver bird in the golden bird cage to the flowers, lace and feathers. Mmm, perfect in our vanilla bean flavor (The Village), this cake will have your guests coming back for one more slice.</p>
 
						<ul class="thumbnail">
							<li><a href="#white1"><img src="images/slideshow/white_thumb_main.png" alt="white_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#white2"><img src="images/slideshow/white_thumb_001.png" alt="white_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#white3"><img src="images/slideshow/white_thumb_002.png" alt="white_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#white4"><img src="images/slideshow/white_thumb_003.png" alt="white_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div> <!-- END White - Slide 4 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="blue1"><img src="images/slideshow/blue-spot-main.png" alt="blue-spot-main" width="319" height="387" /></a>					
						<a name="blue2"><img src="images/slideshow/blue-spot-001.png" alt="blue-spot-001" width="319" height="387" /></a>
						<a name="blue3"><img src="images/slideshow/blue-spot-002.png" alt="blue-spot-002" width="319" height="387" /></a>
						<a name="blue4"><img src="images/slideshow/blue-spot-003.png" alt="blue-spot-003" width="319" height="387" /></a>
					</div>
 
					<div class="slideText">
						<h3>Something Blue</h3>
						<p>Make your wedding day complete with our Something Borrowed, Something Blue cake. This simple yet sophisticated cake brings with it that final touch of class that you want on your wedding day. The feather and sugar ruffles highlight the fun and laughter that is sure to be part of your big day. For a rich tasting cake, we suggest our signature chocolate fudge flavor (The Byward) with chocolate ganache.</p>
 
						<ul class="thumbnail">
							<li><a href="#blue1"><img src="images/slideshow/blue-thumb-main.png" alt="blue-thumb-main" width="85" height="98" /></a></li>
							<li><a href="#blue2"><img src="images/slideshow/blue-thumb-001.png" alt="blue-thumb-001" width="85" height="98" /></a> </li>
							<li><a href="#blue3"><img src="images/slideshow/blue-thumb-002.png" alt="blue-thumb-002" width="85" height="98" /></a></li>
							<li><a href="#blue4"><img src="images/slideshow/blue-thumb-003.png" alt="blue-thumb-003" width="85" height="98" /></a></li>
							<li></li>						
						</ul>
					</div>
				</div> <!-- END Blue - Slide 5 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="pink1"></a><img src="images/slideshow/pink_spot_main.png" alt="pink_spot_main" width="319" height="387" />
						<a name="pink2"></a><img src="images/slideshow/pink_spot_001.png" alt="pink_spot_001" width="319" height="387" />
						<a name="pink3"></a><img src="images/slideshow/pink_spot_002.png" alt="pink_spot_002" width="319" height="387" />
						<a name="pink4"></a><img src="images/slideshow/pink_spot_003.png" alt="pink_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Sugar and Swarovski Crystals</h3>
						<p>Next to diamonds, pearls and Swarovski crystals are definitely a girl's best friend. This cake is class and elegance. Decorated with sugar pearls, a flowing edible script and a sugar crown, this cake will leave your groom eating out of your hand.</p>
 
						<ul class="thumbnail">
							<li><a href="#pink1"><img src="images/slideshow/pink_thumb_main.png" alt="pink_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#pink2"><img src="images/slideshow/pink_thumb_001.png" alt="pink_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#pink3"><img src="images/slideshow/pink_thumb_002.png" alt="pink_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#pink4"><img src="images/slideshow/pink_thumb_003.png" alt="pink_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div> <!-- END Pink Cake - Slide 6 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="elephant1"></a><img src="images/slideshow/elephant_spot_main.png" alt="elephant_spot_main" width="319" height="387" />
						<a name="elephant2"></a><img src="images/slideshow/elephant_spot_001.png" alt="elephant_spot_001" width="319" height="387" />
						<a name="elephant3"></a><img src="images/slideshow/elephant_spot_002.png" alt="elephant_spot_002" width="319" height="387" />
						<a name="elephant4"></a><img src="images/slideshow/elephant_spot_003.png" alt="elephant_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Lucky Elephant</h3>
						<p>Wisdom. Good luck. Strength. Power. Bring the spirit of the lucky elephant to your big day. Featuring detailed accents in red, white and blue with a golden necklace, this lucky elephant is just the cake you've been looking for. Bringing with it a sense of confidence and fun, our edible elephant cake will bring the good luck you want to your life.</p>
 
						<ul class="thumbnail">
							<li><a href="#elephant1"><img src="images/slideshow/elephant_thumb_main.png" alt="elephant_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#elephant2"><img src="images/slideshow/elephant_thumb_001.png" alt="elephant_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#elephant3"><img src="images/slideshow/elephant_thumb_002.png" alt="elephant_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#elephant4"><img src="images/slideshow/elephant_thumb_003.png" alt="elephant_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div>
			</div><!-- END SlideshowContainer -->
		</div><!-- END Slideshow -->

WHOA quite a lot isn’t it? Let’s make this easier by breaking it down. Each “slide” container is going to be a new post inside of gallery. The h3 will be the title of the gallery post, the p tags will be content in the WYSIWYG, the large photos will be added via custom fields called “Slide”, and the thumbnails will be added the same way, although I recommend using something like TimThumb to get sizes proportional. Let’s get started!

Now, let’s get content out of the way before the structure.

Create a new post underneath the Gallery custom post type for each slide, and add the content where I stated above. (I’m gonna be lazy and only do one :P )

Now, open up your page.php file. The code is pretty complicated, so let me go ahead and show you the completed code, and I’ll explain what I did:

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
 
			<?php if($myImageFileName = get_post_meta($post->ID, 'Left Column', true)){ ?><div id="column1"><?php echo get_post_meta($post->ID, 'Left Column', true);?></div><?php } ?>
			<?php if($myImageFileName = get_post_meta($post->ID, 'Right Column', true)){ ?><div id="column2"><?php echo get_post_meta($post->ID, 'Right Column', true);?></div><?php } ?>
		<?php endwhile; wp_reset_query(); ?>
 
 
		<?php if(is_page('The Gallery')) { ?>
			<div id="slideshow">
				<div id="slideshowContainer">
					<?php query_posts('post_type=gallery&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<div class="slide">
							<div class="images">
								<?php $i=1; $lang = get_post_meta($post->ID, 'Slide', false); ?>
								<?php foreach($lang as $lang) { echo '<a name="slide'.$i.'"></a><img src="'. get_bloginfo('siteurl').'/wp-content/themes/sophie/'.$lang.'" alt=""/>'; $i++; } ?>
							</div>
 
							<div class="slideText">
								<h3><?php the_title();?></h3>
								<?php the_content(); ?>
 
								<ul class="thumbnail">
									<?php $d=1; $thumb = get_post_meta($post->ID, 'Slide', false); ?>
									<?php foreach($thumb as $thumb) { echo '<li><a href="#slide'.$d.'"><img src="'. get_bloginfo('siteurl').'/wp-content/themes/sophie/'.$thumb.'" alt=""width="85" height="98" /></a></li>'; $d++; } ?>
								</ul>
							</div>
						</div>
					<?php endwhile; wp_reset_query(); ?>
				</div>
			</div>
		<?php } ?>
	</div>
 
<?php get_footer(); ?>

First, I added the wp_reset_query since we needed to close the loop for that page, and begin one to pull the custom posts in. Then, I created a conditional to only show the slider code if we were on the gallery page.

After pasting in the bones of the HTML, I replaced the content with WordPress functions. Then, I replace the large images with a foreach loop that will grab each “Slide” custom field”. Lastly, you’ll need to include the correct JS files for the slider and slideshow to work, which you can do by viewing the source of the demo site.

Chapter 21: Conclusion

In conclusion, WordPress is actually really easy to learn versus other CMS’s. It’s fun and versatile to work in, and there’s pretty much nothing you can’t do in it. After you’ve made it through this series and you want to learn more, I suggest checking out Digging into WordPress by Chris Coyier.

Enjoy this book and want to purchase a PDF version to keep with you?

]]> http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-7-subpages-finale-and-an-ebook/feed/ 18 How To Build A WordPress CMS Theme – Part 6: The Footer!http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-6-the-footer/ http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-6-the-footer/#comments Wed, 15 Jun 2011 15:44:07 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4423 We’ve come a long way in such a short series, haven’t we? In today’s post, we’ll be finishing up the homepage by doing the footer. Normally footers are pretty easy, but we’ve got an extra large one for you today, just full of goodies waiting to be WP functionalized (ok enough with the nerdness). Anyways, if you’re just joining us, here are the previous parts to this series:

Remember you can see the demo of the WordPress version here, and see the regular HTML/CSS sitehere. You can also download everything in Part 4 . Let’s get it started!

Chapter 17: The Footer

Not much goes on in most footers, you’ve normally got some links and copyright info and that’s it. In WordPress land, the same goes, and the only real piece of required functionality is the wp_footer() function before your body tag.

However, the latest trend seems to be in having even more complicated footers. In our project site, you can see that the footer is from the featured articles & conversation sections all the way down. Let’s take a look at the plain HTML of our footer:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
			<ul>
				<li>
					<a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog1.jpg" alt="The wedding palace bridal show" width="140" height="98" />The Wedding Palace Bridal Show</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog2.jpg" alt="National Flag Day Cake" />National Flag Day Cake</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog3.jpg" alt="Winterlude Fare & Flare Cake" />Winterlude Fare & Flare Cake</a>
				</li>
			</ul>
		</div>
 
		<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Blog</a></li>
				<li><a href="about.html">FAQ</a></li>
				<li><a href="order.html">Ordering</a></li>
			</ul>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<ul>
				<li><a href="about.html">About Sophie</a></li>
				<li><a href="about.html">Careers</a></li>
				<li><a href="http://www.twitter.com/ottawacake">Follow on Twitter</a></li>
				<li><a href="http://www.facebook.com/ottawacake">Fan on Facebook</a></li>
				<li><a href="contact.html">Contact Us</a></li>
			</ul>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<ul>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Recent Articles</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Events</a></li>
			</ul>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias', 
'formHash':'q7x3s5', 
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
</body>
</html>

Holy cow that’s a lot of stuff! What I love about WordPress (and any CMS really) is that we’re able to separate all of the junk (the content for us developers, lol) and let the code shine.)

Let’s start at the top and make our way down, shall we? We first see that there’s a featured article div and some thumbnail images. Let’s change that into a WordPress loop that grabs the 3 newest article that are in a category called “Featured” and automatically pull in a thumbnail.

First, you need to open up your functions.php file and add this line:

add_theme_support( 'post-thumbnails' );

Now, the size of our thumbnails are 140×98, so we need to let WordPress know that that’s how we want them returned:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 140, 98, true );

Make sure you add the “true” statement to the end of the post thumbnail size function, otherwise your thumbnails will be sized proportionally, instead of cropped to the exact dimensions. Also note, if you’ve uploaded images and then decide to change the post thumbnail size, you’ll have to reupload them again for the changes to take place (stinks I know).

Now that the functions file is take care of, let’s open up the standard footer.php file from Hijinks (the starter theme I’m using here):

 
	</div> <!--our container div closer-->
 
<?php wp_footer(); ?>
 
</body>
</html>

Fantastic, let’s copy and paste the “featured” part of the Sophie site over:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
			<ul>
				<li>
					<a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog1.jpg" alt="The wedding palace bridal show" width="140" height="98" />The Wedding Palace Bridal Show</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog2.jpg" alt="National Flag Day Cake" />National Flag Day Cake</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog3.jpg" alt="Winterlude Fare & Flare Cake" />Winterlude Fare & Flare Cake</a>
				</li>
			</ul>
		</div>
 
 
 
 
 
 
 
	</div>
 
<?php wp_footer(); ?>
 
</body>

And now replace it with our standard loop (you should be familiar with this by now!) and use query_posts to pull posts only categorized in “featured” and only the newest three:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
 
 
 
 
 
 
 
	</div>
 
<?php wp_footer(); ?>
 
</body>
</html>

If you notice, I’ve added a new function to the end of the loop, wp_reset_query(), this function is a MUST when using multiple loops on one page, or everything gets wonky. Go ahead and open up your index.php page and add it to that loop as well.

Now, go ahead and create 3 posts, categorize them as ‘Featured’ and give them featured thumbnails. Refresh the page and look! Let’s move on (this is the p90x of tutorials, buddy).

Let’s move the everything else into our footer.php file

<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Blog</a></li>
				<li><a href="about.html">FAQ</a></li>
				<li><a href="order.html">Ordering</a></li>
			</ul>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<ul>
				<li><a href="about.html">About Sophie</a></li>
				<li><a href="about.html">Careers</a></li>
				<li><a href="http://www.twitter.com/ottawacake">Follow on Twitter</a></li>
				<li><a href="http://www.facebook.com/ottawacake">Fan on Facebook</a></li>
				<li><a href="contact.html">Contact Us</a></li>
			</ul>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<ul>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Recent Articles</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Events</a></li>
			</ul>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias', 
'formHash':'q7x3s5', 
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<?php wp_footer();?>
 
</body>
</html>

As you can see, the next section ‘Conversations’ (twitter) isn’t something we need to touch, so let’s skip that. We now come to the footer site links. We can do this section in one of three ways: we can either make each section a different WordPress menu, we can make the whole area a widget section, or we can say screw the client and make it static (let’s hope you don’t do this one!) For our tutorial, let’s make them each a different WordPress menu.

Set up your menus under the Admin > Appearance section. And then switch over to your footer.php and add in the new menus:

	<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
</div> 
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<?php wp_nav_menu( array('menu' => 'Site Links', 'container' => false, )); ?>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<?php wp_nav_menu( array('menu' => 'Company Info', 'container' => false, )); ?>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<?php wp_nav_menu( array('menu' => 'From the Blog', 'container' => false, )); ?>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias', 
'formHash':'q7x3s5', 
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<?php wp_footer();?>
 
</body>
</html>

Now to be good stewarts of web standards, let’s clean up the bottom some. The ID newsletter is hidden, so let’s delete it and it’s JS. Then, let’s move all of the rest of JS to a functions.js file:

	<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
</div> 
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<?php wp_nav_menu( array('menu' => 'Site Links', 'container' => false, )); ?>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<?php wp_nav_menu( array('menu' => 'Company Info', 'container' => false, )); ?>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<?php wp_nav_menu( array('menu' => 'From the Blog', 'container' => false, )); ?>
		</div>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
<script src="<?php bloginfo('template_url');?>/js/functions.js"></script>
 
<?php wp_footer();?>
 
</body>
</html>

Look how much prettier that is!

Next Time

As this point, reach around and pat yourself on the back! The hardest part is now over! In the coming weeks, we’ll finish up by doing the sub pages (the easy part, I promise!). Join me then!

]]> http://www.amberweinberg.com/how-to-build-a-wordpress-cms-theme-%e2%80%93-part-6-the-footer/feed/ 0