This is the first article in our new three-part WordPress series. I want to share with you some hacks that i found to be very useful when i was working on the redesign of Noupe and during the design of my other site Devsnippets. Throughout this article, we’ll be focus on many WordPress Theme hacks, ideas, tips and useful tutorials you need to have ready in hand when developing WordPress websites.

You might be interested to check out our previous four part series, "Powerful guide to master Your WordPress Theme

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Using Custom Fields to Display Post Thumbnails

One of the most interesting features in WordPress is using Custom Fields, which can turn your WordPress blog into a fully customizable CMS website. I use custom fields to create image thumbnail for each post here on Noupe and on Devsnippets as well and display the thumbnails on the home page and the Archive page.

Follow the steps below and you will get it ready

1. You need to be able to upload images to your server in order to do this. You can do this using your FTP Client or any WordPress plugins to help you upload your images through the admin area.
2. Open a new post and scroll all the way down to the bottom where it says Custom Fields. Click on the plus button to expand it.
3. Enter the word “image_thumb” in the “key” field, and enter the fill path of the image that you uploaded in the “Value” field.
4. Do what you usually do in every post: add title, post text, choose a category and publish.
5. Now open your index.php file that is in your current theme folder, search for this line:

   <?php the_content('Read the rest of this entry &raquo;'); ?>

6. Add the following code above that line

   <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
   <img src="<?php $values = get_post_custom_values("image_thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
   </a>
   

Other great Solutions

• WordPress Custom Fields: Adding Images To Posts- This tutorial will explain how to add images to your posts using WordPress custom fields.

Avoiding Duplicate Content

Duplicate content refers to two or more web pages that have the same, or almost the same, content. We must avoid duplicate content to not get penalized by search engines. But sometimes we need to show two (or more) lists of posts on one page, we usually do this by using Multiple Loops (one standard loop and one from a certain category). This is done when you want to feature not only the very latest post written, but also posts from a certain category.

<?php $my_query = new WP_Query('category_name=featured&showposts=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;?>
    <!-- Do stuff... -->
  <?php endwhile; ?>
    <!-- Do other stuff... -->
  <?php if (have_posts()) : while (have_posts()) : the_post();
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
   <!-- Do stuff... -->
  <?php endwhile; endif; ?>

Other Solutions

• How To: Avoid Duplicate Posts, shows how to avoid duplicating multiple posts instead of single post.
• Reducing Duplicate Content on WordPress Blogs
• Duplicate Content Cure Plugin for Wordpress, it is an effective SEO plugin that prevents search engines from indexing wordpress pages that contain duplicate content, like archives and category pages. It does this by adding the noindex,follow meta tag on the problem pages.

  <meta name="robots"content="noindex,follow">
  

• Two tips to avoid Duplicate Content, Robots.txt or Meta Robots WordPress Plugin.

Login Box in your sidebar

When i was designing DevSnippets, i wanted the users to easily login through the front page and skip the login page. Many solutions are out there and i found a good one at WPdesigner, i will add the code here just in case we don’t find it in the future.

                <li>
		<?php global $user_ID, $user_identity, $user_level ?>
		<?php if ( $user_ID ) : ?>
		<h2>Control panel</h2>
		<ul>
			<li>Identified as <strong><?php echo $user_identity ?></strong>.
			<ul>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

				<?php if ( $user_level >= 1 ) : ?>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
				<?php endif // $user_level >= 1 ?>

				<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
				<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
			</ul>
			</li>
		</ul>

		<?php elseif ( get_option('users_can_register') ) : ?>

		<h2>Identification</h2>
		<ul>
			<li>
			<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
				<p>
				<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User</label><br />
				<label for="pwd"><input type="password" name="pwd" id="pwd" size="22" /> Password</label><br />
				<input type="submit" name="submit" value="Send" class="button" />
				<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><br />
				</p>
				<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
			</form>
			</li>

			<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
			<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
		</ul>

		<?php endif // get_option('users_can_register') ?>

	</li>

Of course later i wanted to make it even more easier and prettier to register and login through the front page and skip the login and register pages, so we coded a small widget using Prototype to switch between the login and registration box all on the front page. I will write a tutorial about this very soon.

Creating a menu Showing Certain Categories

If you would like to have a menu like the one we have here at noupe, to show certain categories, just add the line of code below and style it as you wish.

<ul class="topmenubar" style="float:left; width:720px;">
<?php wp_list_categories('orderby=name&include=7,72,23,16,1,7,17,26'); ?>
</ul>

The template tag, wp_list_categories, displays a list of Categories as links. You can Include or Exclude Categories as you wish, just enter the category id and don’t forget to add the “include” or the “exclude” parameters to manage it.

By default, wp_list_categories() generates nested unordered lists (ul) within a single list item (li) titled “Categories”. You can style that list item with a CSS selector.

Other great Solutions

• Display categories in horizontal Drop-Down menu- This tutorial will explain how to create a horizontal menu bar showing the main categories and sub menus showing the sub-categories using CSS and javascript.
  
  

  ---

• Multi-level Navigation Plugin for WordPress- The plugin generates the code necessary to create a Son of Suckerfish horizontal dropdown, vertical flyout or horizontal slider menu. You have control over what items (pages, categories, archives, blogroll etc.) appear in your dropdown via the plugins options page.

Display Categories in a Dropdown box

Sometimes you want to displays a list of categories in a select (i.e dropdown) box with no submit button. The easiest way to do this is use the wp_dropdown_categories template tag.

<form action="<?php bloginfo('url'); ?>/" method="get">
    <?php
	  $select = wp_dropdown_categories('show_option_none=Select Category&show_count=1&orderby=name&echo=0&selected=6');
	  $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
	  echo $select;
	?>
    <noscript><input type="submit" value="View" /></noscript>
</form>

Most Wanted Posts and Categories hacks

How to exclude certain categories from being displayed in the loop.

<?php if ( have_posts() ) : query_posts($query_string .'&cat=-13,-26'); while ( have_posts() ) : the_post(); ?>

• Advanced Category Excluder- The main goal of this plugin is to enhance WordPress’s functionalities by hiding some unwanted categories, from defined parts of the blog like: your search results, your RSS feed listing, your category listing, and also your entry page, if you want to.

How to display posts from a certain category

If you want to display certain posts from a certain category like the one i am using for the news section on Devsnippets.

<ul  class="news">
     <?php query_posts('cat=6&showposts=5'); ?>
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Post Author Related Solutions

Having multiple authors on your blog is really fun, we need to have good solutions to have nice custom author pages, show their latest posts, highlight author Comments in WordPress posts, show their avatars and author bio below every post.

Getting Author Page on your WordPress blog

By default WordPress will use the author.php then the archive.php file then your index.php file to display the author info. That is, if you do not have an author.php file, WordPress will check for archive.php, and so on.

So, if you want to change the look of your author pages, you need to create an author.php file if it doesn’t exist, by copying archive.php if that file exists, or index.php if it doesn’t.

If you want to show the author’s main website, email contact, and biography, helping readers learn more about the author.

Articles by <?php the_author(); ?>
Author Website: <?php the_author_url(); ?>
Author Email: <?php the_author_email(); ?>
Author Bio: <?php the_author_description(); ?>

Solution

• How To: Adding An Author Page To Your WordPress Blog
• Using Author Template Tags Outside of the WordPress Loop
• Kafkaesquí’s Get Author Profile Plugin- Access the author information and allows you to provide author information outside of the Loop, such as for a sidebar intro of the blog owner or to list contributors to your blog.

Display Author Bio below each Post

If you want to have that handy little author bio box at the top of the article with an author photo, you can do the following:

Solution

• Doing more with gravatars: Part 2- How to put together a very basic “About the Author” section on your single posts and show a gravatars for every author.
• How To Add Bio Info To Your WordPress Blog Posts
• Display Author Profile with Author Exposed

Separate Author comments from other comments

When you have multiple authors on your blog, you will need to style the author comments differently, here is how you can do it:

<li class="<?php if ($comment->comment_author_email == "authorname@domain.com") echo 'author'; else if ($comment->comment_author_email == "anotherauthorname@domain.com") echo 'author2'; else if ($comment->comment_author_email == "thirdauthorname@domain.com") echo 'author3'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

Display Twitter Messages on your blog

If you want to display your Twitter status on your blog instead of using Twitter-hosted scripts to save loading time.

How to

• Twitter Tools- Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account.
• twitterRSS- This plugin allows you to pull in an rss feed from your twitter account and display it on your site.