Cappelen Art & Design » Blog http://cappelendesign.no Sun, 05 Feb 2012 11:15:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Cappelen Art & Design site launched, takes over AcornArtwork http://cappelendesign.no/2012/02/cappelen-art-and-design-site-launched-takes-over-acornartwork/ http://cappelendesign.no/2012/02/cappelen-art-and-design-site-launched-takes-over-acornartwork/#comments Sat, 04 Feb 2012 13:00:24 +0000 admin http://cappelendesign.no/?p=3547 Welcome to Cappelen Art & Design’s website for the sole proprietorship business created in 2011 by Ann Christin Cappelen. As this site launches, another site is meeting its end and is moving in here.

As it got complicated and a little pointless to keep two separate portfolio sites, one for the freelance work I do in my business and one for anything else, I decided to combine it all together in one place. That means farewell to my old portfolio site, AcornArtwork. And what’s better than taking this merge as a challenge to write a customized theme for and using the great WordPress CMS which does everything I want and need for a business and portfolio site?

All AcornArtwork’s blog posts have been transferred into Cappelen Art & Design’s blog, and I hope to post more often. Be it a link to an another site’s post about something awesome, or the occasional self-written WordPress tutorial.

]]> http://cappelendesign.no/2012/02/cappelen-art-and-design-site-launched-takes-over-acornartwork/feed/ 0 Introduction to Linux Commands http://cappelendesign.no/2012/02/introduction-to-linux-commands/ http://cappelendesign.no/2012/02/introduction-to-linux-commands/#comments Sun, 05 Feb 2012 11:15:19 +0000 admin http://cappelendesign.no/?p=3662

All web developers need to work with a web server, and it’s then necessary to know a few Linux commands. If you’re not all too familiar with the Linux OS, this is a must-read. This post goes through basic Linux commands and gets more advanced without becoming to confusing.

At the heart of every modern Mac and Linux computer is the “terminal.” The terminal evolved from the text-based computer terminals of the 1960s and ’70s, which themselves replaced punch cards as the main way to interact with a computer. It’s also known as the command shell, or simply “shell.” Windows has one, too, but it’s called the “command prompt” and is descended from the MS-DOS of the 1980s.

Mac, Linux and Windows computers today are mainly controlled through user-friendly feature-rich graphical user interfaces (GUIs), with menus, scroll bars and drag-and-drop interfaces. But all of the basic stuff can still be accomplished by typing text commands into the terminal or command prompt.

]]> http://cappelendesign.no/2012/02/introduction-to-linux-commands/feed/ 0 WordPress Theme Lesson 14: Finalizing Your Theme http://cappelendesign.no/2012/01/wordpress-theme-lesson-14-finalizing-your-theme/ http://cappelendesign.no/2012/01/wordpress-theme-lesson-14-finalizing-your-theme/#comments Sat, 14 Jan 2012 23:31:27 +0000 admin http://www.acornartwork.com/blog/?p=2888

This final lesson is about improving pieces of our theme. We add a favorite icon, screenshot for WordPress admin, looking at other WordPress functions to make some parts better, and finally take a look at plugins you can install to make the theme better.

It hasn’t been easy to find a good closing point on a WordPress theme tutorial because there is so much more you can do. But the initial goal of this tutorial was an introduction to create your own theme from scratch, getting a strong foundation, and getting familiar with the WordPress API. Hopefully it has been enough to achieve an overview of the path ahead on what you want to learn next, and you now have a basic theme as a starting point. The internet is full of tutorials for pieces of WordPress theme and plugin coding – just Google it.

Small Improvements to our Theme

Favorite icon

Most web pages use a favorite icon/bookmark icon which appears next to your adress bar and in the bookmark list if the page is bookmarked. Normally it is a 16×16 pixels image, and I’ve created a ridicolously simple one for our theme, following the Space invaders theme.

Right click on the image to the left and choose Save as… Save it in your theme’s images folder.

To define a favorite icon for your site add a <link rel="shortcut icon"> line in the header. So for our theme add the following line in header.php, somewhere inside the <head> block.

header.php:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory') ?>/images/theme-favicon.png" />

Theme Screenshot

If you take a look in WordPress admin » Appearance » Themes you’ll see that most themes listed have a screenshot. It makes it look more appealing and interesting, and gives you a quick view of what the theme looks like without previewing or activating it.

In order to give your theme such a screenshot, you need an image named screenshot in your theme’s folder (theme root folder, not in the images or some other folder).

I normally take a screenshot of the finished site and resize it so it fits 300×225 pixels. I’ve made one for you here. Right click on the link, choose Save link as.. and save it in your theme’s folder. It will automatically appear along your theme.

Better Pagination

In our index.php, search.php, and archive.php we’ve used the most common pagination method used in blogs: displaying a link to newer and older entries by using posts_nav_link(). But in many cases numbered pagination works much better, especially for jumping several pages at once. I use numbered pagination on this and my other blogs.

There’s a well-known plugin, WP-PageNavi, which provides you with a customizable numbered pagination system, but if you prefer not to install a plugin WordPress offers a function which pretty much does the same: paginate_links().

I won’t go through the code for replacing the pagination, since the Codex page pretty much explains how to do it. By providing parameters and adding some styling you achieve pretty much the same as with the WP-PageNavi plugin. The advantage of writing the pagination yourself is embedding it in your theme so you won’t need to install the plugin again if you change to another WordPress installation.

Plugins to Improve Your Theme

There are thousands of plugins available (in writing there are 17,800 according to the WordPress plugin directory) to improve your site, so in this section I’ve simply focused on fulfilling the most basic needs – such as image viewers, social buttons and search engine optimization. A thumb rule is, if there is a general need for something in WordPress, most likely there exist a plugin which does just that.

Image Viewer

Depending on your WordPress settings, when clicking on an image you’ve uploaded and attached to your post, it’ll either lead to an attachment page for the image or display the full-size image. Either way the reader has to use the back-button in the browser to continue reading the post. It’s much better to use some kind of javascript image viewer which overlays the image ontop of the page without taking you to another page.

There are many image viewer plugins available for WordPress. On this site I use Shutter Reloaded, but Lightbox 2, Thickbox, Lightbox Plus, FancyBox, or any other works just as well. Just choose one which fits the needs of your site. I like Shutter Reloaded because the navigation buttons always displays at the same place regardless of the image size, it shows the image as large as possible to fit in your screen, and has a button for displaying it in full size if applicable.

Social Buttons

A great way to spread your posts on the internet is to provide social share buttons – buttons on each post which readers can share your post on their Facebook wall, Like, tweet, add to favorites, and more. Again there are plenty of WordPress plugins which takes care of this for you. SexyBookmarks is a tastefully designed and highly customizable sharing plugin. Socialize is another. On this blog I use an account at AddThis and embed some code in my theme files for the row of sharing buttons you see on the bottom of this post.

Gallery

At some point you’d most likely need to display a series of images, and for that you can use the built-in WordPress gallery function or a gallery plugin. I highly recommend NextGen Gallery. In my opinion there is no better plugin.

Search Engine Optimization (SEO)

Seach Engine Optimization is important if you want your site to appear on search sites such as Google, or any other internet search engine. Enrich your blog with meta information by providing better titles (different from your post title), a description and keywords. To learn more about SEO and WordPress, check out WordPress Codex on SEO.

In our theme we’ve already made sure all pages get extensive descriptive titles by using bloginfo('name'); wp_title(); inside the <title> tag. But we haven’t added any meta tags, such as description or keywords, because the content may vary from each post or template. So it’s a good idea to use a plugin which takes care of this variation for us. I’ve used both All in One SEO Pack and SEO Ultimate, both great SEO plugins.

Caching

To speed up the loading time of your site you can use cache plugins to temporarily store pages to make it faster the next time someone loads it. Quick Cache, WP Super Cache, W3 Total Cache are three great cache plugins, with each their own advantages and disadvantages. I don’t recommend using W3 Total Cache on a WordPress multisite.

Tutorial Conclusion

As mentioned before it’s difficult to find a ending point in a WordPress theme tutorial since it covers such an excellent and complex CMS. But I need to stop somewhere – the initial goal was to show the most basic of writing a WordPress theme without it becoming to long and boring, or focused on specific areas you might not find interesting or relevant. WordPress can do so much more than this, and I hope you’ve been encouraged to dig deeper and learn more rather than finding it to complex and stupid to bother. At least you have a basic theme as a starting point which you can copy and modify instead of writing a new theme from scratch all over again.

If you haven’t followed all the steps, seem to have misunderstood something or might be missing something, you can download the theme complete with all files here:

Click here to download the source files for our theme.

Thank you for reading, and I hope this has been useful!

This concludes the final lesson of the WordPress Theme Tutorial. Go back to the tutorial’s Table of Contents, or start writing a theme of your own!

]]> http://cappelendesign.no/2012/01/wordpress-theme-lesson-14-finalizing-your-theme/feed/ 2 WordPress Theme Lesson 13: Page Templates http://cappelendesign.no/2012/01/wordpress-theme-lesson-13-page-templates/ http://cappelendesign.no/2012/01/wordpress-theme-lesson-13-page-templates/#comments Sat, 14 Jan 2012 22:23:24 +0000 admin http://www.acornartwork.com/blog/?p=1896

One of the last things I’m going through in this tutorial is how you can create page templates for even more variability in your site. If you’ve ever needed or wanted to code a single page doing or showing something else than the default pages we’ve looked at up to now, page templates is a way to go.

In this lesson we’ll create two page templates. We will create an archive page (different from the default archive page, archive.php), which on a single page lists all posts in a short form, and below displays tag clouds – one for categories and one for tags. This gives the reader easy access to all information on your site, and is a good example for using in your search results or 404 error templates. The second page template we will create is an example of a front page for our blog, which displays a different featured posts slider than we created in the last lesson and some text. Many use a page template to create a different front page, as opposed to the traditional listing of recent posts. In both page templates we will go full-width, skipping the sidebar. As default all of our pages or posts displays the sidebar, so we can simply tell our page templates to skip the sidebar instead of modifying our existing theme files.

By now you should know that pages are different than posts in WordPress. Pages, which cannot be assigned categories or tags but can be organized hierarchically, are aften used for static content. But whereas we can’t assign templates to posts, we can do so with pages.

The page template selector

The process of assigning a page template to a page is pretty easy. When you edit a page in WordPress admin, to the right you’ll find the box “Page attributes” below the “Publish” box. From here you can choose templates from the “Template” dropdown. But the dropdown is only visible if your theme contains one or more page templates. We haven’t created any page templates in our theme, so the dropdown is not visible when we edit pages with our theme active.

In a page template you can basically do anything. You can choose to skip the sidebar, use a different footer, give it a whole different look by using a different HTML structure and styles, write a different loop, skip to include the title or content in the page assigned to the template, or choose to print some of it. It’s up to you.

The Basics of Creating a Page Template

Creating a page template is as simple as creating a file in your theme folder, and in the file add a line of code enclosed in comments to tell WordPress that this is a page template by giving it a name.

But first there’s a couple of things you should know about when it comes to naming your page template files. Page template files can be named anything you want, but must not have the same name as one of WordPress’s reserved file names. Also, the page template name can not have the same name as any of your WordPress’s page slugs. For instance if you have a page with the title “About”, its slug probably is “about” (you can find the slug just below the title in Edit Page). If you create a page template named about.php, you will achieve an 404 error or experience pagination errors. The best you can do is prefixing the page template files with your theme’s slug, thus making sure the names are not conflicting with anything else.

The lines of code required for WordPress to recognize your file as a page template are:

<?php
/*
Template Name: Your Template Name
*/
?>

Always place this PHP piece of code on top of all your page templates. That’s it! The given name appears in the Template dropdown in Edit Page.

Let’s begin with the first of our two templates, the full-width special archive page.

Creating a Full-width Archives Page Template With Tag Clouds

First of all, we want a full-width page, meaning no sidebar. How do we do that? Simple, we simply skip writing get_sidebar(). We also use some different <div> wrappings so we can style the full-width container properly.

The title and page content we fill in Edit Page in WordPress admin are irrelevant in this template, we choose not to display them. We will also defer using the loop (containing the single page) WordPress provides us, instead we will create a custom loop fetching all published posts. Then we use WordPress’s built-in function for displaying tag clouds – one for categories and one for tags.

Create an empty file in your theme folder, and call it wpthemetutorial-fullarchives.php.

wpthemetutorial-fullarchives.php:

<?php
/* 
Template Name: Full-width Archives
*/
get_header(); ?>
				
	<div id="content-full">
		<?php
		$debut = 0;  //first post to be displayed
		$numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
		if (0 < $numposts) $numposts = number_format($numposts); ?>
		<h2><?php echo $numposts; ?> posts in this blog since October 19 2009</h2>
		<ul id="archive-list">
			<?php
			$myposts = get_posts("numberposts=-1&offset=$debut");
			foreach ($myposts as $post) { ?>
			<li><?php echo the_time('d.m.Y'); ?>: <a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></li>
			<?php } ?>
		</ul>
					
		<h3 class="fullwidth-band">Browse Posts by Tag:</h3>
		<div class="tag-cloud"><?php wp_tag_cloud(array('taxonomy' => 'post_tag', 'number' => 0)); ?></div>
                    
		<h3 class="fullwidth-band">Browse Posts by Category:</h3>
		<div class="tag-cloud"><?php wp_tag_cloud(array('taxonomy' => 'category', 'number' => 0)); ?></div>
		
	</div>		
	
<?php get_footer(); ?>

After the page template name, we include the header and define a different content-wrapping <div> as to style it full-width. Then, we create a SQL query to the WordPress posts-table counting how many posts we have (the SQL query is not used for fetching posts). We only count posts, not pages, and only posts that are published. The number is used in the title, stating the total of posts published. I’ve written the date I installed my local WordPress so you should replace the date with a date that fits for you or skip it.

Then, in a list, we fetch posts using get_posts(). The crucial argument numberposts=-1 makes WordPress return all posts regardless of pagination limits. The $offset makes sure we start offsetting at the first post. For each post we print the date it was created with its title, linking to the post.

After the loop we look into tag clouds. Luckily creating tag clouds is pretty simple with WordPress function wp_tag_cloud(). We provide the taxonomy type as argument, which can be either category or post_tag (or a custom taxonomy, but that’s beyond this tutorial). Setting the number to 0 will dispay all tags or categories, not limited to WordPress’s rule of showing a maximum of 45 most used tags.

Go to WordPress admin and add or edit one of your pages, and select “Full-width Archives” in the Template dropdown. Save, preview your page and you are looking at pretty much all content in your blog gathered in one full-width page. It doesn’t look any good though, so let’s add some styling in our style.css to make it look like my screenshot to the right (unpixelated obviously). Click here to download the image used below, unzip and put it in the images folder.

style.css:

/*** FULL WIDTH ARCHIVE ***/
#content-full {
	width: 780px;
	margin: 0 auto;
}
h3.fullwidth-band {
	background: url("images/content-full-band.png") no-repeat top left;
	margin: 0 -30px;
	padding: 9px 10px 12px 35px;
	color: #DEE9F5;
}
ul#archive-list {
	list-style-type: none;
	padding: 10px 0 20px 0;
}
.tag-cloud { margin: 0 0 20px 0; }

WordPress Codex Function references:

Creating a Front Page Template

To close up on this tutorial, I decided to create a page template which utilizes much of what we’ve been through in this tutorial. We are to create a front page template with a title, a different slider than our featured posts slider, and some welcome text below. Instead of hard-coding the title and welcome text, we display the page’s title and content, making it easy to modify as we don’t need to edit the theme files. Although this front page isn’t according to our initial design, it gives you an idea of how you can make your WordPress installation look less like a blog and more like a site.

As for this page template I’ve chosen to use a different jQuery library than we used in our featured posts section, partly because we only want to display three posts with a different sliding effect, and partly to ensure that you remember how to include scripts properly in WordPress. The idea of the slider is to display three posts, with titles to the left, and the current post thumbnail on the right-hand side. For making this pretty we need to add a new image size, like we did in lesson 8.

When it comes to term with choosing which posts to display we could create a new category called something appropriate such as “Front page”, or we could use the Featured category we used in lesson 12. Another possibilty to choose which posts and thumbnails to display is using custom fields in the page assigned to the front page template – but we haven’t been through custom fields in this tutorial so I’ve chosen to fetch the three recent posts from our existing Featured category.

Since we’ve been through most of this before, I won’t explain in details what we’re doing, refer to previous lessons if you get stuck.

First, we add our new image size in our functions.php (remember to generate thumbnails afterwards):

functions.php:

add_image_size('frontpage-template-thumbnail', 400, 260, TRUE);

Next, we enqueue the necessary javascript libraries. The jQuery library we are to use, jQuery UI Tabs, is inside the jQuery UI library. The jQuery UI library is included with WordPress, which means we only need to enqueue it. So Tabs’s dependencies are jQuery UI and then the jQuery core library. Find our existing function wpthemetutorial_add_js() in functions.php, where we registered and enqueued the jQuery Tools, and add this line of code right below the enqueuing of jQuery Tools:

functions.php:

wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'));

We need to initialize Tabs by calling the function tabs() on the element we want to activate Tabs onto. We do this in the <head> tag inside a jQuery(document).ready() function. We added this in lesson 12 when initializing jQuery Scrollable and Navigator, and we can add Tabs in the same function. In functions.php find our wpthemetutorial_add_init_js() function, and inside the jQuery(document).ready() function, add this line after the initialization of Scrollable:

functions.php:

jQuery("#tabs").tabs().tabs('rotate', 5000);

Now all that’s left is to actually create the page template.

Create a new file in your theme directory, and name it wpthemetutorial-frontpage.php.

wpthemetutorial-frontpage.php:

<?php
/*
Template Name: Front Page Template
*/
get_header(); ?>
<div id="content-full">
	<h2 class="frontheading"><?php the_title(); ?></h2>
	<div id="tabs">
		<ul>
			<?php
			$my_query = new WP_Query('category_name=Featured&posts_per_page=3');
			$counter = 0;
			while ($my_query->have_posts()) : $my_query->the_post(); ?>
			<li><a href="#tabs-<?php echo $counter++; ?>"><span class="capitalize"><?php the_title(); ?></span><?php the_excerpt(); ?></a></li>
			<?php endwhile; $counter = 0; //reset counter ?>
		</ul>

		<?php 
		$my_query = new WP_Query('category_name=Featured&posts_per_page=3');
		while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<div id="tabs-<?php echo $counter++; ?>">
			<?php if (has_post_thumbnail()) { the_post_thumbnail('frontpage-template-thumbnail'); } ?>
		</div>
		<?php endwhile; ?>
	</div>

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="fullwidth-text">
		<?php the_content(); ?>
	</div>		
	<?php endwhile; endif; ?>			
</div>
<?php get_footer(); ?>

This code prints the title, excerpt and post thumbnail to the three most recent posts in the Featured category, along with some HTML tags necessary for jQuery Tabs. Below we have the normal loop which contains the page, and from that we print its content. Finally, to make it look good we need some styling. In our style.css add:

style.css:

/*** FRONT PAGE ***/
h2.frontheading { padding-bottom: 15px; font-size: 22px; }
.fullwidth-text { padding: 10px; }
.capitalize { text-transform: uppercase; font-weight: bold; }
.fullwidth-column {
	width: 350px;
	float: left;
	margin: 5px 30px 0 0;
}

/* Jquery UI tabs */
.ui-tabs .ui-tabs-hide { display: none; }
#tabs {
	font-size: 11px;
	border: 1px solid #dadcde;
	background-color: #ffffff;
	margin-bottom: 10px;
	position: relative;
	height: 300px;
}
#tabs ul.ui-tabs-nav {
	list-style: none outside none;
	left: 20px;
	top: 20px;
	position: absolute;
	width: 315px;
}
#tabs ul.ui-tabs-nav li {
	border-bottom: 1px solid #bbbbbb;
	height: 85px;
}
#tabs ul.ui-tabs-nav li:last-child { border: none; }
#tabs ul.ui-tabs-nav li a {
	display: block;
	padding: 10px;
	height: 65px;
	line-height: 22px;
}
#tabs ul.ui-tabs-nav li.ui-tabs-selected a { background-color: #697f9a; color: #FFFFFF; }
#tabs ul.ui-tabs-nav li.ui-tabs-selected a:hover { background-color: #697f9a; color: #FFFFFF; }
#tabs ul.ui-tabs-nav li a:hover { background-color: #e3e6e8; }

#tabs .ui-tabs-panel {
	height: 260px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 400px;
}

Finally the page template is ready to be used. Edit or add a page and assign the template “Frontpage” to it. Add the text you want displayed below the featured posts and preview the page.

You may have noticed I’ve added styling for a <span> or <p> with the class fullwidth-column in the CSS above. If you switch to HTML view in the editor, you can add some HTML elements with those classes around the text to make the text divide into two columns. There are several solutions to modify the layout of the text written in the editor, but that’s beyond this tutorial. This was just an example of making the page more pleasing to look at.

If you want to use this page as the front page of your WordPress site, you need to do some settings in WordPress. Go to WordPress admin » Settings » Reading, and choose “A static page” at “Front page displays”, then choose your page in the dropdown-list. You’ll need another page for the normal loop of recent posts. If you save and refresh your front page, it should display the page template you’ve just made. But I strongly advise adding more to this page template, e.g. a menu or sidebar, as it totally lacks navigation to the rest of the site!

WordPress Codex Function references:

This concludes Lesson 13 of the WordPress Theme Tutorial. Go to the next lesson, Finalizing Your Theme, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2012/01/wordpress-theme-lesson-13-page-templates/feed/ 0 WordPress Theme Lesson 12: Featured Posts, Dealing with Multiple Loops http://cappelendesign.no/2012/01/wordpress-theme-lesson-12-featured-posts-dealing-with-multiple-loops/ http://cappelendesign.no/2012/01/wordpress-theme-lesson-12-featured-posts-dealing-with-multiple-loops/#comments Sat, 14 Jan 2012 12:45:08 +0000 admin http://www.acornartwork.com/blog/?p=2711

In this lesson we’ll add the featured posts section formed as a jQuery slider on top of the front page. By placing it on the front page template we need to adress the issue of creating multiple loops on the one and same page. This lesson accumulates many of the lessons so far in this tutorial; we need to write a custom query code, fetch post thumbnails in a specific image size, and include libraries and scripts to make our slider work.

We begin with registering and enqueuing the necessary scripts for our jQuery slider, for which we will use the jQuery Tools library. We will then add the initializing slider function call in our <head>, and finally write the custom query loop in our index.php to fetch posts from our featured posts category.

There are many jQuery-based slider plugins you can use (see for instance 13 excellent jQuery sliders), or you can even write your own based on the jQuery library. I chose to use jQuery Tools, a bundle of jQuery plugins where we are to use Scrollable and Navigator. Read through the guides and demos in case you want to read up on how our slider works.

Registering and Enqueuing Scripts

In the previous lesson we learned how to include javascript libraries in WordPress the right way. jQuery Tools is not one of WordPress’s included libraries, so we need to register it providing its CDN path before we enqueue it. Keep in mind that we need the full library since Navigator isn’t included in the min bundle. The jQuery Tools depends on jQuery core library being loaded first.

We open up our functions.php and write a PHP function hooked onto the init hook:

functions.php:

function wpthemetutorial_add_js() {
	if (!is_admin()) {
		wp_register_script('jquery-tools', 'http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js', array('jquery'));
		wp_enqueue_script('jquery-tools');
	}
}
add_action('init', 'wpthemetutorial_add_js');

If you refresh your site and take a look at the source code, the jQuery and jQuery Tools should be included, either where you put the wp_head() or the wp_footer(). Great! Up next is to initialize the slider in a jQuery document ready function.

WordPress Codex Function references:

Initializing the Slider Script

In our <head> section we need to add only one javascript function call, scrollable(), inside a jQuery document ready function, but obviously we need it to be run after the jQuery libraries have been loaded. As shown in the previous lesson we hook onto the wp_head hook, which ensures that the jQuery libraries have been loaded first because they were hooked onto the much earlier init hook. Also remember that WordPress loads jQuery in no conflict mode.

In our functions.php we add another PHP function which hooks onto the wp_head hook:

functions.php:

function wpthemetutorial_add_init_js() {
	?>
	<script type="text/javascript">
		jQuery.noConflict();
		jQuery(document).ready(function($) {
			jQuery(".scrollable").scrollable().navigator();
		});
	</script>
	<?php
}
add_action('wp_head', 'wpthemetutorial_add_init_js');

If you refresh your site now, you should see this piece of javascript right at the end of the <head> part. It initialize Scrollable on all elements with the class scrollable as well as Navigator which handles our slider’s navigation buttons. But before we add the HTML elements to form the slider, I need to explain how we deal with multiple loops in the one and same page.

WordPress Codex Function references:

Dealing with Multiple Loops

What we want is to create two separate loops where each fetches different posts. The problem with multiple loops on the same page is the global core $wp_query value. It is loaded in the blog header and is fed arguments from e.g. GET, creating an array of posts. All loops use the $wp_query object, even though we don’t refer to this by name. The loop functions have_posts() and the_post() are just convenience wrappers – they are identical to $wp_query->have_posts() and $wp_query->the_post(), respectively.

The thing is, $wp_query can only be called once. One way to get around this is re-using the query by calling the WordPress function rewind_posts(), or we could simply create a new query object instead of using $wp_query. I will use the last method, creating a new query object for our featured posts so that we can use the $wp_query for our normal loop of posts. This is less work as we don’t need to alter the code we already have in our index.php. The WordPress Codex explains and shows different examples of handling multiple loops if you want to learn more about this topic.

We also want to prevent showing the same post in both the featured posts section and the normal loop below. If the writer choose to mark a very recent publised post as featured, we may risk showing the same post twice in the same screen. To solve this we store an array of post IDs when we loop through featured posts, and in our original loop we add a line of code which skips the current post if its ID is in our array.

Custom query for Fetching Featured Posts

Using the method explained above we don’t need to alter our existing loop in our index.php, except adding the one line to prevent duplicate posts. Let’s first add the custom loop. Just above and before the original loop we create a new query object and write a loop using this object, but otherwise the procedure is the same as a normal loop.

In our custom query we want to fetch 9 posts from the category named ‘Featured’ (replace the name if you chose another category name), so we get three on each slide.

We also need to add some extra HTML to make our jQuery slider work, such as navigation elements and dividing the posts three by three in each slide/div element. In our index.php, add this piece of code before the original loop, but right after <div class="content">:

index.php:

<div id="featured-scrollable">
	<div class="scrollable">
		<h3>Featured Posts</h3>
		<div class="navi"></div>
		<div class="items">
			<?php $counter = 0; $perslide = 3; ?>
			<div class="scrollable-item">
			<?php $my_query = new WP_Query('category_name=Featured&posts_per_page=9');
			while ($my_query->have_posts()) : $my_query->the_post();
				$do_not_duplicate[] = $post->ID;
				if ($counter++ > $perslide) { $counter = 1; ?></div><div class="scrollable-item"><?php } ?>
				<div class="item">
					<?php if (has_post_thumbnail()) : the_post_thumbnail('featuredposts-thumbnail'); endif; ?>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
				</div>
				<?php endwhile; ?>
			</div>
		</div>		
	</div>
	<div class="featured-scrollable-nav">
		<a class="featured prev left"></a>
		<a class="featured next right"></a>
	</div>
	<div style="clear:both;"></div>
</div>

If you look closely at the loop you’ll see we create a new WP_Query object and stores it in $my_query. We then refer to this object when calling have_posts() and the_post(). At this point we’ve created a loop without touching the global $wp_query object. As arguments to WP_Query we add the category name and the number of posts we want to fetch. Then for each post we store the ID in the array $do_not_duplicate, which we will later use in our original loop to prevent duplicates.

The values $counter, $perslide and the line inside the loop immidiately before <div class="item"> makes sure we loop through three posts before we close the <div> and start a new <div class="scrollable-item">.

Remember from Lesson 8 where we defined an image size specific for our featured posts section? We’ve put the shorthand name into use, featuredposts-thumbnail, as argument when we fetch the post thumbnail, giving us just the right size we need to fit three posts nicely next to each other.

Prevent Duplicates

We need to do one more thing before we’re done writing the featured posts section, which is to add a line in our original loop below to prevent duplicates. We created an array $do_not_duplicate looping through our featured posts, and we need to make sure no posts with any of these IDs are repeated in the normal loop. Scroll further down index.php and find our original loop line:

if (have_posts()) : while (have_posts()) : the_post();

Make a new line below this, and write:

if (in_array($post->ID, $do_not_duplicate)) continue;

This checks whether or not the current post ID resides in the array $do_not_duplicate, and if it does, it continues to the next post, skipping the one we were at.

Our slider will not be visible or work before we add styling to it. Let’s do that!

WordPress Codex Function references:

Styling our Featured Posts Slider

I’ve copied most of my CSS from the guide provided by jQuery Tools’s website and then modified it to my needs. In your style.css add:

style.css:

/* SCROLLABLE FEATURED */
.scrollable {
	position: relative;
	overflow: hidden;
	width: 490px;
	height: 185px;
}
.scrollable .items {
	width: 2000em; /* Must be large, but not too large */
	position: absolute;
	clear: both;
}
.items div.scrollable-item { 
	float: left; 
	width: 490px; 
	margin-top: 8px; 
}

#featured-scrollable {
	background-color: #ffffff;
	border: 1px solid #dadcde; 
	padding: 15px;
	margin-bottom: 20px;
}
#featured-scrollable h3 {
	font-family: Arial, Verdana, sans-serif;
	font-size: 18px;
	color: #4f5051;
	float: left;
}
#featured-scrollable .items div.scrollable-item .item { float: left; width: 140px; margin: 0 11px; height: 155px; }
#featured-scrollable .items div.scrollable-item .item img { border: 1px solid #71869f; }
#featured-scrollable .items div.scrollable-item .scrollable-postthumbnail { width: 140px; }
#featured-scrollable .items div.scrollable-item .item h2 { padding-top: 4px; font-size: 13px; }

#featured-scrollable .featured-scrollable-nav { 
	display: block; 
	width: 100px;
	margin: 15px auto 0 auto; 
	padding-left: 35px;
}
#featured-scrollable .featured-scrollable-nav a { 
	cursor: pointer; 
	margin-right: 10px;
	background: url("images/slider-arrows.png") no-repeat 0 0;
	font-size: 1px;
	display: block; 
	height: 30px;
	width: 30px;
	float: left;
}
#featured-scrollable .featured-scrollable-nav a.right { background-position: 0 -30px; margin-right: 0; }
#featured-scrollable .featured-scrollable-nav a.disabled { visibility: hidden; }
#featured-scrollable .featured-scrollable-nav a.left:hover { background-position: -30px 0; }
#featured-scrollable .featured-scrollable-nav a.right:hover { background-position: -30px -30px; }

.navi {
	margin-left: 440px;
	margin-top: 5px;
	width: 200px;
	height: 20px;
}
.navi a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url("images/navigator.png") 0 0 no-repeat;
	display: block;
	font-size: 1px;
}
.navi a:hover { background-position: 0 -8px; }
.navi a.active { background-position: 0 -16px; }

Our featured posts slider

Click here to download the images used in this CSS code, unzip and put the images into the images folder in your theme folder.

Refresh the front page and see that the slider works. Three posts from your chosen category are displayed with the post thumbnail and title, three on each slide. The right and left buttons are not displayed if there are no more posts in the given direction. We also have working navigation “dots” in the upper right hand corner. And if you flip through your posts you should also not see any duplicates.

This concludes Lesson 12 of the WordPress Theme Tutorial. Go to the next lesson, Page Templates, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2012/01/wordpress-theme-lesson-12-featured-posts-dealing-with-multiple-loops/feed/ 0 WordPress Theme Lesson 11: Including Javascripts The Right Way http://cappelendesign.no/2012/01/wordpress-theme-lesson-11-including-javascripts-the-right-way/ http://cappelendesign.no/2012/01/wordpress-theme-lesson-11-including-javascripts-the-right-way/#comments Sat, 14 Jan 2012 12:00:43 +0000 admin http://www.acornartwork.com/blog/?p=1962

Our design doesn’t require much javascript, but it’s increasingly more common to use javascript to spice up a web design or for displaying dynamic content. For our theme we need to use jQuery for dynamic content on top of the front page, a slider with featured posts. You can improve more of the theme by using jQuery tabs, accordion menus, or to load content without requiring a page refresh. It can make the website more elegant, as long as you don’t overdo it.

If you’re creating a web page from scratch without a CMS, you’d just add each javascript library or script in the <head> section, like we’ve done with the stylesheet so far in this theme. But using WordPress as a CMS we need to take in consideration all scripts which might be added in the wp_head, scripts from both WordPress itself and all active plugins. This is why we need a safe way of adding scripts so that we don’t load the same libraries more than once, and that WordPress loads them in the right order. WordPress has a quite-simple-to-use mechanism for this.

Managing javascripts in WordPress is referred to as registering and enqueuing scripts, which is hooked onto a initializing state of WordPress. We register a script if it’s unknown to WordPress and enqueue it, which puts it in WordPress’ queue of scripts to load in either wp_head or wp_footer (remember wp_head and wp_footer from Lesson 2?). WordPress also takes care of preventing loading the same script twice. Let’s say some plugin and our theme loads the same library (e.g. jQuery UI), which means we have two enqueue-calls with the same library but the script will only be loaded once. If we didn’t use WordPress’ queue of scripts, it’s easy to risk loading a script twice, and most likely cause both scripts to stop functioning. We can also de-register a script, preventing it from being enqueued and included at all.

Included with WordPress there’s a bunch of scripts, such as the core jQuery script and jQuery’s plugins. None of them are loaded as default, but we can choose which to load and when, without having a copy of the script files in our theme folder. See a list of all scripts included with WordPress here. The most interesting of them all is jquery, jquery-ui-core, scriptaculous, thickbox and tiny_mce (Tiny MCE is the text editor used in WordPress). Keep in mind that with libraries included in WordPress we only need to enqueue, not register them. It’s when we add our own script files we need to register them first, because they are unknown to WordPress (WordPress doesn’t know where it can find the files and what dependencies the script has).

An important note on jQuery: Keep in mind that WordPress loads jQuery in no conflict mode. What this means is that in your scripts you must use jQuery instead of the $ sign unless you assign jQuery into another variable.

NB:This whole lesson is code samples showing how we include scripts in WordPress and not something we are to do in our theme. We return to our theme in the next lesson, where we will use what we learned here.

Enqueuing WordPress-included Scripts

We do all the registering and enqueuing scripts in a function hooked onto the WordPress hook init. Hooking onto any other hook than init wil cause issues to arise.

We enqueue scripts using the WordPress function wp_enqueue_script(), with the script’s shorthand name defined by WordPress (the names are listed in the full list) as the first argument. The second argument is the file’s location, which we don’t need to provide with WordPress included scripts so we use null. The third argument is the script’s dependencies. Here we can tell which scripts we need to be loaded before this script can be loaded. For instance, if we want to load the jQuery UI library, we need to load the core jQuery library first, so we put jQuery as a dependency. Note that we don’t need to enqueue the jQuery core library if we’ve added it as a dependency. WordPress will automatically enqueue all scripts in the list of dependencies.

Let’s say we want to use the jQuery Tabs library, one of the scripts included in WordPress. It depends on the jQuery UI, which in turn depends on the core jQuery library. To do this, we only enqueue the jQuery Tabs using the shorthand name jquery-ui-tabs, and set jquery-ui-core and jquery as dependencies. We put the wp_enqueue_script() in a PHP function in our functions.php and hooks it into the init hook:

functions.php:

function wpthemetutorial_add_js() {
	if (!is_admin()) {
		wp_enqueue_script('jquery-ui-tabs', null, array('jquery', 'jquery-ui-core'));
	}
}
add_action('init', 'wpthemetutorial_add_js');

If you try this function and refresh and take a look on the source code of your site, you should see that jQuery, jQuery UI and the jQuery UI Tabs libraries are included. They normally resides in the footer where you put your wp_footer, and it will do so even if you add a False to the in_footer parameter. Sometimes they are being loaded in the wp_head hook in the <head> section. It’s really up to WordPress where the scripts are loaded.

You’ve probably noticed the if-check on is_admin(). With conditional tags we can choose which pages we want to enqueue scripts, preventing loading unecessary scripts where we don’t need them – in this case the WordPress admin interface. You could e.g. enqueue scripts only at a particular page template, or anywhere except the front page. To learn more take a look at the list of conditional tags.

And that’s how you enqueue a WordPress-included script. But what if you want to remove a WordPress-included script, and replace it with another file, such as an older or newer version?

Deregistering a WordPress-included Script

If you want to prevent a script to be included, or provide another file or URL to a WordPress-included script, you can deregister it with wp_deregister_script(). It’s used in the same way as wp_enqueue_script(), providing the shorthand name as the first parameter.

Perhaps a more common example of deregistering a WordPress-included script is when you of some reason want to use the CDN copy of jQuery instead of the one included with WordPress. In that case we deregister the jQuery script, register it again with the CDN URL, and finally enqueue it.

functions.php:

function wpthemetutorial_add_js() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'wpthemetutorial_add_js');

Note that we’ve registered and enqueued it with the same shorthand name, jquery, making sure all dependencies on this library works normally.

Registering and Enqueuing Your Own Scripts Files

Now that we’ve been through WordPress-included scripts, let’s learn how we can include our own scripts. It could be a jQuery plugin not included in WordPress which we’ve copied into our theme folder, or a self-written script. In this case we must remember to register them before we enqueue it, so WordPress knows where to find the file. By registering a script we make up an unique shorthand name which we will then use when we enqueue it.

In this example we’ll include a script called wpthemetutorial.js which requires the jQuery core library being loaded first. It resides in a folder called js in the theme folder.

functions.php:

function wpthemetutorial_add_js() {
	if (!is_admin()) {
		wp_register_script('wpthemetutorial_js', get_bloginfo('stylesheet_directory') . '/js/wpthemetutorial.js', array('jquery'));
		wp_enqueue_script('wpthemetutorial_js');
	}
}
add_action('init', 'wpthemetutorial_add_js');

We register the script with the shorthand name wpthemetutorial_js and set the path as second parameter by getting the stylesheet directory and adding the rest of the path after it. The jQuery core library is its only dependency. We then enqueue the script by using the name we gave it when registering. And that’s it.

Adding Initializing Script Code in The <head>

When using jQuery libraries and plugins you often need to initialize functions on document ready, code which you normally’d place in the <head> section. The safe way to do this with WordPress is ensuring that libraries this code depends on are loaded first, e.g. the jQuery library.

We will hook our function onto the wp_head hook. The hook init which we’ve registered and enqueued all of our scripts are run before wp_head. This ensures that all libraries are loaded before we add our intializing script.

In the example below we assume we’ve enqueued the jQuery UI Tabs (the first example above). We need to initialize jQuery Tabs by calling the .tabs() function inside a jQuery document ready. So we create a PHP function which hooks onto the wp_head. Don’t forget the jQuery.noConflict().

functions.php:

/* Adds JS code to be run in <head> */
function wpthemetutorial_add_init_js() {
	?>
	<script type="text/javascript">
		jQuery.noConflict();
		jQuery(document).ready(function($) {
			jQuery("#tabs").tabs().tabs('rotate', 5000);
		});
	</script>
	<?php
}
add_action('wp_head', 'wpthemetutorial_add_init_js');

Back to Our Theme…

Hopefully these examples should help you understand the basics and be prepared when we need to add scripts to our theme later in this tutorial. We are going to add a jQuery slider for our featured posts in the next lesson, and for that we need to register and enqueue the CDN of jQuery Tools, with jQuery core as a dependency. We also also need to initialize the slider in the wp_head. I’ll show you the code in the next lesson, but I won’t explain it in depth.

If you tried out the above examples, remember to delete what you might’ve added in your functions.php in this lesson.

WordPress Codex Function references:

This concludes Lesson 11 of the WordPress Theme Tutorial. Go to the next lesson, Featured Posts, Dealing with Multiple Loops, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2012/01/wordpress-theme-lesson-11-including-javascripts-the-right-way/feed/ 0 WordPress Theme Lesson 10: Related Posts, Dealing with Nested Loops http://cappelendesign.no/2011/10/wordpress-theme-lesson-10-related-posts-dealing-with-nested-loops/ http://cappelendesign.no/2011/10/wordpress-theme-lesson-10-related-posts-dealing-with-nested-loops/#comments Sat, 22 Oct 2011 18:45:22 +0000 admin http://www.acornartwork.com/blog/?p=1825

In this lesson we’ll focus on writing the related posts section in the single post view, which should appear between the post content and the comments section. The idea is to list a small number of posts related to the post the reader has just read to inspire her or him to read more of your posts. By adding this piece of code we need to learn more about the Loop and how we handle custom queries.

In all of our templates, including the single.php, we have a Loop which loops through a predefined set of posts. We use a Loop in the single.php and it works just fine because the set of posts we loop through contains a single post. The challenge is not only to write a custom WordPress query, but we need to be extra cautious as this results in nested Loops, a new Loop inside another Loop. We need to make sure that the nested Loop exits properly so the Loop on the outside can continue as normal. There are several ways to make this work, the WordPress Codex suggests one way, but I’ll show you another method since we’re going through WordPress’s suggested way in a later lesson.

The Issue With Nested Loops

In the Loops we’ve written before we use the_post() to set up the post object so we can use simpler functions getting post information, such as the_title() and the_permalink(). When we want to create a loop inside a loop, stating the_post() in another query will mess up the global post object in the parenting loop, because we change the global post into another post object. In our case in the single post template this results in getting the wrong post comments. WordPress will insert the comments template based on the global post object, which should be the current single post object we’re displaying, not the last post object in our nested posts query. A simple solution is to store the global post object before we enter the second loop, and set it back again when we’re done, and finally use a WordPress function to reset the query.

Another method is to use one of WordPress’s simple query functions, get_posts(), to fetch posts, and use setup_postdata() to set up each post object, a method which doesn’t interfere with the_post(). With get_posts() you have a large repertoire of arguments to filter and pick out posts. See examples of arguments in the WordPress Codex on get_posts, and the full list of parameters in WordPress Codex outlining the WP_Query() function, which is equivalent to get_posts().

Related Posts

How are we going to find posts that are related to the current post? The simplest solution is to fetch posts in the same category, which will work fine as long as the author actively use categories. It’s possible to further specialize our search for related posts by looking at e.g. post tags as well, but that requires quite a bit more code. If you’re interested in fetching related posts via tags, WpTuts+ has an excellent article on this. I’ll show you the simple solution, looking for posts in the same category.

Our related posts query is going to fetch three posts, which are in one or more of the same category as the current post, sorted by date (the most recent first). Importantly we also want to exclude the current post from the set of related posts.

Remember we left an empty div with the class related-template in our single.php, between the post and comments section? Let’s write this code in its place:

single.php:

<div class="related-template">
	<h3>Related posts</h3>
	<ul class="spaceinvader-list">
		<?php
		$backup = $post; //Backup current post object
		$current = $post->ID;  //get current post id 
								
		global $post;

		//Fetch categories of current post
		$counter = 0;
		$allcats = '';
		foreach ((get_the_category()) as $cat) {
			if ($counter > 0) $allcats .= ',';
			$allcats .= $cat->cat_ID;
			$counter++;
		}

		//Get posts
		$myposts = get_posts('numberposts=3&order=DESC&category='.$currentCat.'&exclude='.$current);
		foreach ($myposts as $post) :
			setup_postdata($post);
			?>
		<li>
			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
			<span class="related-posts-date"><?php the_time('F jS, Y'); ?></span>
		</li>
		<?php endforeach;
								
		$post = $backup; //restore current post object
		wp_reset_query();
		?>
	</ul>
</div>

The first thing this code does is to store the important global post object in the PHP value $backup, and we also store the current post ID so we can exclude it in our query. Next we loop through the categories of the current post, storing the category ID’s as a comma-separated string in $allcats. By then we have all the information we need to start query posts.

As parameters to get_posts(), we ask for three posts, in a descending order, in the categories stored in $allcats and finally, exclude current post. We use setup_postdata() to set up the post objects instead of the_post() as we loop through the posts. For each post we display post information by using the simple WordPress function such as the_title().

After we’re done looping through the custom query we must remember to reset the global post ID by setting the global $post back into the object we stored in $backup and run the WordPress wp_reset_query() to reset the query. If we do this, WordPress is back on the original post object and can continue to display the comments, to the right single post.

The code works, but lacks styling. Let’s add some CSS for our related posts section in our style.css:

style.css:

/* Related posts */
.related-template { 
	background-color: #ffffff;
	border: 1px solid #dadcde; 
	padding: 10px;
	margin: 25px 20px 0 0;
}
.related-template h3 {
	font-family: Arial, Verdana, sans-serif;
	font-size: 18px;
	color: #4f5051;
	padding-bottom: 10px;
}
.related-template .related-posts-date {
	font-size: 11px;
	color: #8c8e93;
}

Related posts

We already have the styling for lists in place, the class spaceinvader-list, which we wrote in lesson 6.

Open a single post in your WordPress implementation and scroll down to the end of the post before the comments section. You should see a box listing three (or less) posts, all of which should be in one or more of the same categories as the current post. The current single post will also never be one of the related posts.

WordPress Codex Function references:

This was a category-wise way example of fetching related posts. There are a number of more advanced related posts plugins you could use instead, but now you’ve been introduced in one way to manage nested loops.

We will revisit the multiple loop issue in lesson 12 when we write code for the featured posts on top of the front page. In that case it’s not nested loops but multiple loops on the same page, for which we need to handle queries and loops a little differently. But I recommend reading the next lesson first, as I go through how to include javascript libraries and scripts which we’ll need for the featured posts section.

This concludes Lesson 10 of the WordPress Theme Tutorial. Go to the next lesson, Including Javascripts the Right Way, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2011/10/wordpress-theme-lesson-10-related-posts-dealing-with-nested-loops/feed/ 5 WordPress Theme Lesson 9: Adding Support for Custom Menu http://cappelendesign.no/2011/10/wordpress-theme-lesson-9-adding-support-for-custom-menu/ http://cappelendesign.no/2011/10/wordpress-theme-lesson-9-adding-support-for-custom-menu/#comments Sat, 22 Oct 2011 18:14:01 +0000 admin http://www.acornartwork.com/blog/?p=1806

In version 3.0 WordPress launched a custom navigation menu system, allowing users to create custom menus in WordPress admin without the need of editing the theme code. If you’re not familiar with this yet, this is a great and informative Codex page you should read. The traditional way to organize a menu in WordPress was to create pages, and list all pages in the menu. As listing pages has certain obvious drawbacks, for instance you might not want to display all of your pages or you might want to use pages for something else contentwise rather than let them make up the site’s main menu, the new custom menu system provides the author greater flexibility and an user-friendly interface.

So far in the tutorial we’ve used the traditional way to organize our menu in the sidebar and footer, or maybe you chose to manually write out your menu items in the templates. The theme user/blogger/you don’t have a simple way to modify the site’s menu – the only way to change it is to edit the theme files, requiring knowledge in HTML and perhaps even PHP. That’s no good. So in this lesson we’ll replace our menus with support for the new custom menu system.

Note: If you use a WordPress version lower than 3.0, you can skip this lesson. It’s however highly recommended to regularily upgrade WordPress, to get new features as well as security updates.

Go to WordPress admin » Appearance and click on the subitem Menus. You will get a message stating that the current theme doesn’t support menus. But you are still allowed to create a custom menu and use a WordPress widget to place the menu. This is another solution, but less intuitive for the blog user. We want the user to simply create a menu, and in the same place choose where it should appear. Period.

The process for adding support for custom menus is two-parted. We create a PHP function in our functions.php which contains code to define a menu “container”, and by using action hooks we hook this function onto one of WordPress’s site initializing processes. Then we add a piece of code in the template where we want the menu container to be placed. After this we can use the Menu user interface and choose the desired container for our menu.

Adding Support for Custom Menu

We have two WordPress functions we can use for adding support for custom menus, register_nav_menu() which registers one menu, and register_nav_menus() to register more than one. In our case we only need one (it is the same menu which appears in two different places). Let’s add this code in our functions.php.

functions.php:

/* Register main menu */
function wpthemetutorial_register_menu() {
	register_nav_menu('main-menu', __('Main menu'));
}
add_action('init', 'wpthemetutorial_register_menu');

The first parameter is the menu slug (a shorthand name without spaces and no uppercase letters), and the second is our menu’s full name. Always give a name which best explains the user where this menu is supposed to appear, such as “Top navigation bar”, or “Main menu”. We then hook our function onto init, one of WordPress’ core initializing states.

Choosing menu location

If you return to Appearance » Menus in WordPress admin, you should see that the previous warning is gone. Now, by using the WordPress’s custom menu editor, create a new menu by adding menu items and organizing them. In the box on the left-hand side titled Theme Locations, you’ll see that our theme supports a single menu, and the drop down list contains all menu containers you have created. We’ve created one, named Main menu. Select it in the dropdown-list and save. As of now the menu you created is what will be used as our main menu. The next and last step is add a line in the templates where we want the menu to appear.

WordPress Codex Function references:

Placing the Custom Menu in our Templates

We use the WordPress function wp_nav_menu() to tell WordPress where the custom menu is to appear. As arguments we provide the menu slug defined in functions.php above, in our case main-menu. In our theme we want this menu to be displayed both in the sidebar and the footer so we need to edit both templates. Let’s start with the sidebar.

Open up sidebar.php and find the menu area where we list our pages (or all items if you chose to do write your own). Delete the whole <ul> list part, including the wp_list_pages() and the closing </ul>. In its place add this line of code, which should be right after the <h2 with the widget title:

sidebar.php:

<?php wp_nav_menu(array('theme_location' => 'main-menu', 'menu_class' => 'sidebar-menu')); ?>

The first argument in the wp_nav_menu() function call, the theme_location, is the important link pointing to the slug (the shorthand name, not the full name) you provided for your menu in the functions.php. I’ve also added an argument to menu_class so WordPress will give the menu’s <ul>-element the class sidebar-menu. In lesson 6 we added styling for a menu with this exact class name, so we don’t need to add any additional styling. It’ll look just like before, but with your custom menu items!

Keep in mind that if you call wp_nav_menu() without the theme_location argument, WordPress will display the first custom menu created, regardless. If there are no menus defined it will fall back to a list of pages.

Let’s repeat the procedure in our right widget area in the footer. The code is identical except for the footer-menu as class name. First, delete the old piece of menu code, including its wrapping <ul>. Then add this line of code in its place:

footer.php:

<?php wp_nav_menu(array('theme_location' => 'main-menu', 'menu_class' => 'footer-menu')); ?>

If you refresh your site now, you should see the exact same menu items in your sidebar and your footer. The styling should be in order as well.

The best advantage is that, now this is done, it is very easy to add, edit, remove and organize your menu items using WordPress custom menu system. You don’t need to edit the theme files, and make sure that the sidebar and footer both have the exact same menu items.

WordPress Codex Function references:

Remember I mentioned earlier that it’s possible to use a WordPress widget to display the menu? Suppose you want to replace the default widgets in the footer and place the menu to the left, you can then use a widget to display your custom menu. The widget is called Custom Menu and allows you to choose which menu you want to display. Using a widget is a possibility but has the disadvantage that you can’t give the menu a class, thus making it hard to style with CSS.

This concludes Lesson 9 of the WordPress Theme Tutorial. Go to the next lesson, Related Posts, Dealing with Nested Loops, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2011/10/wordpress-theme-lesson-9-adding-support-for-custom-menu/feed/ 0 WordPress Theme Lesson 8: Post Thumbnails http://cappelendesign.no/2011/10/wordpress-theme-lesson-8-post-thumbnails/ http://cappelendesign.no/2011/10/wordpress-theme-lesson-8-post-thumbnails/#comments Wed, 12 Oct 2011 20:40:40 +0000 admin http://www.acornartwork.com/blog/?p=1654

In this lesson we’ll go through post thumbnails, a feature introduced in WordPress 2.9. A post thumbnail is an image chosen by the author as the representative image for a post. Having an image to each post makes the site more interesting to look at. Keep in mind that the post thumbnail is not a part of the post’s body content, so it will not appear unless you choose it to.

In our design we want a wide and quite narrow thumbnail above each post on our front page. We also want the same post thumbnail but smaller and square for our featured posts section (the slider we’ll create at the very top of the front page). In this lesson we’ll first add and define these new image sizes and then tell WordPress where to display them. Along the way we will also add some code to exclude images that appear in posts, as not to make the front page look like a mess.

First, a couple of things to note: The feature is generally referred to as post thumbnails, but when the author is to choose an image when editing a post, it will be referenced as “featured image”. And keep in mind that your web server needs the GD library installed in order to have WordPress make copies of images and resize them. You most probably already have this installed. But if you upload images and WordPress can’t seem to make any copies with different sizes, the GD library might not be installed.

First, in our functions.php we need a line adding theme support for post thumbnails, which enables the featured image box in Edit Post in WordPress admin. Then we add code for defining new image sizes, providing unique names and dimensions. Finally we edit our templates, telling WordPress where and which image size we want to display. At the very end of the lesson I’ve added an optional code which filters the_content(), removing all <img> tags, on the front page only. Having the wide post thumbnail and another image just below it (suppose the author has added an image at the beginning of the post) will not look very good.

Adding Support for and Inserting Post Thumbnails

First, we add the theme support for post thumbnails in our functions.php, and by doing so we enable the featured image selector in Edit Post in WordPress admin. Place this anywhere in the functions-file:

functions.php:

add_theme_support('post-thumbnails');

The Featured Image option in Edit Post

Save, go to WordPress admin and edit a post. Look to your right, below the Post tags which resides below Categories and the Publish box. Clicking on the link will take you to the well-known interface for uploading images or choosing images from the library. But for adding post thumbnail you are not to click the “Insert into Post” button.

The Featured Image link in Add Media

If you see to the right of the “Insert into Post” button, you will see a link “Use as featured image”. Whenever you choose a post thumbnail, this is what you click, not the “Insert into Post” button. The Image dialog box won’t close by itself when you click it (just click the X in the corner), but when you close it you will see a thumbnail of your chosen image inside the Featured image box, with an option to remove it.

Do not start uploading images just yet. As for now WordPress will make three copies of your uploaded images, the default Thumbnail, Medium and Large. We want to add a couple of more sizes, telling WordPress to create more copies with our desired heights and widths.

Adding New Custom Image Sizes

Adding a new custom image size is pretty simple, we call a WordPress function in our functions.php for each new image size, providing an unique name, the width and height as arguments. We will add two sizes, one for the front page and one for the featured posts section. Add these lines anywhere in our functions-file:

functions.php:

add_image_size('frontpage-thumbnail', 523, 105, TRUE);
add_image_size('featuredposts-thumbnail', 140, 100, TRUE);

The first parameter to add_image_size() is a chosen shorthand name of our image size, without spaces and no uppercase letters. Whenever we insert a post thumbnail in a template, we will refer to this name. The next two arguments define the width and height, respectively. The last parameter decides whether or not WordPress is allowed to crop the image to force the images to fit into the given dimensions.

With these two lines in your functions.php you can now upload images, and see that five copies are made, the three default Thumbnail, Medium and Large, and our two new sizes. If you already have a Library filled with images, there won’t exist copies in our two new sizes. For this you can use the Regenerate thumbnails plugin to create new copies of already uploaded images.

Displaying Post Thumbnails in Templates

Now that we’ve added the support, defined custom image sizes, and uploaded a least a couple of images for testing purposes, it’s time to tell WordPress to display them. For this we edit the template index.php, inserting the frontpage-thumbnail in each post. As we haven’t written our featured posts section yet, I will only show how you insert the post thumbnails at the front page.

Insert this line after the <h3> post title and before the <div> with the class postcontent:

index.php:

<?php if (has_post_thumbnail()) : ?><div class="postthumbnail"><?php the_post_thumbnail('frontpage-thumbnail'); ?></div><?php endif; ?>

What this line does is to first check whether or not the post has been assigned a post thumbnail. If it does, we insert a wrapping <div> and call the WordPress function the_post_thumbnail() to insert the image. As parameter to the_post_thumbnail() we provide the name of the size we want, in our case frontpage-thumbnail. And that’s it for displaying the post thumbnail!

Let’s add a small piece of CSS into our style.css to improve the look of the post thumbnail images:

style.css:

.post .postthumbnail { 
	border: 1px solid #697f9a;
	width: 515px;
	margin: 6px 0;
}

Save, refresh your front page and see that all posts that has a post thumbnail assigned to it, get a wide image after the title. The post thumbnail is only visible on your front page, not on single views or the other templates, such as the search results or archives. It’s up to you if you want to add post thumbnails to any of the other templates. Just copy the line we inserted into index.php and paste it in the desired template.

Our frontpage with post thumbnails

If your site already has a bunch of posts and you don’t want to edit each post and set a post thumbnail, there’s a plugin that can help you with that. The Auto post thumbnail plugin will generate a post thumbnail from the first image in your post. Keep in mind that you probably need to run the Regenerate thumbnails plugin in order to make copies of all images in the sizes we’ve defined here.

It’s starting to look good, doesn’t it? But if you’re like me, who like to use images in posts, and most often quite early in the post, it may look a little messy with the wide post thumbnail, and a image right below it. In our design it looks more tidy with text only and without any additional cluttering images. That’s why I’ve added a piece of code to exclude all images from the post content on the front page. It’s fully optional to add this piece of code, but it could prove useful to read it as this is the first WordPress filter I’m explaining in this tutorial. If you recall Lesson 1 this is the other kind of WordPress hooks.

WordPress Codex Function references:

Our First Filter: Exclude All Images in Posts at the Front Page

This optional piece of code hooks onto a WordPress filter, as opposed to actions. The method is similar as to what we’ve done with actions earlier; we write a function that modifies a piece of information returned by WordPress, hooks it onto hooks such as the_content(), the_title() or almost any function which returns or stores a piece of information in WordPress, and WordPress will automatically run our function when the situation appears. See a list of all available filters here.

We are to write a filter on the_content(), the function we’ve used in our templates and index.php to display the post content. Basically what we do is using a regular expression to find <img> tags and cut them out, but do so only on the front page. Otherwise all images are cut away from all templates, even single post views. It’s important to remember that we’ve used the_content() on basically every template, and filtering it will affect them all.

Writing a filter is similar to action hooks, we use add_filter() with the filter hook we want to hook this function onto as the first argument. But with filters we need to place arguments to our PHP functions, which is the piece(s) of information we are to modify. More importantly we must remember to return all values when we’re done. If we forget to return it, the filter we’ve hooked onto will return empty. In our case all calls to the_content() will return nothing, and that’s pretty disastrous!

functions.php:

/* Exclude images in the_content on home and frontpage */
function wpthemetutorial_image_content_filter($content) {
	if (is_home() || is_front_page()) {
		$content = preg_replace("/<img[^>]+\>/i", "", $content);
	}
	return $content;
}
add_filter('the_content', 'wpthemetutorial_image_content_filter', 11);

The the_content() requires us to add one parameter to our PHP function, the entire post content which we store in the PHP value $content. First, and importantly, we check if we are on the front page by checking the WordPress conditional tags is_home() and is_front_page(). If that’s the case we run a PHP regular expression replacing any <img> in the content with an empty string. Then we return the content, regardless of what have been done in this function. By using add_filter() we tell WordPress to run our function whenever WordPress runs the_content().

If you refresh your front page, it should still display post thumbnails, but no other images – not even smiley icons are displayed if you’ve enabled WordPress smileys.

WordPress Codex Function references:

This concludes Lesson 8 of the WordPress Theme Tutorial. Go to the next lesson, Adding Support for Custom Menus, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2011/10/wordpress-theme-lesson-8-post-thumbnails/feed/ 2 WordPress Theme Lesson 7: Defining Multiple Widget Areas and Default Wrappings http://cappelendesign.no/2011/10/wordpress-theme-lesson-7-defining-multiple-widget-areas-and-customizing-default-wrappings/ http://cappelendesign.no/2011/10/wordpress-theme-lesson-7-defining-multiple-widget-areas-and-customizing-default-wrappings/#comments Wed, 12 Oct 2011 20:20:29 +0000 admin http://www.acornartwork.com/blog/?p=1608

In this lesson we’ll dig further into widgets by adding multiple widget areas and further customizing them. We are to add three widget areas in the footer, and another widget area in our sidebar. By adding two widget areas in the sidebar, one above and one below the ads element, we give the user flexibility in organizing the sidebar. Especially if the ad element are to be hardcoded in the sidebar.

Defining multiple widget areas require us to write a little more code since we need to identify each area with a name and an ID. At the same time we will also define which wrappings should be used around and in all widgets that are placed in the areas. In the previous lesson when we tried to style widgets in our widget area in the sidebar, we saw that WordPress automatically wraps all widgets inside <li> elements. By WordPress’s standards the sidebar should be an unordered list, and each widget a list item with a yet another list inside for its elements. I myself prefer wrapping widgets in <div>s, to skip the messy work of styling nested lists.

So we need to modify and add code to the templates where our widget areas should appear, in our case the sidebar.php and footer.php, associating each with the registering we do in our functions.php.

We start by opening our functions.php. The file should contain a previously written line of code which defines our single widget area in the sidebar:

if (function_exists('register_sidebar')) register_sidebar();

It’s nice and neat, but the function register_sidebar() can do much more. We can add arguments defining its name and HTML wrappings.

Delete this line, and let’s add something better instead.

Defining Multiple Widget Areas

For defining multiple widget areas, we simply call register_sidebar() repeatedly for each widget area we want to add. But keep in mind that the names we give to each widget area only affects the names appearing in WordPress admin » Appearance » Widgets. There are no actual relation to the widget area definition and the dynamic_sidebar() calls we are to write in our templates (which defines where our widget areas are). So how do we know which definition goes where? Starting at 1, each register_sidebar() function call are given the ID of 1, incrementing 1 by each register_sidebar() call. In our theme we will get widget areas ID-ed 1 to 5. Then in our templates, we use these numbers as parameters to the dynamic_sidebar(). Still with me? It’s really not that complicated, but it may be easier to understand if you see the code in action.

Before I show you the code I want to also arrange all five register_sidebar() function calls inside a neat function. But as functions are not run automatically, we need WordPress to run it for us on a specific occasion. For this we hook our function onto the hook where WordPress initializes widgets. If you’re unsure what I mean by hooks, read the section about hooks in Lesson 1.

To sum up, we are doing the following: We call register_sidebar() five times, in each call we give the widget area a name and define the wrappings we want around the widget and around the widget title. All five calls are gathered inside a PHP function. We then tell WordPress that every time WordPress initializes widgets, this function is to be run.

If you have not already done so, delete the single line of register_sidebar(), leaving our functions-file empty (except for the PHP tag). Our full functions.php should look like:

functions.php:

<?php 
/* Register widget areas */
function wpthemetutorial_widgets_init() {
	
	// #1 - first area in sidebar.php
	if ( function_exists('register_sidebar') )
		register_sidebar(array(
			'name' => 'Sidebar - Above advertise area',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h2>',
			'before_widget' => '<div class="sidebar-box">',
			'after_widget' => '</div>',
	));
	
	// #2 - second area in sidebar.php
	if ( function_exists('register_sidebar') )
		register_sidebar(array(
			'name' => 'Sidebar - Below advertise area',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h2>',
			'before_widget' => '<div class="sidebar-box">',
			'after_widget' => '</div>',
	));
	
	// #3 - left area in footer
	if ( function_exists('register_sidebar') )
		register_sidebar(array(
			'name' => 'Footer - Left column',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h2>',
			'before_widget' => '<div class="footer-box">',
			'after_widget' => '</div>',
	));
	
	// #4 - middle area in footer
	if ( function_exists('register_sidebar') )
		register_sidebar(array(
			'name' => 'Footer - Middle column',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h2>',
			'before_widget' => '<div class="footer-box">',
			'after_widget' => '</div>',
	));
	
	// #5 - right area in footer
	if ( function_exists('register_sidebar') )
		register_sidebar(array(
			'name' => 'Footer - Right column',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h2>',
			'before_widget' => '<div class="footer-box">',
			'after_widget' => '</div>',
	));
}
add_action('widgets_init', 'wpthemetutorial_widgets_init');

Here you see the five register_sidebar() calls gathered in a function named wpthemetutorial_widgets_init().

Tip: You are free to give your functions (almost) any name you want, but you must make sure that all your functions have unique names – not only in your theme, but all over WordPress. If WordPress or any active plugin have the same function name as one in your theme, your theme will not work. This is why it’s a good idea to always start all your functions with a short version of your theme name, in this case wpthemetutorial.

As for the parameter array in each register_sidebar(), we use name to define the name to be displayed on each area when we are at Widgets in WordPress admin. The before_title and after_title parameters define the wrappings around the widget title, and before_widget and after_widget defines the widget wrappings. When we use any of these four parameters, we overwrite WordPress default values. We’ll now get <div>s instead of WordPress’ default <li>s. You may have noticed that I’ve chosen to use a different class name in the footer widget areas, footer-box instead of sidebar-box, in order to specifically target footer widgets with CSS.

The very last line, the function call add_action(), is the “hooking onto actions”-function. It tells WordPress to hook onto the hook given as the first parameter, in our case widgets_init, and run the function given as second parameter, which is our wpthemetutorial_widgets_init.

Our widget areas in admin

If you go to WordPress admin » Appearance » Widgets you will see that there are five widget areas available we can insert and organize widgets into. Their names should correspond to the parameter name we defined in each register_sidebar().

But we haven’t yet defined where each widget area should appear. Our next step is to edit sidebar.php and footer.php and call dynamic_sidebar() with the correct ID number as parameter. Let’s begin with the sidebar, where we already have one dynamic_sidebar function call.

WordPress Codex Function references:

Placing Widget Areas in our Templates

If you take a look at the order of the register_sidebar() in our functions.php above, the first one is the top sidebar widget area, which means ID 1. The last one, the right footer widget area, has the ID of 5. We will use these IDs to identify which widget area is which in our templates.

The Sidebar

Open sidebar.php and find the dynamic_sidebar() function call. To make the widget area work coherently with our new definitions, all we need to do is just to add “1″ as an argument to the function call. This is our dynamic_sidebar() after we’ve added the argument:

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1)) : else : ?>

Save, place a widget inside this widget area in WordPress admin and see that it appears in your sidebar, just like it did before, but it should now come in our chosen wrappings and should by styled correctly. Awesome! Let’s define the other widget area in our sidebar.

Basically copy everything inside and including the lines with dynamic_sidebar() and endif and paste it right below. Change the parameter in this second piece into “2″ which corresponds to our second register_sidebar() call. It’s also preferable to change the content inside the else portion, as to not display the same widgets two times if there are no widgets placed in Wordpres admin. I’ve just left the categories widget in the first and the bookmark widget in the second widget area.

After the hard-coded search and share-element and menu, and before we close the sidebar <div>, this is what we have:

sidebar.php:

...
<!-- First widget area (before ads) -->
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1)) : else : ?>
<div class="sidebar-box">
	<h2 class="widgettitle">Categories</h2>
	<ul>
		<?php wp_list_categories('sort_column=name&optioncount=0&hierarchical=0&title_li='); ?>
	</ul>
</div>
<?php endif; ?>

<div id="sidebar-ads"></div>
				
<!-- Second widget area (below ads) -->
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(2)) : else : ?>
<div class="sidebar-box">
	<h2 class="widgettitle">Blogroll</h2>
	<ul>
		<?php wp_list_bookmarks('title_li=&categorize=0&category=2&before=<li>&after=</li>&show_images=0&show_description=0&orderby=name'); ?>
	</ul>
</div>
<?php endif; ?>
...

I’ve placed an empty <div> from which ads can be placed into. If you’re planning to use ads as a widget this isn’t necessary.

The Footer

Now we simply repeat what we’ve done three times in our footer.php, using the number 3 through 5.

From our initial theme design I wanted the left widget to be a text and photo introducing the blog or author, the middle a list of most popular posts, and the right the main menu. We write these inside the else clause so it is displayed if the user hasn’t placed any widgets. The reason we don’t hard-code the footer is because we want to give the blogger the possibility to change the content and reorganize the footer from the WordPress admin interface instead of editing the theme files. But should the user choose not to change anything, the default should work just fine.

Our full footer.php should look like:

footer.php:

				<div style="clear:both;"></div>
			</div> <!-- end content-wrapper-->
		</div> <!-- end top-container-->
		
		<div id="bottom-container">
			<div id="footer">
			
				<!-- Left column widget area -->
	            		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(3)) : else : ?>
				<div class="footer-box">
					<h2 class="widgettitle">Who am I?</h2>
					<span class="footer-gravatar"><?php echo get_avatar(1, 50); ?></span>
					<p>Hi, I'm Name Lastname, the woman behind this site. Dolor sit amet. Lorem Ipsum dolor sit amet consectetur adipiscing elit. Pellentesque habitant morbi tristique. Phasellus vehicula magna fringilla.</p>
				</div>
				<?php endif; ?>
				
				<!-- Middle column widget area -->
	            		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(4)) : else : ?>
				<div class="footer-box">
					<h2 class="widgettitle">Recent posts</h2>
					<ul>
						<?php
						$postslist = get_posts('posts_per_page=5');
						foreach ($postslist as $post) :  setup_postdata($post); ?>
						<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
						<?php endforeach; ?>
					</ul>
				</div>
				<?php endif; ?>
				
				<!-- Right column widget area -->
	            		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(5)) : else : ?>
				<div class="footer-box">
					<h2 class="widgettitle">Main menu</h2>
					<ul class="sidebar-menu">
						<?php wp_list_pages('title_li=&depth=-1'); ?>
					</ul>
					<div style="clear:both;"></div>
				</div>
				<?php endif; ?>
			
			</div>
		</div>
		<?php wp_footer(); ?>
	</body>
</html>

In our first dynamic_sidebar() call with the ID 3, we get the admin’s avatar (the default admin user always has the ID of 1 in all WordPress sites), since I’m assuming this theme is to be used on a site with only one author. If you want you can insert any other image. The content of this default widget isn’t really anything useful unless you replace the dummy text with something of your own.

The second widget area with the ID 4, we’ve added a piece of code to fetch a list of recent posts. The WordPress function get_posts() with 5 as argument to posts_per_page returns five post objects, which we loop through. If you recall the Loop which we’ve used in all of our templates, we use the_post() to set up the post object in order to use the simpler functions the_title(), the_permalink() and so on to get the post information. We can’t use the_post() here in our footer to set up the post object because it will conflict with the the_post() in our content. Instead we use setup_postdata() which does the same as the_post() but will not conflict with our other Loop. In later lessons I will explain the Loop and custom queries closer.

The third widget area with the ID 5, we do what we did in our hard-coded menu element in our sidebar. We fetch a list of all WordPress pages with wp_list_pages().

If you refresh your site and look at your footer, you should see all widgets in action. Check and see if they work! However they will appear beneath each other, because we haven’t added any styling to footer widgets yet. Let’s do that.

WordPress Codex Function references:

Styling the footer widgets

In the previous lesson we styled the sidebar and the widgets with the class sidebar-box, but we haven’t added any styling for the class footer-box which wrap all of our widgets in our footer. Let’s add some styling in our style.css:

style.css:

/*** FOOTER ***/
#footer { color: #dee9f5; }
#footer a { color: #85bce7; }
#footer a:hover { color: #a7d4f7; }

#footer .footer-box { 
	width: 225px;
	float: left; 
	margin-right: 50px;
}
#footer .footer-box:last-child { margin: 0; }

#footer h2.widgettitle { 
	font-size: 16px; 
	font-family: Arial, Verdana, sans-serif;
	padding-bottom: 5px; 
}
#footer .footer-gravatar { 
	float: left; 
	margin: 5px 10px 5px 0;
}
#footer p { line-height: 17px; }

#footer ul {
	list-style-type: none;
	line-height: 16px;
	padding-top: 3px;
}
#footer li {
	background: url("images/dot-space-invader-light.png") no-repeat top left;
	padding-left: 17px; 
	padding-bottom: 5px;
}
/* Menu in footer */
#footer ul.footer-menu li {
	background: none; padding-left: 0; /* Remove defaults */
	float: left;
	width: 80px;
	margin-right: 30px;
}

This CSS code takes care of positioning the three columns next to each other, styles the widgets and some additional styling for our default fallback widgets – such as the menu and positioning the avatar. You should already have the image dot-space-invader-light.png in your images folder, which was included in the image zip provided in the previous lesson.

Our footer with three widgets

Save, refresh, scroll to the bottom and take a look at our footer. If you have used the same code and styling, and there are no widgets placed in any of the three footer widget areas, this is what we should have now. If you place widgets into one of the footer widget areas it should come in the right wrappings and style nicely.

This concludes Lesson 7 of the WordPress Theme Tutorial. Go to the next lesson, Post Thumbnails, or back to the tutorial’s Table of Contents.

]]> http://cappelendesign.no/2011/10/wordpress-theme-lesson-7-defining-multiple-widget-areas-and-customizing-default-wrappings/feed/ 1