This is where the Menu area came in to play; although it didn’t pull in the links automatically it was a quick solution to my problem.

Firstly I styled up my links as normal and hard coded in the header titles for each group.

Then in WordPress I went to the Menu area and added several menus for each different category. All you need to do then is select the pages from the sidebar and it’s a simple as that, you can drag each menu item around so they are in the position you need them in.

The last bit is to add the code to pull in your menu items, in replacement of the links you had previously added.

<p class="footer-header" >Category Name</p>
<?php wp_nav_menu(array('menu' => 'menuname1')); ?>

To be able to use featured images you will need to activate it in the functions.php, to do this you can follow this blog, and just add the first snippet of code provided.

Featured images can be used when you add a post or page and can be fed through as a thumbnail next to the excerpt of your post. On occasions you may not want to use an image, and in this instance we would want to put a placeholder image rather than having a blank space.

So first we need to include the php snippet which pulls in the image.

<img src="<?php the_field('small_image_2'); ?>" alt="<?php the_title(); ?>" />

To add a placeholder image we just need to add a if statement.

   <?php if (get_field('small_image_2')) : ?>
          <img src="<?php the_field('small_image_2'); ?>" alt="" />
          <?php else : ?>
          <img src="images/placeholder-small.jpg" width="110" height="110" alt="<?php the_title(); ?>" />
          <?php endif; ?>

This php statement is first checking to see if there is an image attached to the post and the else statement then calls in the placeholder image if there hasn’t been an image attached.

<form role="search" method="get" id="searchform" action="">
// Form Code
</form>

If you require a valid XHTML document you will need to remove this attribute by editing the get_search_form() function in the general-template.php core file. However, if you update your WordPress installation this file may get overridden. A safer method is to add the following code to your themes functions.php file.

function valid_search_form ($form) {
    return str_replace('role="search" ', '', $form);
}
add_filter('get_search_form', 'valid_search_form');

What we have done here is created a new function called valid_search_form() which accepts one value. The function does a simple string replace that removes role=”search” from the $form variable and replaces it with an empty string.

In order for this to work the function needs to be triggered. To do this we have used the ‘add_filter’ hook which will force the search widget to be passed through the function valid_search_form ($form) before being displayed the users.

Save and upload functions.php – Now when you reload your website design and view the source code – the widget should look something like:

<form method="get" id="searchform" action="">
// Form Code
</form>

Resubmit your WordPress page to the validator and hopefully you should see a nice green bar saying ‘Passed’. I hope you find this wordpress tip useful.

Users like to search, so when creating a WordPress managed website, one of the first things I consider is the placement, design, and functionality of the search.

By default, WordPress includes a handy template tag that will produce a simple but useful looking search input.

However, there’s one problem… WordPress searching isn’t very good. In fact, it’s actually really bad.

The default system in place doesn’t find the most relevant posts or pages first. Instead, it displays/orders them by the date they were uploaded (most recent first). For example, you may have a full page dedicated to the topic of the Xbox 360. However, a search query for “Xbox 360″ could print back multiple results of PS3 article posts first, as long they were uploaded more recently, and have at least 1 mention of the Xbox 360 hidden somewhere in the post. Not user friendly in the slightest.

So, how do you go about fixing this?

After looking into the matter, I found a real gem of a plugin. Introducing…

Relevanssi

This can very easily be installed to a new WordPress build, or an existing site that’s already packed with posts and pages. Basically, I’m recommending everyone and anyone to use it.

Features include…

• Search results are ordered by relevance, not just date.
• Search terms can be highlighted in the results, letting the user know if the page/post is exactly what they’re after.
• Custom post types, comments, taxonomies, etc, are now all searchable.
• “Did you mean” suggestions can be added.
• Search results can be cached for better peformance.

…the list goes on and on. Check out the plugin’s features and benefits page.

There is also a premium version for those who need extension more functionality.

Hopefully this fantastic plugin can help some of you out. If you have any queries feel free to ask.

<ul>
        <?php wp_list_pages('title_li=); ?>
</ul>

This will print something like:

<ul>
         <li class="page_item page-item-1"><a href="http://www.mydomain.co.uk/" title="Home">Home</a></li>
         <li class="page_item page-item-2"><a href="http://www.mydomain.co.uk/about" title="About">About</a></li>
         … and so on..
</ul>

As you can see the href attribute contains the full url. This is not seo friendly and would be better if it were /pagename. The solution to this is to use the php string replace function. Copy and paste the following php code replacing the example domain with your full domain name.

<ul>
	<?php
	$clean_page_list = wp_list_pages('echo=0&title_li=');
	$clean_page_list = str_replace('http://www.mydomain.co.uk','',$clean_page_list);
	echo $clean_page_list;
	?>
</ul>

As you can see from the code above, I passed in the argument ‘echo=0′. This is important in order to assign the wp_list_pages() function to a variable. This is because wp_list_pages() echoes the result by default, therefore, putting ‘echo=0′ means it will return the result as a string, rather than echoing it.

Now navigate to your page and view the source code. You should notice that the html looks something like the below:

<ul>
         <li class="page_item page-item-1"><a href="/" title="Home">Home</a></li>
         <li class="page_item page-item-2"><a href="/about" title="About">About</a></li>
         … and so on..
</ul>

This is a lot tidier and more SEO friendly. You could go one step further and replace the li classes but I will leave that to you guys.

Naturally, when building a website CMS around WordPress, you want to make everything as dynamic as possible, meaning the website can be easily managed by the admin. If they are looking to work with the website page structure, add new pages, or remove some, then it’s vital that your navigation layout is fully dynamic, virtually unbreakable, and easy to use. Here’s a handy guide to help you achieve this…

Dynamically list pages

Instead of hard coding in direct links to your pages, it is better practise to let WordPress do it for you. The following template tag and HTML…

<ul id="navigation">
<?php wp_list_pages('title_li='); ?>
</ul>

…will list all the pages on your site, with an ID for easily styling. The navigation title that WordPress adds by default is also removed.

Page Management

Next I’ll show you an example of a Page management backend. Often people forget to utilise the power of sub pages.

To improve page management – I recommend the following two plugins…

Simple Page Ordering – The default WordPress numbered ordering system is pretty… bad. After installing this plugin, you’ll be able to reorder your pages using a drag and drop interface. Nice and handy.

Exclude Pages – This plugin will allow you to choose which pages are displayed via WordPress template tags which list pages. The page will still be accessible, but won’t be included in the navigation.

Styling the Navigation

So, your navigation should now be being brought out on your WordPress website – naturally though it’s gonna need some styling up. Some drop down functionality also needs to be added for the subpages.

With thanks to Narga for providing an excellent jQuery base, here’s the Javascript I recommend you add to your header.

<script type="text/javascript">
jQuery(document).ready(function() {
//Dropdown Menu
    jQuery("ul#navigation > li > ul").css({display: "none"}); // Opera Fix
	jQuery("ul#navigation li a").hover(function() { //When trigger is clicked...

        // Dropdown Effect
        jQuery(this).parent().find("ul.children").show(0); // Drop down the subnav on hover
		jQuery(this).parent().find("ul#navigation li").addClass("hover"); //Drop down the subnav on hover
        jQuery(this).parent().hover(function() {
        }, function(){
            jQuery(this).parent().find("ul.children").hide(0); //When the mouse hovers out of the subnav, move it back up
        });
    });
})
</script>

Note, this Javascript won’t support 3rd level pages, but could easily be modified to do so.

And here’s the CSS to get the drop downs working. Obviously you’ll need to add some more of your own styling to make it look pretty.

#navigation li ul.children 						{ z-index: 9999; list-style: none outside none; position: absolute; left: 0; top: 47px; margin: 0; padding: 0; display: none; float: left; }
#navigation li ul.children li 					{ margin: 0; padding: 0; clear: both; }
#navigation li ul.children li a 					{ float: left; }
#navigation li ul.children li a:hover				{  }

With some of my own styling, I produced a menu that looks something like this…

Hopefully this post proves to be fairly useful… if you have any questions feel free to add a comment below!

So, let’s begin:

Step One – Install plugins

First of all you will need to install the attachments plugin, as well as a lightbox plugin.

1. Navigate to http://www.you-site.com/wp-admin
2. Log in and click the Plugins tab
3. Click add new and search for “Attachments“
4. It should be the first result, but if not, it was created by Jonathan Christopher
5. Click Install now, and then Activate Plugin

The attachments plugin is now installed. I will explain how to use it and where to find it shortly.

The next step is to install a lightbox plugin, alternatively, you can manually set up a lightbox script. For ease of explanation, I will install the Lightbox 2 plugin.

Follow the instructions above but install Lightbox 2 by Lokesh Dhakar. This plugin has its own settings, but for now we will just use the default settings.

Go forth, to step 2!

Step Two – Create Your Gallery Page

Now we need a page. In order to do this you will need to follow these steps:

1. Navigate to http://www.you-site.com/wp-admin
2. Click Pages, and then Add New
3. All you need to do is give your page a title and publish it. We will call this page Gallery

By calling our page Gallery, a slug of “gallery” is created. This means we can create a custom template in our theme folder (I’m using TwentyTen), called page-gallery.php. Our gallery page will default to use this page template, over the standard page.php in our theme folder.

To create the page-gallery.php page, do the following:

1. Open your theme folder via FTP.
2. Duplicate page.php and rename it page-gallery.php
3. Done!

So, we’ve installed our plugins, created a WordPress page and given said page its own custom template. We’re doing very well, very well indeed!

Step Three – Add our Image Sizes

You will now need to add two image sizes. To do this, follow these steps:

1. Open functions.php from your theme folder
2. Scroll to the bottom, and before the closing php tag (?>) (or just at the end of the document if there isn’t one) add the following lines:

   add_image_size('gallery-thumb', 100, 100, true);
   add_image_size('gallery-full', 800, 9999);

3. This will add two new thumbnail sizes. The first is a cropped 100px x 100px square. The second is 800px wide and 9999px tall; this means it will just have a max-width of 800px, but no real height value.
4. Save your functions.php file and upload it.

Step Four – Add some Images to Our Gallery Page

Now, the fun part (one of the fun parts, anyway). Navigate to your Gallery Page in the WordPress admin area. Once you have it open, you will notice there is a new “postbox”, called Attachments.

There is only button available, click it! You will be greeted with a familiar sight – but don’t be fooled, it is slightly different.

Click Select Files and choose the images you want to upload. You can select more than one at a time. Click Open and wait for the images to upload and “crunch”.

Once the images are uploaded, you will be able to click Show or Hide. After clicking Show, you will see the following options:

As you can see, there are two fields – Title and Caption. Both of these can be used an brought out in our gallery, but for this particular tutorial I will only be using the title field. Enter a title for your image; this will be shown in the lightbox once you click on the thumbnail in the gallery.

Once you have entered a title, click Attach. There aren’t any confirmations that it has attached, but it will have happened in the background. Once you have attached all the images you want, you can just click the “x”, top right.

Your Attachments postbox should now be filled with the images you have just uploaded and attached.

I am assuming you have more than one image in your gallery. You will notice that next to each attachment (on the left), there are three grey lines – using these you can click, hold and drag, to re-order your gallery items.

Step Five – Create the loop

Now that we have our images in place, we will need to loop through them and spit them out in our page-gallery.php template.

Open page-gallery.php. As it is a custom template I find it better to have the loop in the template, rather than using get_template_part. So if needed, replace:

<?php
/* Run the loop to output the page.
 * If you want to overload this in a child theme then include a file
 * called loop-page.php and that will be used instead.
 */
get_template_part( 'loop', 'page' );
?>

With:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php if ( is_front_page() ) { ?>
			<h2 class="entry-title"><?php the_title(); ?></h2>
		<?php } else { ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
		<?php } ?>

		<div class="entry-content">
			<?php the_content(); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
			<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
		</div><!-- .entry-content -->
	</div><!-- #post-## -->

	<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

Now we will need to add our attachments loop. Just above:

<?php comments_template( '', true ); ?>

add the following code:

<ul id="gallery">
    <?php
      $attachments = attachments_get_attachments();
      $total_attachments = count($attachments);
      if( $total_attachments > 0 )
      {
        for ($i=0; $i < $total_attachments; $i++)
        {
          $url =  wp_get_attachment_image( $attachments[$i]['id'], 'gallery-thumb');
          $lrgurl = wp_get_attachment_image_src( $attachments[$i]['id'], 'gallery-full' );
          echo '<li><a href="'.$lrgurl[0].'" rel="lightbox[our-gallery]" title="'.$attachments[$i]['title'].'">' . $url . '</a></li>';
        }
      }
    ?>
</ul>

So now your page-gallery.php loop area will look like this:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php if ( is_front_page() ) { ?>
			<h2 class="entry-title"><?php the_title(); ?></h2>
		<?php } else { ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
		<?php } ?>

		<div class="entry-content">
			<?php the_content(); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
			<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
		</div><!-- .entry-content -->
	</div><!-- #post-## -->

	<ul id="gallery">
		<?php
		  $attachments = attachments_get_attachments();
		  $total_attachments = count($attachments);
		  if( $total_attachments > 0 )
		  {
			for ($i=0; $i < $total_attachments; $i++)
			{
			  $url =  wp_get_attachment_image( $attachments[$i]['id'], 'gallery-thumb');
			  $lrgurl = wp_get_attachment_image_src( $attachments[$i]['id'], 'gallery-full' );
			  echo '<li><a href="'.$lrgurl[0].'" rel="lightbox[our-gallery]" title="'.$attachments[$i]['title'].'">' . $url . '</a></li>';
			}
		  }
		?>
	</ul>

	<?php comments_template( '', true ); ?>

<?php endwhile; ?>

The above code will loop through all the attachments on your Gallery page, and spit all the thumbnails out in list items. Each thumbnail is clickable and has a rel attribut of lightbox[our-gallery]. This rel attribute defines a set of images. Upload the file and use your web browser to navigate to http://www.your-domain.com/gallery, you should see a list of the image thumbnails that you added earlier. To quickly style it up, add the following CSS to your style.css file in your theme folder:

#gallery {
    margin:0 -10px;
    padding:0;
    overflow:hidden;
    width:360px;
}

#gallery li {
    width:100px;
    float:left;
    display:inline;
    height:100px;
    margin:8px;
    padding:0;
    -moz-box-shadow: 0 0 5px #888888; /* Firefox */
    -webkit-box-shadow: 0 0 5px #888888; /* Safari, Chrome */
    box-shadow: 0 0 5px #888888; /* CSS3 */
    border: 2px solid #FFFFFF;
}

That’s it! When you click one of the thumbnails now, it should open in a lightbox which you can then use to navigate through the rest of your images. You can also go into the lightbox settings and change the theme of the lightbox.

Conclusion

So, you’ve created your own gallery! The great thing about this is that you can completely customise this gallery, specific to your website. The attachments plugin comes with a variety of data that you can bring back, take a look at the available tags in this loop:

<?php
  if( function_exists( 'attachments_get_attachments' ) )
  {
    $attachments = attachments_get_attachments();
    $total_attachments = count( $attachments );
    if( $total_attachments ) : ?>
      <ul>
      <?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
        <li><?php echo $attachments[$i]['title']; ?></li>
        <li><?php echo $attachments[$i]['caption']; ?></li>
        <li><?php echo $attachments[$i]['id']; ?></li>
        <li><?php echo $attachments[$i]['location']; ?></li>
        <li><?php echo $attachments[$i]['mime']; ?></li>
      <?php endfor; ?>
      </ul>
    <?php endif; ?>
<?php } ?>

As you can see, you can bring out the title, caption, image ID, image location, and the mime type. There is a lot you can do with all that data!

Anyway, I hope you enjoyed it – let me know how you get on, and link me to some galleries that you’ve made using this tutorial.

Someone seems to have edited the codex page for WordPress’ query_posts function. I don’t know about you guys, but that was one of the most common pages I looked at on the WordPress Codex, and the new page seems to have stripped out all the useful parameters. As such, I have recompiled the majority of them here by visiting the Wayback Machine. If anyone has any issues with this, do let me know.

While it is always worth having the knowledge of building a theme from the ground up (yes, it is worth trying this, it’s the best way of learning what each WordPress function/template tag does), it’s generally accepted that using a theme framework is the best way of starting your new WordPress project.

There are a wide variety of different frameworks out there – notable frameworks include the default WordPress theme TwentyTen, the awesome blank canvas from Elliot Jay Stocks known as Starkers, and the powerful Hybrid Core.

Some developers prefer to work with a blank framework (like Starkers), or use frameworks with built in “bespoke” functionality (like Hybrid) that may suit a particular project. For the majority of my websites, I’ll begin with a blank canvas framework, with my theme of choice being Starkers.

However, with the web now ready to accept HTML5 a whole lot more, I’ve recently been on the hunt for HTML5 frameworks. Here’s a round up of the best (in no particular order)…

1. Twenty Ten Five

Despite including a HTML5 doctype, Twenty Ten doesn’t offer much HTML5 markup. Richard Shephard has made the effort to change that. Check out Twenty Ten Five for a fully HTML5 developed version of the Twenty Ten theme we know and love.

2. HTML5 Reset (WordPress)

HTML5 Reset is a clever collection of files, perfect for starting new HTML5 projects. A WordPress theme/framework is also available. It makes of awesome HTML5 markup (as you’d expect), browser specific css (e.g. “.ie body”), and both Modernizr and Analytics are built in. Sound good?

3. Roots

The “Roots” theme offers some lovely clean HTML5 microformat markup, a Boilerprint base, and also some cool customisation with the 960 grid system.

4. Starkers (HTML5 Version)

Like Twenty Ten, Starkers includes a HTML5 doctype, but no real HTML5 markup. Nathan Staines has taken the best blank canvas around, and introduced plenty of HTML5 goodness.

5. Whiteboard

Probably my personal favourite at the moment… The Whiteboard framework’s biggest feature is it’s fully responsive layout (perfect for mobile and tablet viewing). However, it’s HTML5 markup isn’t the best, and you may find yourself redoing a fair bit of code. Your choice!

6. Bones

*Reader Recommendation

Recommended by JSEL in the comments below, this is a development theme that has somehow escaped me! Upon inspection, it looks pretty amazing. It’s been built with HTML5 boilerplate, has 960 grid compatibility, built in functions and post types have been included, and the HTML5 markup looks very tidy. I’ll be trying it out…

Conclusion

As you all know, I’m a big believer in HTML5, so in terms of WordPress development, these frameworks and themes are what I’m switching my attention to. If you haven’t had much experience with HTML5, I recommend you check out my previous HTML5 Template Building blog, before working with the markup in WordPress!

1. CMS Press

CMS Press is a really good plugin that allows you to create custom post types with ease. In under 5 minutes you could have set up a variety of custom post types with a lot of options!

The great thing about this plugin is it allows you to choose the permalink paths for each custom post – just make sure you tell your custom post type to be publicly queryable.

Get CMS Press »

2. Verve Meta Boxes

Verve Meta Boxes goes hand in hand with CMS Press on almost all WordPress sites I build. As long as your custom post type has custom options enabled, then you can add an array of meta boxes to each custom post type. This allows you to create your own input fields, drop down options, check boxes, file uploads and more – and the final result is truly user friendly!

Get Verve Meta Boxes »

3. All in One SEO Pack

This plugin is great for optimising your WordPress website. It has a huge amount of options, but offers a lot of great SEO techniques by just using the default settings.

Get All in One SEO Pack »

4. Admin Menu Editor

This little plugin allows you to completely modify the sidebar menu in your WordPress admin panel. You can add new items, dividers, edit existing items, change icons, change permissions and much more! Just get it.

Get Admin Menu Editor »

5. Shareaholic

I’m sure everyone has seen this before, but what you probably don’t know is the amount of information it offers you in the back-end. You can view stats to see how many people have used the social links – it is a great tool for discovering your most interesting content.

Get Shareaholic »

6. Contact Form 7

Contact form 7 is an awesome contact form plugin for WordPress. It is really simple to install and use and offers some pretty nice jQuery validation (once you style it up properly!)

Get Contact Form 7 »

7. Really Simple Captcha

If you are using contact form 7, then you will most definitely need to try out the Really Simple Captcha plugin. This adds a 4 letter captcha image to your contact form, that you can style in a variety of ways; including, background colour, foreground colour and size.

Get Really Simple Captcha »

8. Attachments

The attachments plugin is truly great. It allows you to add attachments to any post type, whether you are looking to attach an image, PDF, or video – this plugin seems to do it all!

I have found it is a great way of creating a simple, per-page, image gallery system.

Get Attachments »

9. Google XML Sitemap

As I am sure you have gathered, this plugin creates an XML sitemap of your site, which is then submitted to the major search engines, including Google. It makes managing your sitemap really simple – so it is a must have.

Get Google XML Sitemap »

10. Regenerate Thumbnails

I’ve come across this problem many times before; you add a new thumbnail size to your WordPress site, only to find your existing thumbnails don’t seem to pick up the new size. This is where the Regenerate Thumbnails plugin comes in use! With the click of a button it will regenerate all your thumbnail images, and create them in all the different sizes you have activated in your functions.php file.

Get Regenerate Thumbnails »

Bonus Plugin! My FTP

One more – My FTP. This plugin acts as an FTP client, to be used through WordPress’ back-end. It takes on the owner permissions of the server, rather than a normal FTP user, and can often allow you to delete or edit files that can’t be accessed as a normal FTP user.

Get My FTP »