WordPress Themes

The WP Enqueue script is simply a line of code that lets webmasters add javascripts to a web page that is generated by WordPress. In some cases this script is already included in a page, and if it is not then it will need to be added manually, using the following instructions. In this example we’re going to refer to jQuery as the script that WP Enqueue will load, however it is important to note that any script can be loaded using this line of code within a WordPress page.

WP Enqueue vs Script Tags

The conventional method of loading any javascript in a standard HTML web page would be to use the script tag, however this should never be done within WordPress, as it can cause scripting conflicts. Instead, WP enqueue should be used in the following manner within functions.php file in order to load any javascript (In this example, jQuery):

function my_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

In the above example you can change the “my_init” line to anything you’d like, but it is important to make sure this line is completely unique to avoid conflicts. The “if (!is_admin())” line is used to prevent the script from loading on admin pages, and is considered optional. Another thing to note, we don’t use wp_deregister_script and wp_register_script in the above example because we just want to load the default jQuery script that comes with WordPress.

Loading a Script in the Footer with WP Enqueue

Using the above code, the script will automatically be loaded into the head section of the page (within the “head” tag). If you want the script to load on the bottom of the page (just before the closing “body” tag) then you will need to use the $in_footer parameter for the WP enqueue function, as in the following example:

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');

		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);

		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

The above code will first deregister the default jQuery script that comes with WordPress, and then register a new script with new parameters (such as the option to load it in the footer) and then load the jQuery script in the footer of the page rather than placing it in the head of the page by default. It is important to note that any script that lists jQuery (in this example) as a dependency with the $in_footer parameter set to false, then jQuery (or any other script) would be displayed in the head because the script that lists jQuery as a dependency will override the above commands.

How to Use WP Enqueue Parameters

The WP Enqueue function has 5 parameters that are used to direct the loading of the script. These parameters play a crucial role in the functionality of WP Enqueue so it is important that you fully understand the following information before attempting to use the WP Enqueue function.

Usage (preferably within functions.php file):

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

The first parameters you’ll need to be familiar with is the $handle, which is basically the name of the script that is being called. The $handle is a required string consisting of all lowercase letters that dictates which script is called from the WordPress library, so it is crucial to make sure you use the right $handle when calling a script with WP Enqueue (if the script $handle doesn’t exist because it’s a new script, then you should first register it with wp_register_script and only then enqueue the script).

The $src parameter is an optional string in which the URL to a script is specified. This parameter is only needed when the script is not already installed in WordPress, such as scripts that you’ve uploaded to a directory on your web server. For example, if you’ve uploaded a script to your wp-includes folder then the $src URL may look something like “http://yoursite.com/wp-includes/js/jquery/jquery.js”.

The $deps parameter is an optional array that allows you to set up dependencies, or scripts that must be loaded before the main script that you are calling with WP Enqueue. If there are no dependencies needed then this parameter must be set to false.

The $ver parameter is an optional string that specifies that script version, if applicable. By default this parameter is set to false. This parameter is primarily used to make sure the correct version of the script is loaded, especially if there several versions of the same script or an older version of a script is needed for some reason.

The $in_footer parameter is an optional boolean that allows you to load the script in the footer of the page (within wp_footer() that is located just above the closing body tag), rather than the head (wp_head() that is located within head tag). If the $in_footer parameter is set to true then the script will be loaded in the footer, however it is important to note that the wp_footer() hook has to be placed in the theme appropriately. It is also necessary to enqueue the script to run before wp_head, even when the $in_footer value is set to true.

The new add_theme_support function introduced in WordPress 2.9 is expected to revolutionize WordPress theme development over the next few years as more developers learn how to use it. Currently, this function is primarily being used to set thumbnail pictures for pages and posts. However, with the release of WordPress 3.0 the function is now being used to conveniently manage site navigation menus. With so many uses and the overall functionality of this new function it is easy to see why some believe the add_theme_support function will be an integral tool in every WordPress developer’s arsenal.

Managing Thumbnail Images With the add_theme_support Function

Using the add_theme_support function to manage thumbnails is as simple as adding the following one line of code to the functions.php file of your theme:

// Post Thumbnails Support
if(function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
}

By adding this simple line to the functions.php file you’ll be amending the administrative interface of WordPress in two ways. First, whenever you go to post a picture you’ll now see a link that reads – “Use as Thumbnail”. You’ll also notice that there is also a box that says – “Post Thumbnail” – when you try to create or edit a page or a post.

Using the “add_theme_support(‘post-thumbnails’)” function can also be combined with size specifications to create thumbnails of a particular size using the set_post_thumbnail_size function. For example:

set_post_thumbnail_size(160, 80);

In the above example, the size of all thumbnails would be width = 160 pixels, height = 80 pixels. You can also add additional sizes if you’d like to use multiple thumbnails within the same WordPress theme. These thumbnails can be added to the frontend of a website by using the_post_thumbnail()  function in the loop as follows:

the_post_thumbnail(array(100,200));

In the above example, the size of the specific thumbnail would be width = 100 pixels, height = 200 pixels.

Using add_theme_support for Navigational Menus in WordPress 3.0

If you’d like your WordPress admin area to support the setup and management of site navigation menus, WordPress 3.0 allows you to use the following function in the functions.php file of your theme:

// WP Menus Support
if(function_exists('add_theme_support')) {
    add_theme_support('menus');
}

After adding this code you’ll be able to setup new navigation menus in the Appearance > Menus section of WordPress admin area. In this convenient interface you’ll be able to organize menus from your site, and even other web sites. You can also arrange the hierarchy of the menu items with the sleek interactive interface. All menus that have been set up using that process can be added to your website by using the wp_nav_menu() function in the template files as follows:

wp_nav_menu(array(
	'sort_column' => 'menu_order',
	'container' => 'div',
	'container_class' => 'menu',
	'menu_class' => '',
	'menu_id' => '',
	'depth' => '1',
	'fallback_cb' => 'fallback_main_menu',
	'theme_location' => 'main_menu'
));

A popular post on a blog is like a crowd of people on the street. What I mean by that is that they both attract attention. If you’ve ever been walking down the street and seen a crowd of people milling about, paying rapt attention to something nearby? Could you resist going to look and see what all the fuss is about for yourself?

Popular posts are like that. When a person browses your blog and sees that a lot of other people are chiming in on a subject, they’re more inclined to check it out for themselves and add their voice as well. You can turn this to your advantage to generate more traffic. To some degree it will happen naturally, but that doesn’t mean you can’t help the process along by drawing attention to your popular posts. One of the best ways to do that is to add thumbnail pictures linking to your popular posts.

Take a look at this code:

<div class="popular">
	<h3>Popular Posts</h3>
	<ul>
		<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>
		<?php while ($popular->have_posts()) : $popular->the_post(); ?>

        <li>
		<?php $postimageurl = get_post_meta($post->ID, 'postthumb', true); ?>

		<a href="<?php the_permalink(); ?>">

		<?php /* Check if Post Thumbnail has been set (WordPress 2.9 and above) */
		if (has_post_thumbnail()) { the_post_thumbnail(array(50,50), array('class' => 'popular-thumb')); }

		/* Check if custom field URL is set */
		else if ($postimageurl) { ?>

		<img class="popular-thumb" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $postimageurl; ?>&amp;h=50&amp;w=50&amp;zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="50" height="50" />

        <?php }
		/* Display default image */
		else { ?>

        <img class="popular-thumb" src="<?php bloginfo('template_directory'); ?>/images/blank.png" width="50" height="50" />

        <?php } ?>
        </a>

        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>

        <?php endwhile; ?>
	</ul>
</div>

This code is something that you can insert anywhere in your template files. The best spot is probably the sidebar. Another thing you can do with this is to transform this into a custom widget that will allow you to drag and drop it in the admin panel, making moving it around much simpler. However, that’s something that we’ll have to cover another time – for now just apply this code where you want and you should have no problems.

This code makes use of a new function introduced in WordPress 2.9, called the_post_thumbnail. It’s about time that WordPress added some simple thumbnail support, don’t you think?

The end result on your blog will be eye-catching images that link directly to your most popular posts. If the promise of a lively discussion in the comments isn’t enough to draw in more readers, then perhaps a nice image will help nudge them in the right direction. That means more people staying on your page instead of clicking elsewhere, and that’s what we all want, isn’t it?

You won’t run into too many situations where you’ll want to shorten your post titles, but it doesn’t hurt to have this little technique under your belt. Basically, what it does is put a limit on the amount of words that appear in your title. So if you want to avoid a text wrap onto the next line, use this method. For instance, if your title goes in a box of a fixed size, this can come in handy.

Simply include the following code in the functions.php file. It goes between the PHP tags:

function short_title($after = '', $length) {
	$mytitle = explode(' ', get_the_title(), $length);
	if (count($mytitle)>=$length) {
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle). $after;
	} else {
		$mytitle = implode(" ",$mytitle);
	}
	return $mytitle;
}

Now to put it to use within the WordPress loop. Observe:

<?php echo short_title('...', 8); ?>

You can also set it up to work based on character instead of word count. To do so, just substitute the previous code snippet for the following one:

function short_title($after = null, $length) {
	$mytitle = get_the_title();
	$size = strlen($mytitle);
	if($size>$length) {
		$mytitle = substr($mytitle, 0, $length);
		$mytitle = explode(' ',$mytitle);
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle).$after;
	}
	return $mytitle;
}

It’s just that simple. Like I said, not something that you’re going to use too often, but you may just find some use for it now and again.

Savvy internet users are a very time-conscious group. When they look at a blog post, they often will be curious as to how long ago it was posted. While it’s usually not so hard to look at the date or time of the post and figure out the difference,  it’s not exactly convenient. Plus, when multiple timezones get into the mix it can get a little tougher. The good news is that you can make it even easier for your readers with a very simple function.

You’ve probably seen it on other blogs or forums before: a way of displaying time information simple as “x time units ago.” For example, “3 hours ago,” “2 weeks ago” or even “less than a minute ago.” Well, adding this functionality to your blog is actually quite simple to do – it actually uses a built-in WordPress feature to do it.

The function is known as human_time_diff(). To use it, you just post a bit of code anywhere in your WordPress loop:

Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

Now just save your file and you’re done. From now on, your posts will be listed in the “time ago” format for easy readability.

One of the defining features of any WordPress powered website is what plugins it uses. While a good site can excel based on its content alone, the right plugins can really take things to a whole new level. One of the great things about plugins is that they are so versatile – they can do everything from boosting your SEO rank to simply making your site easier for the end user to navigate.

On the other hand, the one problem with plugins is that there are just so many of them; it can be hard to know which ones are worth your time to install and set up. One quick tip I can share is to look at the number of downloads a plugin has, rather than its rating. Downloads are by far the strongest indicators of a plugins popularity and quality. That said, if you’re still finding yourself a little overwhelmed by all the choices, here’s a few of the top plugins that almost anyone can benefit from using.

SEO Plugins

Let’s start with a couple of plugins that can help boost your search engine visibility:

All-in-One SEO

One of the best reasons to use WordPress is because of it is naturally built for better search engine visibility. That doesn’t mean that you shouldn’t do everything you can too boost it a bit higher. That’s where All-in-One SEO comes in.

So what does All-in-One SEO do for you? It does two very important things, actually. The first is that it gives you more control over the Title tags on each of your pages, from the home page to each specific post’s page to other standard pages on your site. This is vital for good SEO because the Title tag determines which words show up as the link on Google and other search engines. If the title tag isn’t reflective of what your site is actually about, it can confuse potential viewers. Besides, the Title tag is just naturally very important for boosting you to the top ranks of search engine results pages.

If you aren’t using this plugin, then most WordPress themes will simply take the Blog Title setting from your settings page and use it as the Title tag, or it will take the title of the specific page in question. Sometimes, the flavor of the title your site or of a particular post might not jive with search engines the way you want it to. All-in-One SEO helps with this. It adds a box that will show up on the bottom when you create a new post or page and you can fill in this box with whatever title tag you want. It’s a very simple way to achieve better SEO.

The other great thing that All-in-One SEO does for you is that it lets you change the meta description tag. On a search engine results page, the meta description is the text that appears just below the clickable link. Users often use this text to get a small preview of what’s on the page so they can better tell if it’s worth their time to click. Believe it or not, most WordPress themes omit a unique meta description tag entirely. They simply pull from the text on the page itself, which may or may not be a good indication of what the user will actually find on your page. All-in-One SEO fixes this problem by allowing you to easily specify a unique meta description – you can input your meta description text in another text box just below the title one.

All-in-One SEO is pretty much a no brainer when it comes to plugins. It couldn’t be easier to use, yet the results it can yield can be quite impressive. If you’re not using All-in-One SEO on your WordPress you’re definitely shorting yourself on potential pageviews. It’s a must-have!

Google Sitemap Generator

Sitemaps are incredibly important aspect of search engine optimization. They’re also kind of a pain to build and maintain. Fortunately, the plugin known as Google Sitemap Generator makes the whole process simple and painless. As the name implies, this plugin generates a sitemap of your site with minimal effort required on your part.

Of course, I’ve said that sitemaps help your search engine rank and obviously that’s something everybody wants. Now you could just take my word for it and download the Google Sitemap Generator plugin, but if you’re curious as to how it works, here’s a brief explanation of what sitemaps are and why they are helpful.

Basically, sitemaps are the simplest way for you as a webmaster to tell search engines that the pages on your site are ready to be indexed. Essentially, a sitemap is just an XML file with all the URLs on your site listed along with any attached metadata. Metadata includes things like when the site was last updated, how frequently it is updated, and its overall importance compared to the rest of the pages on the site. Search engines use the data to be smarter about the way they crawl and index the site.

The search engines crawler algorithms generally find pages by following standard links from your site and from other sites that link to you. A sitemap allows these crawlers to instantly access a lot more data about your site which can make the process faster and more complete. It doesn’t guarantee better search engine rankings, but it certainly doesn’t hurt. And since the Sitemap Generator plugin is so easy to use, there’s little reason not to do it.

While the name of plugin refers to Google, this sitemap generator works for most of the major search engines: Ask.com, Yahoo!, Bing and of course Google. It’s referred to as a Google Sitemap Generator simply because it was Google that came up with the concept of a sitemap in the first place.

This plugin is simple to use – it doesn’t require you to have any knowledge of PHP or to change any files around. There’s a built-in interface that allows you change settings around, such as the priority of importance of different pages on your site. Once you’ve set the parameters to your liking, the sitemap is generated automatically. Then, when you make more posts through WordPress, the plugin will automatically update assign it an importance level, favoring posts with more comments. Finally, the plugin automatically pings all the major search engines to let them know that updates have been made. That’s the basic functionality – this plugin actually has some more handy features… but that should be enough to sell you on it.

Ease of Use Plugins

Let’s move on to plugins that are designed to make your site more easy to use for the end user.

Yet Another Related Post Plugin (YARPP)

WordPress may be primarily about text, but everyone knows that pictures are great for catching the eye of your site’s visitors. One of the most important techniques in site building is interlinking your pages, but it can be tough to actually get people to click on them. They tend to get lost in the sea of text that’s already on most pages. Yet Another Related Post Plugin, or YARPP, is the perfect solution to this issue.

What YARPP does is search your archives for posts related to the current post and build links there. Then, it spices up those generic text links with an image to help draw the reader’s eye. The best use of this plugin results in a thumbnail sized picture from the linked post actually appearing with the text link. So users will get a little visual preview of what is going on on the other side of that link, and they’ll be that much more likely to click through. Of course if you don’t usually use images in your posts, you can also set up it to just display a default image. A third option allows you to specify a unique image of your choosing for the thumbnail.

YARPP is a pretty versatile program and has a lot of room for customizability. If you’re the kind of person who likes to tinker with CSS, then it’s pretty easy to get this plugin to fit right in with your site. On the other hand, if you’re the type that just wants their plugins to work with minimal fuss, YARPP has multiple templates that you can use and chances are at least one of them will fit right in with the visual style of your site.

The only caveat for this plugin is that it will automatically try and resize images. This can lead to strange looking images, so you may need to pay close attention and resize them yourself to make them look good. That’s a small price to pay for the nice look that this plugin can give you.

To end on a positive note, another thing that’s awesome about this plugin is that the author is really dedicated to his project. YARPP is updated regularly and its website is full of helpful information and an FAQ that should be able to answer most of your questions about installing and using the plugin.

WP-PageNavi

Now let’s take a look at a slightly simpler type of plugin. This one is called WP-PageNavi and what it does is fairly simple but also very useful for making your site more easily navigable. The purpose of WP-PageNavi is to replace the standard page-by-page navigation of a blog-style site with a list of page numbers.

To explain it more clearly: normally, a WordPress blog page has its new posts listed down the page in chronological order. Older posts get moved on to new pages to make room for newer ones. Normally, users can only find older posts by clicking through, page by page, until they find the page where the post they want. With WP-PageNavi, the Previous Page and Next Page buttons are replaced by a list of page numbers, as well as buttons for the last page and the first page.

Of course it wouldn’t really work well once your site got up into the hundreds of pages. You wouldn’t have room for all the buttons, so it simply truncates the list, offering the most recent pages and then a selection of page numbers from the whole index of pages. If you have many pages, users may not be able to find the exact one they need but they can jump to a page that’s relatively close. It’s certainly much easier than clicking through each page individually!

Social Plugins

Here’s a helpful plugin for social networking purposes.

AddToAny

At this point, you essentially cannot have a successful web presence without having the power of social networking on your side. Pretty much any site you go to these days has links that allow users to share a link with their social network with just one click. The problem for webmasters is that there are simply too many social networks out there. You want to get exposure to as many as possible, but it would be a complete pain to have to set up easy-sharing links to each individual network.

AddToAny is a simple solution to this problem. AddToAny adds a small module at the bottom every post that, when moused over, presents the user with a small dropdown that offers them a number of handy options. Through this little module, they can do simple things like instantly bookmark your site or e-mail it to a friend. More importantly, it allows people to easily share your site through various social networks. They’re pretty much all there, from Facebook to Digg to Twitter and many others – literally dozens of others.

AddToAny provides a very simple and space-conscious way to make social networking easier for the people who visit your site. You don’t have to worry about separate plugins for each of the many different networks because they’re all there in one handy package. It’s important to make sharing your site as easy possible because most people already have a lot going on. If they have to jump through hoops to share your site, they simply won’t and that’s valuable word of mouth that you’re missing out on. Get AddToAny and you won’t have to think twice about it!

Other Helpful Plugins

Here’s a couple plugins that don’t particularly fit into any other categories, but you might find them useful!

SyntaxHighlighter

SyntaxHighlighter is a plugin that is mainly useful to people who want to display some kind of code, be it PHP or CSS or whatever, on their site. If you’ve ever looked at a huge block of code by itself, you’ve surely noticed that it can be a real pain to read. Especially when you start getting into more complex code chunks with overlapping brackets-within-brackets, it can be really difficult to tell where one command ends and the next one starts. For many years now, coding programs used in professional computer programming have used colors to help make reading code easier.

SyntaxHighlighter is a plugin that replicates that kind of color coding. When the plugin is correctly installed, it will take any code snippets that you post on your page and color code them in a way that makes them appear more organized and easier to read. It also breaks the code into separate lines that are numbered, which makes it easier to follow. It’s great for people who blog about web development or even those who sell web development lessons or related products and want to provide samples.

SyntaxHighlighter is fairly simple, but it does have multiple color schemes so you can choose the one that you like best or the one that fits with your pages overall color palette. This plugin is highly recommended for people who want to teach readers about coding. You’d be surprised how big of a difference a few simple color changes can make in the learning process.

Download-Monitor

The last program on our list is called Download-Monitor. As I mentioned in the introduction to this article, downloads are the biggest indicator of the success and popularity of anything on the internet. Naturally, as a webmaster, you want access to information on how often people are downloading the files that you are offering. You can search through the files in your archive and sort them by a number of unique parameters so you can get the most out of your data. The plugin counts all downloads except for those done by WordPress admin accounts, so you don’t have to worry about your numbers getting skewed. That’s the primary function of Download-Monitor, but it also has a toolbox of other useful features.

The data recorded by Download-Monitor is pretty detailed. Not only can you tell how many times a particular file has been downloaded, but you can also see who downloaded them and when they did it.

There are more features still. Download-Monitor adds a button to the editor that allows you to upload a file and make it available for download. It’s much more convenient than setting up a file for download manually. Other helpful bits include support for mirror download sides and download categories. You can even set up member-only downloads or set up individual download permissions for different user membership levels. All this functionality makes Download-Monitor a very powerful little plugin and something you’ll definitely want to use if you offer files for download.

Conclusion

We’ve covered some great plugins in this rundown, but there are literally hundreds more out there that could be the key to taking your site to a higher level. If you don’t know much about plugins, start out by fleshing out your site with some of the plugins recommended here. Then, once you’re comfortable with how the basics work, start searching out your own.

Browse around your competition and your favorite blogs and sites and look at what kinds of features they have on their sites. If you know what kind of features you want, it should be easy to track down some plugins that can pull it off. Then it’s just a matter of picking the best one – remember, look at the number of downloads. Lots of downloads means that a plugin is popular, and if it’s popular then it must be doing something right!

The resources that you can have access to for free on the internet are virtually limitless. This begs the question: why would you ever pay for something you can get for free, such as a WordPress theme? If you have any level of familiarity with WordPress, then you’ve probably seen the hundreds of different free themes out there. Some of them have very dedicated authors and can make your blog or website look completely professional, even though they are free of charge. So why bother going with a paid premium WordPress theme?

There are actually quite a few reasons. Obviously some paid themes are worth buying, or people would not bother selling them! If you’re trying to decide between free themes and paid themes, then the most important thing is to simply know your own needs and your own capabilities. Let me outline some of the differences between free and paid themes so you can figure out which option will work best for you.

Support & Longevity

Two of the biggest selling points for themes are support and longevity. Paid themes are generally maintained by teams that are affiliated with companies. This means that there’s no risk of the author or authors losing interest in maintaining the theme. It also often means that you’ll be able to get support if you ever have technical problems while utilizing a paid theme.

Free themes are, in many cases, maintained by individuals with a flair for web design. These people, while generally talented, cannot always be relied upon to maintain a theme indefinitely. This means that a theme may not keep pace with the newest advances in web technology such as new widgets and the like. WordPress itself updates fairly frequently, which can wreak havoc on your site if you don’t know how to make the necessary changes. Not having a regularly updated theme may mean you have to keep changing your theme every so often, and it may mean a complete overhaul of its look and feel, which can hurt your site’s level of recognition.

Along the same lines, a free theme author may not have the time or inclination to help you if you run into trouble when installing or modifying a theme to fit your needs. If that’s the case, then you’re on your own!

Ease of Use: Theme Options Interface

Another thing to consider when choosing between free and paid themes is your own level of technological prowess. If you want something that’s exceedingly simple to use that you have to interact with minimally, then a paid theme is probably best. Free themes tend to require a little bit more tech savvy in terms of installing or modifying them. For some paid themes, the company who sells the theme will do most of the work for you and you just get to enjoy the end result with an easy-to-use theme options interface for making changes and updates.

By and large, it’s hard to deny that premium themes are better than free ones. The question then becomes: is a paid theme actually worth it? It can cost over $30 for a top quality premium theme! It can be difficult to justify that level of spending if you are just using WordPress as a platform for a blog or a small business website.

Unique or Not Unique – That Is The Question

Another thing that you have to consider when it comes to both free and paid premium themes is the fact that these themes are not unique and can be sold and distributed to many different clients. Therefore, even if you shell out the cash for a premium theme, there will likely be many other sites out there that look nearly identical to yours because they paid for the same theme. If you want to actually get a completely unique theme, then you may have to pay hundreds of dollars.

Conclusion

So ultimately, whether or not a premium theme is worth it to you; is a question that only you can answer for yourself. If you have the budget for it and you want all the advantages that premium themes can offer, then purchasing one of these themes is a great choice. However, if you aren’t sure or if it simply isn’t in your budget, then there’s no harm in at least trying out a free theme.

Even if you can’t find a free theme that is super easy to use, this can be a great way to introduce yourself the basic elements of PHP, CSS and HTML that are used in WordPress themes. You may find that it’s easier than it looks at first. Then, by the time you’re ready to buy a premium theme, you may find that you don’t even need one anymore.

Before we begin, let’s take a look at what the final product of today’s lesson should look like:

You can find a live example here.

This type of menu is a perfect choice for news site or magazine style site. It provides a lot of fluidity for your readers, allowing them to move between pages and find the content that they want very easily.

Getting started

To get this menu style working, you’ll need both some solid CSS code and a nice PHP. The PHP code that you’ll find below is what will enable this menu style. Simply cut and paste the following bit of code into your header.php file and you should be good to go.

<div id="navbar_container">
<div class="menu_lr"></div>
<div id="navbar">
	<ul id="navcatlist">
		<li<?php if(is_home() ) { ?> class="current-cat home"<?php } ?>><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('description'); ?>">Home</a></li>

		<?php wp_list_categories('title_li=&depth=2'); ?>
	</ul>
</div>
<div class="menu_lr"></div>
</div>

The PHP part of this setup is pretty basic – there’s not much to it at all, as you can see. That’s okay though, because the CSS is the real star of the show here. Take a look at the CSS below:

/* Menu */
#navbar_container {
	width: 960px;
	height: 71px;
	margin: 15px 0 15px 0;
	float: left;
}
#navbar {
	width: 958px;
	height: 71px;
	padding: 0;
	font: normal 18px "Myriad Pro", Arial, Helvetica, sans-serif;
	text-transform: capitalize;
	float: left;
	background: url(../images/menu_bg.png) repeat-x left top;
}
.menu_lr {
	width: 1px;
	height: 71px;
	float: left;
	background: url(../images/menu_bg_lr.png) no-repeat left top;
}
ul#navcatlist {
	width: 100%;
	display: block;
	list-style: none;
	position: relative;
}
ul#navcatlist li {
	float: left;
	list-style: none;
}
ul#navcatlist li ul {
	width: 958px;
	height: auto;
	z-index: 999;
	left: -999em;
	position: absolute;
}
ul#navcatlist li li {
	width: auto;
}
ul#navcatlist li a {
	height: 37px;
	margin: 4px 0 0 0;
	padding: 0 10px 0 10px;
	display: block;
	color: #FFF;
	line-height: 37px;
	text-shadow: 1px 1px #a30f0f;
}
ul#navcatlist li a:hover {
	text-decoration: underline;
}
ul#navcatlist li.current-cat-parent {
	padding: 0 0 0 3px;
	background: transparent url(../images/btn_bg2.png) no-repeat left top;
}
ul#navcatlist li.current-cat-parent a {
	height: 41px;
	margin: 0;
	padding: 0 13px 0 10px;
	text-decoration: none;
	line-height: 41px;
	background: transparent url(../images/btn_bg1.png) no-repeat right top;
	text-shadow: 1px 1px #222;
}
ul#navcatlist li.current-cat-parent li.current-cat {
	padding: 0;
	background: none;
}
ul#navcatlist li.current-cat-parent li.current-cat a {
	color: #e2e025;
	text-decoration: none;
	background: none;
}
ul#navcatlist li.current-cat {
	padding: 0 0 0 3px;
	background: transparent url(../images/btn_bg2.png) no-repeat left top;
}
ul#navcatlist li.home {
	margin: 0 0 0 -1px;
	padding: 0;
	background: none;
	border-left: 1px solid #000;
}
ul#navcatlist li.current-cat a {
	height: 41px;
	margin: 0;
	padding: 0 13px 0 10px;
	text-decoration: none;
	line-height: 41px;
	background: transparent url(../images/btn_bg1.png) no-repeat right top;
	text-shadow: 1px 1px #222;
}
ul#navcatlist li.current-cat-parent li a {
	width: auto;
	height: 29px;
	margin: 0;
	padding: 0 10px 0 10px;
	background: none;
	float: none;
	color: #FFF;
	font: normal 14px "Myriad Pro", Arial, Helvetica, sans-serif;
	line-height: 29px;
}
ul#navcatlist li.current-cat li a {
	width: auto;
	height: 29px;
	margin: 0;
	padding: 0 10px 0 10px;
	background: none;
	float: none;
	color: #FFF;
	font: normal 14px "Myriad Pro", Arial, Helvetica, sans-serif;
	line-height: 29px;
}
ul#navcatlist li li a {
	width: auto;
	height: 29px;
	margin: 0;
	padding: 0 10px 0 10px;
	background: #3c3c3c;
	float: none;
	color: #FFF;
	font: normal 14px "Myriad Pro", Arial, Helvetica, sans-serif;
	line-height: 29px;
}
ul#navcatlist li li a:hover, ul#navcatlist li li a:active {
	color: #e2e025;
	text-decoration: none;
}
ul#navcatlist li:hover ul, ul#navcatlist li.sfhover ul, ul#navcatlist li.current-cat ul, ul#navcatlist li.current-cat-parent ul {
	left: 0px;
	display: block;
	background: #3c3c3c;
	border-top: 1px solid #848484;
	text-transform: lowercase;
}
ul#navcatlist li:hover ul {
	z-index: 9999;
}

Careful with the CSS

Obviously, the CSS is quite a bit more complex and in-depth. There are some pretty advanced techniques used in this CSS to get our magazine menu style looking sharp. Each part of the menu structure is detailed in the code here, so you must be very careful when making modifications. If you mess something up, it could disrupt everything and leave you with a menu that doesn’t look right or just plain doesn’t work at all.

For example, one of the classes in this code is the li.current-cat-parent. What this does is make it so the parent category will turn black if you are in a subcategory of said category, making it easier for the reader to see where precisely they are. The CSS code here refers to very precise targets, which makes it a bit fragile.

For example, consider these two similar bits of code:

ul#navcatlist li.current-cat-parent li.current-cat a {
	color: #e2e025;
	text-decoration: none;
	background: none;
}

This particular code will only function if you are in a sub category, so the current-cat-parent class must go before the current-cat class.

ul#navcatlist li.current-cat a {
	height: 41px;
	margin: 0;
	padding: 0 13px 0 10px;
	text-decoration: none;
	line-height: 41px;
	background: transparent url(../images/btn_bg1.png) no-repeat right top;
	text-shadow: 1px 1px #222;
}

On the other hand, the second piece of code here will only work if you are in the parent category. If you want to work within a subcategory, you have to use more precisely targeted code.

Take it for a test drive

Are you still with me so far? It can be a bit tough to wrap your head around it, but it is important to nail down the basics because there is so much more to learn. For instance, you can add images into your menus. I’ve attached a few in a separate file, which you can find below:

If you want to get a feel for this menu style as a whole, you can download the entire theme together and take it for a test run. Alternately, you can copy and paste the individual blocks of code listed in the tutorial and use those along with the images supplied above. I’d recommend doing it the latter way; it may give you a better feel for how everything works.

Learning how to create this style of menu is really rewarding because this magazine style has a lot of advantages over more typical and basic structures. The main draw is that you can have subcategories that are listed in a horizontal strip style, rather than the traditional dropdown menus that everyone uses. This looks snappy because it’s an on-page effect, whether you’re mousing over a main category or a subcategory. You can also adapt this menu style to allow readers to navigate between different sub pages in WordPress. However, that’s a topic for another time, so if you want to try that you’ll have to work it out for yourself for now.

Last thing to note…

Another important thing to note when using this style of menu is that it uses the “button trick,” which the average person may not be familiar with. This is not a button with a single 1 pixel image and x repeat effect, but rather a 2 image button. 1 image is located in the li tag to the left of it. This part consists of the background image with attributes set to left top. The second image is the actual button image, which is much longer. It’s located in the right section of the tag “li a”. The attributes on this image are set to background image, right top so that the right top section of the image will always show up and the left section will be cut off. The end result is that this second image gets cut off in just the right spot so that the button looks perfect. It’s tough to understand with words alone, so you may want to look at the attached images and the CSS code to get a better idea of what I’m saying.

Congratulations! You’re all set to create your own advanced and stylish horizontal menu system. Have fun with it, and be sure to check back soon for more handy tutorials.

A picture is worth a thousand words. It may be a cliché, but it’s a cliché for a reason – there’s no easier way to grab a reader’s attention than to add pertinent images to your blog posts. This step by step guide will teach you how to add thumbnail pics that link to related posts in your blog using a little tool called YARPP, or “Yet Another Related Post Plugin”. The goal here is to grab your readers’ attention with an eye-catching image and hopefully get them to check out your other posts, which means more pageviews for you and a better experience for them.

YARPP is very open-ended, so you’ll be able to customize it to fit in with the rest of your site with the help of some CSS changes. If you just want something that works right out of the box, that’s fine too – YARPP comes pre-packaged with a handful of excellent templates. Either way, it’s simple and effective.

Final Product

As you can see, the thumbnails really draw the eye and encourage clicks!

Sounds good, right? Let’s get started.

Step 1

So obviously, before you do anything else you’re going to need to download the YARRP plugin. The install is pretty straightforward, but if you run into trouble you can check out the YARPP homepage. Normally I wouldn’t recommend this, since so many authors don’t provide support for their projects. YARPP, however, is updated regularly and has lots of great documentation and a helpful FAQ.

Once the download is completed, you’ll need to upload it to your server and go into the WordPress control panel to activate the plugin before you can start putting it to work for you.

Step 2

Now let’s set up the single.php file to work with YARPP. This part is also pretty simple; you just need to insert a single snippet of code somewhere into the single.php file. This will determine where the related posts will appear, so you’ll generally want to put it somewhere below the_content() tag.

<?php if (function_exists('related_posts')) { ?>
     <?php related_posts(); ?>
<?php } ?>

Step 3

Your third step is to create a template file. Begin by creating a new file in your main theme folder named “yarpp-thumbnails.php”. Now here’s where you have to make a choice. You can either write some of your own code from scratch, or you can just grab some code from the templates that are included when you install YARPP. If you’re still learning, you may want to use the templates as a guideline, but work your own ideas into it. Here’s an example of what the code should look like:

<?php /*
Post Thumbnail Template
Author: AliveThemes.com
*/
?>

<h4 class="meta">Related Posts</h4>

<?php if ($related_query->have_posts()):?>

	<ul class="related-posts">
		<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

			<?php
				//Set character cap, default is 30
				$related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
				$imgthumb = catch_that_image();

				$tit = the_title('','',false);
				$tit1 = substr($tit, 0, 30);
				if (strlen($tit) > 30) { $tit2 = "$tit1 ..."; } else { $tit2 = "$tit"; }
			?>

			<li>
            	<?php if ($related_thumbnail != "") : ?>
            		<img src="<?php echo $related_thumbnail; ?>" alt="<?php the_title(); ?>" width="45" height="45" />
                <?php else : ?>
				<?php if ($imgthumb != "") : ?>
					<img src="<?php echo $imgthumb; ?>" alt="<?php the_title(); ?>" width="45" height="45" />
				<?php else : ?>
					<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" width="45" height="45" />
				<?php endif; ?>
                <?php endif; ?>

				<a href="<?php the_permalink() ?>" rel="bookmark"><?php echo $tit2; ?></a>
			</li>

		<?php endwhile; ?>
	</ul>

<?php else: ?>

	<p>No related posts found</p>

<?php endif; ?>

This code is very important, because it will determine how your “related posts” thumbnails are displayed. In this case, the code will first check for a thumbnail image specific to the related post, if it can’t find one it will then check the first image in the post. If it still doesn’t find anything, it will display the default_thumbnail, an image of your choosing. This is just one way to do it, however – the options for expanding the template are practically limitless.

$tit = the_title('','',false);
$tit1 = substr($tit, 0, 30);
if (strlen($tit) > 30) { $tit2 = "$tit1 ..."; } else { $tit2 = "$tit"; }

This bit of code ensures that only one line of text will be displayed per thumbnail (estimated number of characters that fit in one line). If the text would be longer than the specified number of characters, it will truncate the remaining text and add a “…” at the end to let the reader know that there is more to the related post’s title.

You also need to add this code below into your functions.php file, this little function is responsible for retrieving the first image in a post. You should add it at the end of the file, just above the php end tag: “?>”

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "";
  }
  return $first_img;
}

Step 4

For this step, you’ll need to head back to the WordPress Dashboard to activate the template. Go to “Display Options” then find the checkbox for, “Display using a custom template file.” Check that box and make sure the template file is pointing to “yarpp-thumbnails.php” and you’re good to go.

Step 5

Now we can change the look of the template by playing around with its CSS. Now CSS can be a real pain to work with, so I’ve included some of my own code here to help you understand your options.

/* Related Posts */
ul.related-posts {
	width:320px;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul.related-posts li {
	width:320px;
	height:45px;
	margin:0 0 5px 0;
	padding:0;
	float:left;
	overflow:hidden;
	line-height:45px;
}
ul.related-posts img {
	margin:0;
	padding:0;
	float:left;
	border:0;
}
ul.related-posts a {
	width:265px;
	height:45px;
	float:left;
	margin:0;
	padding:0 0 0 10px;
	line-height:45px;
	text-decoration:none;
	font-size:13px;
	background:#f5f5f5;
}
ul.related-posts a:hover {
	text-decoration:none;
	background:#eeeeee;
}
h4.meta {
	margin:0 0 10px 0;
}

Step 6

At this point you’re basically done with the actual setup of the plugin, now you just need to setup your posts to work with the new system. Or, actually, you can just go about business as usual. Remember what I mentioned back in Step 3 about how the code works? One of the nice things about that code is that if you don’t want to add specific thumbnails to each post, you don’t have to. Decide how you want to handle this – Steps 6.1 and 6.2 outline how to handle each situation.

- Step 6.1

If you don’t specify a specific thumbnail (I’ll explain how to do this in a moment), then the code will just take the first image in the post, resize it, and use it as the thumbnail. It couldn’t be simpler! The problem, however, is that some images end up looking strange when resized. For example, if you tried to resize a 600×300 image to fit in a 300×300 square, it would appear to be stretched out or squished down. Also note that if there is no image in a post, then a default image of your choosing will be displayed instead.

- Step 6.2

Now if you do want to create specific thumbnails, all you need to do is find the “Custom Fields” section that appears when you’re editing any WordPress post. It’s just below the write panel. Now just paste the URL of the thumbnail you want to use and connect it to the thumbnail_url identifier. Voila, your image will show up whenever this post appears as a related post. It’s a bit more work in the long run, but it does allow you to attach the perfect images to each post.

Conclusion

So there you have it, YARPP in a nutshell. As you can see, it’s a pretty straightforward and flexible little tool that can help funnel some extra traffic through your blog. Since you can essentially have the whole thing up and running within minutes of downloading it, there’s no reason not to use it and every reason to try it out.

http://archondigital.com/studio/wordpress/plugins/linkwithin-inspired-yarpp-template/

Quite often owners of small businesses question whether or not it is really necessary to establish an online presence. After all, they do the bulk of their business on a local level and it just never occurred to them that by developing a website they could greatly increase traffic and literally own their market area. Many proprietors make the mistake of thinking that because they are not selling online they don’t really need to establish a website. Whether or not you intend to do business online is irrelevant. The fact of the matter is that exposure (advertising) is the key to success and you have no greater tool at your disposal than the World Wide Web to get your name out there in lights.

Today’s consumer is Internet savvy: 2009 Internet Statistics

In order to understand just how vital a website is to the growth of your business, just consider these facts. According to the Nielson Online ratings, 74.1% of the population in the United States had internet access in the year 2009. That was almost double the figures from just a decade ago. In the year 2000 only 44.1% of households had access to the internet. Because we are living in an age where information is passed on literally at the speed of light, today’s consumer wants answers to questions almost before they are asked.

What do internet statistics have to do with my business?

In terms of your business, if you have a product or service to sell, you can have that buyer ‘pre-qualified’ long before he or she even walks in the door. They will have had the opportunity to see what you have to offer by browsing your website, they can do all the research they need from the comfort of their own home and will be prepared to sign on the dotted line when they walk in your door. If they were not ready to do business, they wouldn’t be there – they would still be searching online! This saves you valuable time and expense because your staff will not be tied up answering questions that can be found online. And of course, the customer is already sold on your product or services because they found you online, they liked what they saw and made the decision to make the trip to your physical location.

A website provides more advertising for your money.

The cost of radio or television ‘spots’ have gone through the roof. They are just not affordable to the average small business owner unless they are featured during the wee hours of the night, and then who’s up to view or hear them? Newspaper ads don’t reach the audience they once did unless you are talking about coupon inserts and direct mail can only say so much. With a website you can advertise literally every product you carry or service you provide because the space available is literally unlimited. Prospective customers can find what they need at the click of the mouse and you can go into as much or as little detail about that item as you so desire. You can include pictures, product specs, instructions, or whatever information you would like to highlight. On the web your possibilities are endless.

Online searches win out over the yellow pages every time!

Recent surveys have proven that shoppers find it easier to find a local business online than by looking through the yellow pages. When questioned why, many people responded jokingly that it is easier to ‘misplace the phonebook than it is my computer.’ While there may be humor in that, the reality is that it is much easier to sit down and do a quick “Google” than it is to leaf through a huge phone book with microscopic typeset. Then, the consumer can simply click on a link that takes them to a map for directions to your location. This helps to prevent lengthy phone calls that tie up your staff who are trying to give coherent directions to your location. It is easy to get indexed in Google or any of the search engines so consumers can find you quite easily and they don’t even need to know the name of your business! All they need to know is what kind of product or service they are looking for and the city they want to shop in. Once you are indexed they can easily find your business with a simple search.

A website can expand your market area significantly.

Many small businesses started out on a local level and gradually expanded their market area by promoting their business online. Creating an online merchant account is quite easy to set up and if you currently take the major credit cards it is just a matter of establishing a Secure Socket Layer (SSL) that enables online shoppers to purchase safely. There are a number of Payment Gateways who provide this service for you so that you really won’t need any specialized computer skills to take online payments. You can literally do business worldwide if your product is one that can be shipped.

Online presence gives you the Competitive Edge.

With a website it is easy to stay one step ahead of the competition. First of all, if you are competing with other small businesses in your market area, many of them may not yet have a website. When that customer Googles a product which several businesses carry, they are going to find your company because you have a website that Google can index. And then again, if your competition is online as well, it is easy to keep up with specials and promos they are offering. By keeping tabs on your competition’s websites you can gain the competitive edge.

Conclusion and an insight into the next article in this series.

Taking all of this into consideration, it is easy to see the necessity of developing a website for any small business. Not only will it help you to survive in today’s highly competitive market, but a website can also help you significantly broaden your horizons. The object of being in business is to make money and it just stands to reason that you can make more money if you can reach more prospective customers. Promoting your business online is proven to be the most effective method of building a customer base while streamlining your operations to save yourself a great deal of time and money. In the next article we will discuss how to actually go about developing a website and getting it hosted online.