WORDPRESS IS ARGUABLY THE MOST POPULAR AND FASTEST GROWING CMS. WITH MORE WEBSITES “GOING WORDPRESS” EVERY DAY, IT’S NEVER BEEN A BETTER TIME TO LEARN HOW TO CREATE A WORDPRESS THEME

AS A FREE and open-source content management system, WordPress is becoming more popular every single day and is showing no signs of slowing down. Many individuals and companies are deciding to include WordPress integration when re-designing their websites and being able to create WordPress themes is definitely a valuable skill to have in this day and age. Fortunately, WordPress has a very gentle learning curve and it’s quite easy to pick up. With just a few simple PHP tags you can quickly create a dynamic website. Once you know the basics, it’s easy to continue learning with the help of tutorials and the massive community that surrounds the CMS. In this tutorial, Dan Philibin and Michael Castilla of WPCoder will show you how easy it is to turn a single HTML template into a fully functional WordPress theme. In the example they will be using the Coda web editor for Mac, which you are free to download from www.panic.com/coda/ however any editing tool such as Dreamweaver should be sufficient.

Author: WP Coder (www.wpcoder.com) | Originally appeared in Issue 157

01 Install WordPress

To get started, first install WordPress. Many hosts offer automated installs and the Codex has a few tutorials
(http://codex.wordpress.org/Getting_Started_with_WordPress). For help setting up shop locally, check out
http://tinyurl.com/d9zzu6 (Windows) or http://tinyurl. com/df8dev (Mac).

02 Create a new theme

In your file browser, navigate to wp-content/themes. This is where every theme for your site is going to be
stored. Create a brand new folder for your theme and give it a name – we used ‘thecolortheft’ – and create
four blank files inside – index.php, header.php, sidebar. php and footer.php.

03 Images and style sheet
Copy the images folder and style.css into your theme folder, then open the style sheet in your code editor and add the information shown below to the top of the style sheet, filling in your own information as you type. These details will tell WordPress what theme it is and who its creator is.
/*
Theme Name: The Color Theft
Theme URI: http://yourwebsite.com
Description: A cool theme for Web Designer
Magazine
Version: 1.0
Author: Your Name
Author URI: http://yourwebsite.com
*/

04 Create the header

Looking at index.html in your code editor, copy the code from the top of the document down to the end of the #header <div> and then paste it into header. php. This will now be the header of your site. In the following steps you will learn how to make much of this content dynamic.

05 Page title

The first dynamic tag you’ll use is to generate the page title. Find the two title tags near the top of header. php and type the code shown below inside of those tags. This is used to display something along the lines of “My Blog » Page Title” in your browser.
<title><?php bloginfo(‘name’); ?> <?php wp_title();
?></title>

06 Style sheet URL

The URL to the site’s style sheet in the header must be a full URL and not just simply a file name, otherwise it will not work. A few lines down from the title, you’ll need to replace style.css with <?php bloginfo(‘stylesheet_url’); ?>. This tag will generate the full URL to the theme’s style sheet.

07 RSS URL

By default, an RSS news feed is generated for your blog. To make that feed public, you will need to add the code listed below somewhere within your HTML header. In the image above you can see from the highlighted line 10 for the whereabouts of where we added it:
<link rel=”alternate” type=”application/rss+xml” title
=”RSS 2.0” href=”<?php bloginfo(‘rss2_url’); ?>” />

08 Site title and URL

Inside <h1 id=”logo”>, replace the ‘#’ with <?php bloginfo(‘url’); ?> and ‘The Color Theft’ with <?php bloginfo(‘name’); ?>. The first tag will generate the URL to the site, and the second tag will generate the name of the site provided in the General WordPress settings. Remember that URL tag – you’re going to be using it quite often!
<h1 id=”logo”><a href=”<?php bloginfo(‘url’); ?>”><?
php bloginfo(‘name’); ?></a></h1>

09 Navigation links

Moving on to the unordered list, add the blog URL tag to the link for Home, just like in the last step. To dynamically generate a list of your site’s pages after that, replace the rest of the links with <?php wp_list_ pages(‘depth=1&title_li=’); ?>. Remember this tag! You will use it whenever you want to display a list of pages on your site.
<ul id=”nav”>
<li><a href=”<?php bloginfo(‘url’); ?>”>Home</a><
/li>
<?php wp_list_pages(‘depth=1&title_li=’); ?>
</ul>

10 Create the sidebar

Now it is time for you to move on to the sidebar. In the HTML source file, locate the sidebar div (<div id=”sidebar”>) and then copy that whole div and its contents (down to the closing tag) into sidebar.php.

11 Activate the search

One of the great things about WordPress is that it has a built-in search feature to make life that little bit easier. It’s very simple to activate it, all you have to do is insert the blog URL tag into the form’s “action” value. This is the same tag that was used twice in the header.
<form method=”get” id=”searchform” action=”<?php
bloginfo(‘url’); ?>/”>

12 Ad placeholder images

In the next area, the advertisement area, you need to link to the four placeholder images. However, you can’t just link right into the images folder – just like the style sheet, you need the full URL. Before ‘images’, insert this tag: <?php bloginfo(‘template_directory’); ?>. This echoes the full URL to your theme folder. This is another tag you’ll use pretty often if you’re ever linking to an image or file within your theme folder.

13 Dynamic categories

Moving on to the next area, there’s a list of post categories that need to be made dynamic. This tag – also a common one – will do the trick: <?php wp_ list_categories(‘title_li=’); ?>. Insert this tag inside the unordered list in place of all of the existing list items.
<h3>Categories</h3>
<ul>
<?php wp_list_cats(‘sort_column=menu_order&de
pth=1&title_li=&show_count=1’); ?>
</ul>

14 Tag cloud

A popular sidebar item on many blogs is a tag cloud. A tag cloud is a stylised list of the tags used on your posts. The more times a tag is used, the bigger the font is. Under the heading, insert <?php wp_tag_cloud(); ?> to generate one.
<div id=”tags”>
<h3>Tag Cloud</h3>
<p><?php wp_tag_cloud(); ?></p>
</div>

15 Blogroll

Finally, insert a list of your favourite links. These links can be managed in the WordPress admin under ‘Links’. To display the list in your sidebar, use <?php wp_list_ bookmarks(‘title_li=&categorize=0’); ?>, which will display an alphabetical list of your links.
<h3>Blogroll</h3>
<ul>
<?php wp_list_bookmarks(‘title_li=&categorize=0’);
?>
</ul>

16 Create the homepage
Now that we have the markup split up into separate PHP files accordingly, we can move on to the main template file of the theme, index.php. Copy the entire #wrapper <div> and paste it into index.php. You now want to attach the header.php, sidebar.php, and footer. php to your index.php file. This is really easy! In place of where the markup for the header, sidebar, and footer was, add the following tags accordingly: <?php get_header(); ?>, <?php get_sidebar(); ?>, and <?php get_footer(); ?>.

First line of index.php:
<?php get_header(); ?>
Last line of index.php:
<?php get_sidebar(); ?>
<?php get_footer(); ?>

17 The loop

Now we move on to the most important part of a WordPress theme, the loop! Everything inside of the loop will echo for each post. Place <?php while(have_ posts()) : the_post(); ?> above <div class=”post”> and <?php endwhile; ?> after <div class=”divider”></ div>. For an in-depth explanation of the loop, Justin Tadlock has written a fantastic article which you can check out at http://tinyurl.com/boc5wg.

<?php while(have_posts()) : the_post(); ?>
<div class=”post”>
…
</div>
<div class=”divider”></div>
<?php endwhile; ?>

18 Loop content (part 1)
Inside the h2 heading, replace the ‘#’ with <?php the_permalink(); ?>, which will generate the URL for that specific post. Replace ‘This is a test post’ with <?php the_title(); ?>, which will generate the post title for that specific post.

<h2><a href=”<?php the_permalink(); ?>”><?php the_ti
tle(); ?></a></h2>

19 Loop content (part 2)
Taking a look inside the loop, we need to add a few tags. For the post metadata, replace the date with <?php the_time(‘F dS, Y’) ?>, the categories with <?php the_category(‘, ‘); ?>, and the author name with <?php the_author(); ?>.

<div class=”info”>
<ul>
<li><?php the_time(‘F dS, Y’) ?></li>
<li><?php the_category(‘, ‘); ?></li>
<li><em><?php the_author(); ?></em></li>
</ul>
</div>

20 Loop content (part 3)
Replace the dummy text with <?php the_content(); ?>. This tag will get the corresponding content for each post. Replace the ‘#’ for the Continue Reading link with the same tag used below for the post URL in part 1.

21 Archives, search and single

Create three new files called archive.php, search.php and single.php. Copy and paste all the code from index.php into each of those files.

22 Regular pages
Create a new file called page.php and copy and paste the code from index.php into that file. Some styling is different on the regular pages, so we’re going to add a page class to <div class=”post”>, so it should now read <div class=”post page”>. Also, since we don’t want the post metadata showing on these pages, we’re going to delete <div class=”info”> and its contents.

<?php while(have_posts()) : the_post(); ?>
<div class=”post”>
<div class=”title”>
<h2><a href=”<?php the_permalink(); ?>”><?php th
e_title(); ?></a></h2>
</div>
<div class=”text page”><?php the_content(); ?></div>
</div>
<?php endwhile; ?>

23 404 page

This is the page your users will get when they go to a page URL on your site that hasn’t been created or is broken. Create a new file called 404.php, copy and paste the contents of page.php into that file. Take out the PHP for the loop (the_permalink, the_content, the_title and so on) and change around the page heading and text as you wish!

24 The footer
Creating the footer for this theme is really simple. From the HTML source file, copy and paste the closing HTML and body tags, and the full footer <div> into footer. php and you’re set.

25 Triggers
There are two “hooks” you need to have in your theme so that other plug-ins can interact with it. One tag will go inside the <head> tags in header.php and the other will go just before the body closes in footer.php, as shown in the code below:

In header.php:
…
<?php wp_head(); ?>
</head>
<body>
In footer.php:
…
<?php wp_footer(); ?>
</body>
</html>

26 Activate the theme

Now that we have finished the integration, it’s time to put the theme to the test! Log into the admin at http://yoursite.com/wp-admin with the username and password you received after installation. Head to the Appearance panel, find your theme in the list, and activate it!

EVER THOUGHT IT WOULD BE COOL TO STREAM YOUR TWEETS INTO YOUR WORDPRESS TEMPLATE? WE SHOW HOW IT CAN BE ACHIEVED

TWITTER IS A microblogging platform that allows you to post messages up to 160 characters long, updating ‘followers’ with your news, current activity or status. Many web users have embraced the idea of Tweeting as a complementary platform to the normal blog, allowing them to reach out to other Twitter users and fill the gap between something worthy of a full blog post and something incidental. The platform is rapidly growing in popularity; Stephen Fry has just reached 20,000 followers within a month or so of joining Twitter, and even Web Designer has its own Twitter account – our username is WebDesignerMag. Sign up for Twitter at http://twitter.com.
So, microblogging is a useful and fun way of sharing news, but what about your existing blog readers? They may not be aware that you’re using Twitter and may not use Twitter themselves. This is no reason to exclude them from your Twitter updates, however, and in this tutorial we’re going to take advantage of the Twitter JSON search API by using jQuery to insert a live view of your latest Tweets directly into your blog pages.

01 Keep it simple to begin with
We’ll be inserting our final code into a WordPress blog sidebar, but to start with we’ll test with an otherwise empty HTML file to ensure everything works as it should do. Copy the start.html’ and ‘jquery-1.2.6.pack.js’ files from the disc onto your computer. Open the HTML file up in your favourite browser and your HTML editor of choice – in this instance Dreamweaver CS3 or CS4.

02 API documentation

We’re using JSON because it allows us to load content cross-domain – that is, we can grab content from another server without coming up against the problems associated with trying
to load XML from an external server using JavaScript. Twitter offers a JSON feed as part of the search API. You can read the specifications at http://apiwiki.twitter.com/Search+API+Documentation. Try entering http://search.twitter.com/search.json?q=from%3Awebdesignermag&rpp=5&callback=? into your browser and save the file that the browser offers you as a download. Open the file up in a text editor, such as Notepad or TextEdit, and familiarise yourself with the contents. This loads the five latest Web Designer Twitter posts.

03 Set up the jQuery
Now we understand what’s going on with the feed, we can get started with our JavaScript. At the top of your blank HTML document, enter the code below within the <head> section. This loads the jQuery script into the page and sets up a script to be run when the document has finished loading into the browser (note that this is different to the regular JavaScript onLoad event as it doesn’t require all the images to have loaded before running – a bonus for script performance).
<script type=”text/javascript” src=”scripts/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
(Our scripting will go in here.)
});
</script>
For the purposes of testing our design layout for the Twitter panel, add the following immediately beneath the script code:
<style>
body {
font-family: arial, helv, sans-serif;
font-size: 66%;

04 Grab the JSON feed
We’re going to use jQuery’s built-in getJSON function to grab the feed dynamically. This function loads the feed from the address we parse in, and automatically instantiates the
objects contained within it. The JavaScript equivalent would be to use the eval() function on the text that’s loaded, but jQuery deals with this for us so we don’t need to worry about
it. Add the code below inside the $(document).ready function:
var url = “http://search.twitter.com/search.json?q=from%3Awebdesignermag&rpp
=5&callback=?”;
$.getJSON(url, function(data){
// When the data is loaded, this script will run
});

05 Set up a loop
The code we’ve added so far doesn’t display any sign that it’s done anything, but all the data has, in fact, been loaded into your page. Now we need to get the data to print out into our page. It’s important to understand that we’ve created an object by loading the JSON feed. This object is called ‘results’ in this particular case, and it contains an array of items. Each item inside the results object has several properties supplied by the Twitter API. These properties range from the text of the Tweet itself through to the time it was posted, who posted it, who (if anyone) the Tweet was directed at and so on. With this in mind, we need to set up a loop to iterate through the results object, picking up each item in turn and extracting some of these properties, printing them out to screen. In JavaScript, we would achieve this with a for loop, but jQuery gives us the .each function, which makes the code a lot easier to read and understand. Add the followingcode inside the $.getJSON callback function:
$.each(data.results, function(i,item){
alert(item.text);
});

06 Test in your editor or browser

We’ve got far enough now to test our page so far. Save your document and open it in a browser, or if you’re using an editor such as Dreamweaver CS4, which has a live preview of
your code, you can test within your editor. Either way, you should now see a series of five alert boxes when you open your page. Each alert box will contain a Tweet from the feed.
The results are limited to five in number because of the URL parameters we parsed in to Twitter’s API. See the &rpp=5 in the URL we used? Try changing the five to ten and testing
the page again. When you’re done, remove the alert statement, as we’re going to put in our final code in a moment.

07 Consider the design approach

How you choose to display each Tweet will vary according to the rest of your blog design. Here, we’re using the standard theme that ships with WordPress, so there’s quite a lot of scope for how we style the content. If your theme doesn’t suit the style we’re going to be using, adapt the design approach to match your own blog. We’re going to use a small number of fields in our design: the text of the Tweet, the name of the user who posted the message, the date it was posted and finally, the user’s avatar image. We’ll float our image left and align the text elements to the right of the avatar for a simple, straightforward look.

08 Append your content

We’re going to want to specify where our content is inserted, so start off by adding a div tag with an ID of ‘tweetscontainer’ into your page body section.
<div id=”tweetscontainer”></div>
Now we have our container, we’ll append our output inside this. First, we need to grab it inside our script. Insert the code below underneath the line that reads var url=”http://
search.twitter…..”:
var tweets = $(‘<ul id=”tweets”>’).appendTo(“#tweetscontainer”);
This code creates an unordered list, creates a reference to it of ‘tweets’ and appends it inside the tweetscontainer div we just made. Next, we’ll add a list item for each result item
and append it to the <ul>. Add the code below where we previously had the alert() code:
tweets.append(‘<li>’+item.created_at+’: ‘+item.text+’</li>’);
Save and test your page again. You should now see an unordered list with each item
containing a date/time and Tweet text.

09 Add the missing bits
We’ll add the remaining text element we wanted to include; the name of the user posting – in this case the username will always be ‘WebDesignerMag’, but you’ll see later that this
same code will work for any Twitter search query. Change your tweets.append line to read as below:

tweets.append(‘<li><p><a href=”http://twitter.com/’+item.from_user+’/statuses/
’+item.id+’” title=”Click here to view this on twitter”>’+item.from_user+’</a> at
‘+item.created_at+’: ‘+item.text+’</p></li>’);

You’ll notice that we’ve added a link to the specific Tweet page on Twitter as well as the name of the Tweeting user. You can construct any HTML you desire simply by adding it in
the same way.

10 Add some style
Now that we’ve got some Tweets appearing with all the text we need, let’s give it some styling. We’re going to use a fairly straightforward approach. Style the text in the same font as the rest of the page, at 1em, and the links in bold. Add the following style rules within your <style> section:

#tweets {
width: 300px;
margin: 0;
padding: 0;
font-size: 1em;
}
#tweets li {
margin: 0;
padding: 0;
list-style: none;
clear: left;
}
#tweets img {
float: left;
margin: 0px 10px 10px 0px;
}
#tweets li p {
margin-left: 83px;
}
#tweets li a {
font-weight: bold;
text-decoration: none;
}
#tweets li a:hover {
text-decoration: underline;
}

11 Save and test

Save your page again and open it up in your browser to run another test. You’ll see that our content looks a lot closer to our aim now. We’re missing our avatar images, which we’ll
insert next, but notice also that if there are any URLs in the Tweets, they aren’t hot – that is, they aren’t turned into links automatically. We’ll deal with this issue once we’ve got the
avatar image in place.

12 Add avatar images
The content looks good, but as we’ve just established, we’re missing the avatar images. These are hosted by Twitter, and you can access the image URL directly from the JSON feed using the property profile_image_url. Add the code below in-between the <li> and <a> within your tweets.append statement:
<img src=”’ + item.profile_image_url +’” alt=”’ + item.from_user +‘” width=”73” height=”73” />
Then add the CSS rules below to your style sheet area to float the image to the left of your Tweet content:
#tweets img {
float: left;
margin: 0px 10px 10px 0px;
}

13 Make URLs hot
The final thing we need to do is to make those URLs hot. We’ll use regular expressions to do this. There’s not enough
space to explain the finer points of these here, but if you’re unfamiliar with regular expressions, search Wikipedia,
Google or W3Schools for more info. Find the part of the tweets.append code that reads item.text+’</p></li>’; and
replace it the code below. Note that we search for all URLs in the Tweet text, and also instances of @. The latter
is how Twitter users alert each other to their messages; the @ symbol precedes a Twitter username. We’ll make the
@ instances point to the specified user’s Twitter page, and the URLs point to where they look like they point:

item.text.replace(/(\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+)/gi, ‘<a href=”$1”>$1</a>’).replace(/[\@]+([AZa-
z0-9-_]+)/gi, ‘<a href=”http://twitter.com/$1”>@$1</a>’)+’</p></li>’);

14 Test cross-browser
Your blog now features your most recent five Tweets in the sidebar. Congratulations! A word of caution, however; as with any JavaScript coding and CSS styling, you should ensure you’ve tested across all the major browsers for compatibility and bugs. Thankfully, jQuery deals with a lot of the cross-browser differences in scripting, but don’t forget to check your CSS in as many browsers as possible to ensure everything displays as expected.

15 Put it into your blog

We’ve got all the functionality tested and styled up, so let’s get it into our blog. This process will vary from platform to platform, but here we’re using the ever-popular WordPress v2.6. From the admin dashboard menu, choose Design>Widgets and add a new text widget. Edit the text widget and paste your Tweet’s HTML div tag into the widget. Choose Theme Editor and paste your CSS into the main style sheet for the theme you’re using (we’ve got the default K2 theme installed here). Finally, choose the theme header.php file and paste in your JavaScript code within the <head> section of this file. Save all your changes and preview your blog.

16 Other JSON feeds
Now you’ve mastered using JSON feeds, extracting and displaying the data, styling and dynamically creating links, have a look at some of the other social websites you may use. Flickr, for example, offers a JSON feed for photos tagged with particular keywords, users and groups. You can also use the Twitter API to search for keywords or messages directed at specific users rather than posted by specific users. Try changing your JSON URL to http://search.twitter.com/search.json?q=StephenFry&rpp=5&callback=? to see messages directed towards Stephen Fry. Use JSON feeds from your favourite social websites and display their content directly on your blog.

(This article was originally written by Sam Hampton-Smith, published in issue 153)

Extend the power of the basic WordPress configuration with the help of widgets and plugins. Customise existing elements to produce personalised posts and pages.

WORDPRESS IS UNDOUBTEDLY the best known and almost inevitably the most popular content management system (CMS) available to users around the world today. Why is this? Well, mainly because it bypasses the need for an indepth knowledge of programming while still giving users a comprehensive publishing platform to work with. Additionally, it’s nice and easy to install and like the best things in life, it’s absolutely free! WordPress comes equipped with its very own themes: the default WordPress theme based on the famous Kubrick (http://binarybonsai.com/kubrick/) and the WordPress Classic theme. Both these and many other WordPress themes come with a default selection of widgets, including Categories, Tags, Search, Archives and Meta, which can be added and removed as desired. To take a theme beyond the basics, there is a vast library of widgets and plug-ins that allows users to customise WordPress and all that resides in the sidebar. In this tutorial, we’ll show you where to find these widgets and plug-ins, as well as run through how to install a typical WordPress widget. To finish up, we have taken a couple of our favourites and shown them in action.

01 Pick the widget that works for you

The first step to working with WordPress widgets and plug-ins is to locate an item to work with. A good starting point is the WordPress website itself. Head to http:// wordpress.org/extend/plugins/ to view the Plugin Directory. Browse the directory and click a title to view more details, including a description, installation notes, an FAQ, screenshots and a Download link. Hit the Download link and download the folder to the desktop. The vast majority of plug-ins come as a ZIP file, so the first step is to extract the files. Once all the files have been extracted, make sure that the accompanying readme.txt file is viewed before proceeding. This typically gives instructions on how to install the plug-in and other useful information. A typical instruction would include the following (this refers to the Tabbed Widget plug-in): Upload the `tabbed-widgets` directory to the /wp-content/plugins/ directory. The final directory tree should look like: /wp-content/plugins/tabbed-widgets/ tabbed-widgets.php. Almost without exception, the plug-in will be uploaded to the wp-content/plugins directory.

02 Activate plug-in

Now log in to WordPress to view the Dashboard and click Plugins to open the Plugin Management page. This will display the plug-ins installed by default, ie Akismet, and any plug-ins installed by the user under the Inactive Plugins banner. To activate and start using a plug-in, simply click the Activate link related to the plug-in. WordPress will place the plug-in on its own section under the banner Currently Active Plugins. To deactivate the plug-in at any point, simply click Deactivate. This will place the plug-in into a new section named Recently Active Plugins. This will display the plug-in for seven days before returning it to the Inactive Plugins list. Alternatively, click Clear List to instantly add the plug-in back to Inactive.

03 Choosing the Category Cloud

When a plug-in or widget has been activated, it is accessible via Design>Widgets. To start using the widget, first click Add to place on the Current Widgets list. Press Save Changes and head back to the site to view the new widget in action. The first example we have used is a widget called Category Cloud, which can be found on the WordPress website. To change the default settings, click the related Edit link. By default, the widget doesn’t have a title and the font is set to a minimum of 50 per cent and a maximum of 150 per cent. Add a title and modify the font size by adding the appropriate numbers and choosing the desired font unit. For example, we have named the widget and set the minimum and maximum reasonably close together (minimum 80 per cent, maximum 120 per cent). This ensures that the Category Cloud doesn’t look too disproportionate. To complete the widget, choose alignment, the order of categories, how many are displayed, hide options and IDs to exclude. Category IDs can be found by placing the cursor over a category, which will be displayed in the status bar of the browser. When complete, press Change and Save Changes to apply. Now view via the website.

04 Tabbed Widgets

The Tabbed Widgets widget is again found via the WordPress website, and again is installed in the wp-content/plugins folder. After activating the widget, head to Design>Tabbed Widgets. This widget has its own dedicated section. There is the option to create up to eight separate widgets; realistically, though, users are only likely to use one or two at a time. To demonstrate the capabilities of Tabbed Widgets, this tutorial is going to concentrate on creating a single instance. All the techniques learnt here can be applied to the remaining widgets if so desired. The first step is to add a title to the widget. This is displayed on the page if the Show Title checkbox is ticked. By default, the title is not displayed on the page, but whatever title is chosen, this is the name displayed under Widgets. Now select the desired page, widget, etc, from the drop-down list for each of the tabs that are to appear in the widget. Give each one a relevant title and press Update Options. There is the option to add curved corners for each of the tabs. Simply click the Enable rounded corners tab checkbox. By default, the widget will be displayed as tabs. To display with the accordion effect, check the related radio button. To apply, press Update Options.

05 Widget in action

Creating the widget is the first step to getting the widget onto the page. Now head back to Widgets (Design>Widgets) and you will see that the new addition has appeared in the Available Widgets list. To add the widget to the sidebar simply click Add that resides next to the widget name. Now arrange the widgets accordingly and press Save Changes. Head to the top of the page and press Visit Site to view the widget in action. To remove the widget from the list simply head back to the Dashboard and Design. Press Edit next to the appropriate widget to place back in the Available Widgets list.

06 XML site map generator for WordPress

This plug-in (found via the WordPress Plugins Directory) helps create a Google Sitemapscompliant XML site map of a WordPress blog. The plug-in supports automatically generated pages, ie posts, and any custom pages the user creates themselves. The beauty of the plug-in is that it updates the site map every time the user edits or creates a new post. Plus, any search engine that supports the site map protocol, ie Google, MSN Search, Yahoo! and Ask, are notified about the update. The plug-in is installed in the wp-content/ plugins directory, and will be found via the Settings tab. The plug-in has an impressive array of options, which can be at the default setting if desired. Options worth noting include Limit the number of posts in the sitemap. This ensures that only the latest posts are displayed if activated. Additional Pages allows users to specify files or URLs that reside outside the WordPress folder location, eg, www.mysite. co.uk/blog. This would typically mean that the homepage needs to be added. Click Add New Page and fill out the details. Sitemap Content gives the option what to include in the site map, ie posts, categories, archives, tag pages, etc. Finally, Priorities allows users to dictate which pages should prioritise over others. There is a 0-1 number system for each page type, so select a number, eg, 0.3, 0.7, with 1 ensuring top priority.

07 Configurable Tag Cloud options

The tag cloud widget commonly found with the basic WordPress installation is a simple, nonconfigurable affair. It does what it does, but installing the Configurable Tag Cloud widget (http://leekelleher.com/wordpress) ensures far more control over the output. The widget is installed in the wp-content/plugins folder and can be found via the Settings tab. Alternatively, after the widget has been added to the sidebar via Design>Widgets, its options can be modified via its location. The widget is simple and intuitive to use, and the starting point is Title. Add an appropriate title before deciding on the number of tags to display. If the chosen number is less than the total number of tags, the widget decides which tags are to appear in the tag cloud. Choose the smallest and largest font size, trying to keep reasonably close to avoid unsightly gaps in the tag cloud. Next, there is the option to choose a colour range for the tags, so add the appropriate hexadecimal code. Cloud Format offers Flat for a standard tag cloud, while List presents the tags in a list, ascending or descending. There is the option to integrate categories in the cloud, including empty ones, and display the post count. The final options allow the tags to be sorted by name, count or random. Hit Change when finished and Save Changes to view on the page.

FIVE ESSENTIAL WORDPRESS WIDGETS

WordPress has a vast library of widgets available via the web. Here, we pick five of our favourites.

WordPress Automatic upgrade
http://wordpress.org/extend/plugins/ wordpress-automatic-upgrade/
This widget allows a user to automatically upgrade a WordPress installation to the latest one.

Video Widget
www.nikohk.com/plugin-wordpress-video-widget
Add one or more videos in the sidebar without the need for any HTML code. Support includes YouTube, Dailymotion, Google Video, Flash Video, Vimeo, Flickr and many more.

Dashboard Editor
http://anthologyoi.com
Take control of the WordPress dashboard. Get rid of the entire dashboard or remove individual unwanted components.

My Page Order
http://wordpress.org/extend/plugins/my-page-order/
Avoid the awkward default setup and set the order of pages through a drag-and-drop interface.

MobilePress
http://mobilepress.co.za
Take a WordPress blog and render it for mobile handsets, such as the iPhone and Windows Mobile.

We uncover the secrets of a WordPress theme and show you how to add elements to create a personal design

WordPress has become the web’s favourite publishing platform thanks to its simplicity, usability, aesthetics and undoubtedly, its gratis status. Its rise in popularity has seen the proliferation of hundreds of sites offering thousands of themes to give users the look and feel they want in an instant. There are undoubtedly some very good themes on the market, but while a predefined theme offers simplicity and instant impact, it doesn’t offer complete personalisation. There are plenty of free themes that are perfect as a base for a blog, but modification and personalisation will take it to the next level.
WordPress themes are essentially a collection of PHP tags and a style sheet that can be modified to create a personal theme. We have taken the Coffee Desk theme found at http://wordpress.org/extend/themes/ and used this as the base of the new personalised theme. This is a two-column theme with a right sidebar, matching the layout we have designed for.

01 Download and set up

Head to http://wordpress.org/download/ and click the Download WordPress link and save to the desktop. Now unzip all the files in the WordPress folder. The next step is to create a database for WordPress on your web server. This may differ from account to account, but the principle is the same. We are using cPanel and phpMyAdmin, as supplied with the web account, to create the necessary database. In cPanel, go to MySQL Databases and create a new database. Give it a relevant name, ie ‘blog’, and at the same time create a new username and password. Now add the user to the database and assign it All Privileges.
Now head back to the unzipped WordPress folder and rename the ‘wp-config-sample.php’ file to ‘wp-config.php’. Open wp-config.php to view the following:

define(‘DB_NAME’, ‘putyourdbnamehere’); // The name of the database
define(‘DB_USER’, ‘usernamehere’); // Your MySQL username
define(‘DB_PASSWORD’, ‘yourpasswordhere’); // …and password

Enter the relevant details and save. Now upload the entire contents of the downloaded WordPress folder into a directory on the server, eg, www.mywebsite.co.uk/blog.

02 Install WordPress

With all the building blocks in place for WordPress, the next step is to start the “famous five-minute installation”. Open the browser of choice and run the WordPress installation script by accessing it via the URL, eg, www.mywebsite.co.uk/blog/ wp-admin/install.php. Remember to replace the web address and subdirectory with the ones you created. This will present the Welcome screen. Enter a Blog Title and Your E-mail and press Install WordPress to begin the process. This is all there is to it. Note down the username and password and press Log In to start. When using WordPress from now on, log in via www.mywebsite.co.uk/blog/wp-login.php.

03 Install a theme

After installing WordPress, the next step is to find a theme that best matches the style you wish to use. We have included a number of free templates on the disc, but for the purpose of this tutorial we have chosen to use the Coffee Desk theme found via www.wordpress.org. Download the theme before uploading the folder to the wp-content/themes folder found in the location used when installing WordPress, ie www.mywebsite.co.uk/blog/wp-content/themes. If you wish to keep the original theme in its original state within WordPress, simply copy and paste the same theme with a new name into the folder location mentioned above. Now to get started, head to Design>Themes, select the desired theme and click the Activate link to apply the chosen theme. Now when you view via the installation location, WordPress will have the new theme. Before continuing, any images that are to be applied to the new theme will need to be uploaded to the appropriate folder. Using an FTP client, upload the desired images to the images folder located at www.mywebsite.co.uk/blog/wp-content/themes/nameoftheme/images. Replace ‘nameoftheme’ with the name of the chosen theme.