Configuring WordPress Themes
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
Contents |
[edit] Choosing and Installing Themes
In content management systems, it is a necessary feature to be able to change the look and feel of your website without knowing how to code in HTML and CSS. Almost every CMS supports the facility to allow users to change the look of their site. These managed looks are usually called themes. There are thousands of themes available for download free of cost. These themes are developed by members of the WordPress community and listed in a separate section in codex (http://Codex.wordpress.org/themes). Before using any theme, you should know some of the basic things about them. You must know how to install them, how to choose the themes that best suit your content and audience, and how to modify static content inside these themes. In this tutorial, we will discuss all of these.
[edit] Finding Themes
Themes are basically distributed as compressed archives. To use them, all you have to do is to unzip them and place them in a special folder inside your WordPress directory, so it is not a complex process to do on your own. There are different websites where you can find themes in a downloadable format. Most of the theme developers offer their themes for free; however, a very few of them offer their themes for a few bucks. Some also offer customized themes according to your need, but of course that is considered as a paid service. If you are not satisfied with what you get for free, you may go for specialized themes. However, it is not a wise decision to head towards paid themes if you can get a similar one for free. If you finish this book step by step, you will also be able to develop themes totally by yourself.
Let us find some themes for our use. These themes are listed in mainly two categories, two-column themes and three-column themes. However, there are also one-column themes and four-column themes available in the community. Some of these themes are minimal and text-based; some of them are graphical. We will also see some of the very common themes well reputed by the WordPress community.
[edit] The Official WordPress Theme Page
WordPress distributes some beautiful themes from its original site. These are six in number, and are easy to experiment with. The URL for downloading these themes is http://wordpress.org/extend/themes/. You will find the Green Marine, Blix, Connections, Ocadia, Pool, and Almost Spring themes here. Among them, the Green Marine, Blix, Connections, and Almost Spring themes are very popular. Take a look at the WordPress theme-download section. One interesting thing is that all these themes are two-column themes, which is the most popular theme format.
[edit] Alex Marine's Theme Browser
Alex Marine is a developer who has spent a lot of time in developing various plug-ins, extending WordPress, and arranging the WordPress theme competition. His "WordPress 1.5 competition" had huge response. He has developed a theme‑browser website where you can select any theme from a drop-down box and instantly check the look of that theme. The URL of this theme browser is http://www.alexking.org/software/wordpress/theme_browser.php.
The winning themes from this competition are listed as follows:
- Connections
- Rin
- Red Train
The 'Most Creative Design' prize was won by the Head theme. The 'Pixel-Perfect Design' prize was won by the RDC and the FastTrack themes. The 'Most Versatile Design' prize went to the Zen Minimalist, Sharepoint Like, LetterHead, and Man~ja themes. You can see the complete list of winners at http://managedtasks.com/wpthemes/blog/2005/03/31/the-winners/.
[edit] WRC Theme Browser
There is another theme browser available called the WRC theme browser. This browser also enables you to view the look of every skin, but in a small grid, so you can view more than 16 themes at a time. You can also sort them by different options like one-column themes, multiple-column themes, alphabetically, widget-ready, plug-in required, date of publication, sidebars, etc. This is a very useful option. The URL of this theme browser is http://themes.wordpress.net.
You can also see the list of available files and a small description of the theme when you select it from the list.
[edit] Central Theme List at Codex
This is the biggest repository of themes for WordPress. It is an editable Wiki where developers can list their themes after release. Codex displays themes under ten major categories like one-column themes, two-column themes, unique themes, widget-ready themes, etc. The URL of this page is http://codex.wordpress.org/Using_Themes/Theme_List.
[edit] Emily Robbins's Theme List
Emily Robbins is a blogger who has been researching about blogs and blog designs for a long time. She has listed more than 805 themes in her website in different categories. This site is worth looking to search for your desired theme. The URL of her theme list is http://www.emilyrobbins.com/how-to-blog/comprehensive-list-of-615-free-wordpress-15-and-20-themes-templates-available-for-download-266.htm.
[edit] Blogging Pro Theme List
Blogging Pro is a very famous site that delivers news, tips and tricks, and downloadable things for different kinds of blogs. This site also lists WordPress themes sorted date-wise. They review each of these themes manually. It's a great site to check recent themes. You can find the Blogging Pro theme list at http://www.bloggingpro.com/archives/category/wordpress-themes/.
[edit] Paid Theme List at Template Monster
Template Monster is a site designed especially for amazing web templates and themes. All themes and templates are paid and you can customize themes according to your need. They offer original source files with each of their templates. You can find the Template Monster WordPress theme list at http://www.templatemonster.com/category/wordpress-themes/.
[edit] wp4themes' Theme directory
wp4themes is a very new site provide for large collection of free WordPress blogs template organized by category and property. Themes are searchable and may be rated by users. All templates are testable via live preview . You can find the theme list at http://www.wp4themes.com/.
[edit] Premium WordPress
Premium WordPress brings you the best of WordPress. It showcases the best free and premium WordPress themes, plugins and websites as well as bring you the latest news, reviews, updates and resources from the premium side of WordPress.
[edit] Factors to Consider while Choosing a Theme
When you choose a theme, you should consider different factors like the content of your blog, the audience, and the meaning of the colors used. For example, you may see http://blogs.msdn.com and http://googleblog.blogspot.com. They are simple and elegant. They also serve their content in a formal and concise way so that it's a pleasant experience for all to visit them. This is just an example, but you may have to consider some issues like this while choosing a theme for your site. However, there is nothing to worry about; you need not be a color psychologist or a specialist in user experience. In the following sections, we will discuss some basic factors that should be considered before applying themes to a site.
[edit] Content of the Blog
It is a wise saying that "content is the king". Whatever your blog is about, content is at the heart of it. While choosing your theme, please keep a sharp watch on the subject of your content and whether the theme represents all the content that you want to show. Some themes can show static pages, while some can't. When you want to tell something that does not fall under a specific blog category, for example, about you or about your works and projects, that content is considered as static content. Content of this type is represented in separate pages. So when you plan to display static pages, your theme must be capable of showing them. Otherwise, you will add pages through the WordPress administration panel and they will not even be displayed.
Another important part of a theme is a "search" field. In this textbox, users can search for some specific keywords in your blog. Not all themes support searching. So please consider this option while choosing a theme, if you need a search button.
In themes, there must be an available place where you can add your favorite links or blogrolls. Themes must also support an RSS button, both in RSS and Atom format.
A typical theme must support archives where your blog posts are categorized by the date of posting. In WordPress themes, you can display your blog posts categorized by month, week, or date. These categories are called archives. Another important thing that themes should support is the display of available categories to which the posts belong. If a user can see the available category list, it will be easier for him or her to sort out what he or she is looking for.
In every post, a theme must supply a link for trackbacking that post. There must be a place where you can comment on every post.
Themes should also support pagination, which means having a navigation system to go to the previous and next pages. Usually in a WordPress blog, ten posts are shown in each page. So if you want to see previous posts, there must be a way to navigate through them. In the sidebar, many themes can display the latest posts and latest comments. Whenever a single post is displayed, a list of the relevant posts is also displayed in some of these themes.
Another very important issue is that some themes come with an inbuilt horizontal menu or vertical menu. Some of these themes are fine, since they use original contents of your WordPress blog posts, pages, and other stuff to create these dynamic menus. However, most surprisingly many themes come with some sticky content. For example, in some themes there is an option "About the Company" in the horizontal or vertical menu and when someone clicks on it, it redirects to a page that you can never create via the admin panel, or you can supply the contents for those pages. Moreover, it is totally irrelevant for an individual blogger to have a default link "About the Company" in his or her blog. To remove those default menus, you have to modify themes manually and for this programming as well as HTML knowledge is required, which regular, non-tech bloggers may not have.
So while choosing themes, keep your eyes on these factors and judge whether each theme can really represent your content. Besides, keep in mind that people like simplicity. So if your readers are corporate users, try to be simple and precise.
[edit] Audience
Although there is no strict rule for choosing themes according to the article type, but if you look around, you may see that the appearance of a theme should match with the age of your audience, their mood, and their style. When you are writing for kids, you should choose something funny or colorful. When you are writing for travelers, your theme color should be green or blue, i.e. the color of nature. Travelers are always colorful, so try to use some bright and shiny themes. If your readers are corporate users, try to be precise while choosing these themes. Use your intelligence while choosing a theme according to the audience.
[edit] Colors and Fonts
Colors are also a very important thing when you consider the mood of your audience, and of course they are also relevant to the content of your blog.
Colors can give a very pleasant experience to your user, if you choose them correctly. Be very careful while mixing up different colors, especially for typeface. A very good color for the font may look very odd if the background color doesn't match with it. The colors that you choose for your blog will also determine the readability of your content. Nevertheless, have fun with colors.
Font is another issue to consider while choosing themes. Some fancy themes may use a lot of font faces in a theme, but that really degrades the user experience. Whether it's your own theme or a third-party one, try to use the minimum number of fonts. As far as possible, stay with only one font (size may vary for different sections, like header, footer, etc.) or at the maximum two.
There are some sites that really care about accessibility issues. Some plug-ins are available for switching between font sizes. For example, not all people may feel good with the same font size; these plug-ins give them the facility to increase the font size at run time.
[edit] Theme Size
Many of these themes use graphical content. Some of them style their appearance using just CSS, some use both CSS and Images. If you look around some very popular themes like Green Marine, Almost Spring, or Blix, you will notice that they do the styling entirely using CSS; so they are small in size. Connection, another popular theme, uses a banner that is also very small in size. So you must make sure that your theme is small in size, and easy to load for users having slow Internet connections. If you use high-speed broadband connections, size doesn't matter for you. However, the fact is that you are not writing a blog for yourself. There will be readers from around the world where high‑speed Internet connection is too costly and they depend on dial-up or slow connections. So if your blog takes minutes after minutes to load, the chance is that the viewer will not feel comfortable and will be unlikely to come back to read it. Choose a theme that is decent, easy to navigate, easy to load, and most importantly comfortable to read through.
[edit] Installing and Changing Themes
So far we have learned where to find exciting themes and how to choose them. Now it's time to install themes practically on your WordPress blog. Themes are basically a set of files. Installing a theme is a very easy process. You have to extract the archive and paste the extracted content in a special folder called themes inside your WordPress folder. The following steps will guide you through.
[edit] Step 1: Download the Theme You Want
Wherever you can find your favorite theme, download it from there.
[edit] Step 2: Extract the Content
Now extract the content of that theme file to a folder on your local machine. If you plan to use a web-based FTP client like Net2FTP, then you can skip this step since with Net2FTP you can upload archived files in your FTP server and Net2FTP will automatically extract them if you need.
[edit] Step 3: Upload
Now you need to upload the contents that you have extracted from your theme to the themes folder of your WordPress blog. For this purpose, you must have an FTP client. You can either use a desktop client (my favorite is Filezilla; it's a free and an open-source program that you can download from
http://filezilla.sourceforge.net/), or you can use a web-based FTP client such as Net2FTP from http://www.net2ftp.com. Uploading via Filezilla
First connect to your FTP server using Filezilla and locate the wp-content/themes folder inside your WordPress folder. Take a look at the following screenshot:
You can see only two themes here; one is classic and the other is default. WordPress comes with these two themes by default. Now locate the theme you want to upload. In the left-hand side pane of Filezilla, you will find the files on your local machine. For example, I am going to upload the almost-spring theme from the G:\Wp\themes folder.
Now drag the theme folder from the left pane to the right pane. It will be uploaded automatically.
That's it! You are done.
[edit] Step 4: Test the Theme
To change the theme and test newly installed themes, you must log into the administration panel. There is a menu named Presentation that will help you to change themes for your WordPress installation. Now it's time to test it practically. Log into the administration panel and click on the Presentation menu.
Please notice that our recent addition, Almost Spring 1.3, is visible on this page. To change your theme to the desired one, just click on the image.
Now Almost Spring is our selected theme. If you browse your WordPress URL now, you will see the change.
Whenever you add a new theme in the themes folder, you will find it in the Presentation panel.
[edit] Typical Appearance of Different Themes
Here is the appearance of some typical one-column, two-column, three-column, and four‑column themes.
[edit] One-Column Themes
One-column themes just display posts, and sometimes have a sub-menu at the header and the footer; there is no sidebar. Let us take a look at a typical one-column theme. The theme we display here is Off The Wall developed by Sheba Um Malek.
[edit] Two-Column Themes
Two-column themes display a column for posts and also a sidebar for displaying other information. For most examples in this tutorial, we will use the Almost Spring theme, which is a two-column theme developed by Becca Wei.
[edit] Three-Column Themes
Three-column themes display one column for posts, and the other two columns for links. Let us take a look at the "Identification Band Triplet-Centered Boyish Style" theme version 2.0 by Frederic de Villamil aka neuro. You can find his other themes at http://t37.net/identification-bands.
You can choose another flavor for these three-column themes as shown in the following screenshot:
[edit] Four-Column Themes
Four-column themes are rare, though there are some very good themes available. These themes display posts in one column and the other three columns are used for different administration tasks. You can find four-column themes at http://fredericdevillamil.com/pages/themes#fourcols.
[edit] Some Unique Themes
There are some unique themes available, which enable several administrative panels when installed that are not generally available. Let us take a look at two of them. The first one is Kiwi, a fantastic free theme that can really bring an elegant look to your blog.
You can find Kiwi at http://no.oneslistening.com/. Kiwi is developed by Yas.
Kiwi enables some administrative panels. With Kiwi, you can make any post a featured one. Kiwi also enables you to set some option froms the Options menu; you will find it named Kiwi.
From the post menu, you will also find some options from where you can select any post as a featured post.
There is another theme that can enable outstanding features for your WordPress blog. This theme is not free for commercial use. However, you can use it for almost any purpose if you like to use it personally. The theme is Semilogic and you can find it at http://www.semiologic.com/software/sem-theme/. The theme will convert your WordPress blog into a manageable CMS. You will have some great features with this theme.
After installing Semilogic, you will find several menus in your administration panel. For example, if you look at your Presentation menu, you will find the following:
Semilogic enables the following administrative panels under the Presentation menu.
[edit] Basic Modification
There is no guarantee that themes developed by other people can fully satisfy your requirement. You may need something more that is not available in those themes. So the only way you can achieve that functionality is by developing themes on your own, or by customizing an existing theme. Here we will discuss how to enable and disable some functionality in WordPress themes.
[edit] Structure of a Theme
Before starting modifications, you should have a proper understanding of the files that are responsible for themes. When a page is rendered, it calls the index.php
file in the particular theme folder that is currently set as active. The index file first loads the header, then displays the posts, then loads the sidebar, and finally loads the footer. So for the four basic modifications, we need to modify the file that is responsible for the sidebar. It is usually called sidebar.php.
To modify code in these theme files, you will get a separate administration panel under the Presentation menu. The sub-menu is called Theme Editor. You can edit either using this panel or manually by editing files under the theme folder. For small modifications, the Theme Editor is really handy.
Here you will see the code of the CSS file of the currently selected theme. You will also see all the files in the current theme on the right-hand side pane. If you click on Sidebar on the right-hand side, you will see the code of that file.
[edit] Enabling/Disabling Page Menu in the Sidebar
If you open the sidebar for editing, using the theme editor or manually, you will find a line where the page menu is rendered. The line is as follows:
<?php wp_list_pages('title_li=<h2>' . __('Pages') . '</h2>' ); ?>
The function wp_list_pages() displays all the available pages in a list. The parameter Pages is the title of the section. So if you change Pages to anything else, like Navigation, you will notice the change in the theme.
<?php wp_list_pages('title_li=<h2>'.__('Navigation').'</h2>' ); ?>
If we remove the code or just comment the line as shown next, the page menu will disappear. Similarly, if there is no page menu in a theme, we can add this line to enable it.
<?php //wp_list_pages('title_li=<h2>'.__('Pages').'</h2>' ); ?>
[edit] Enabling/Disabling Search Bar in the Sidebar
Search is a very useful feature in a WordPress blog. Visitors can search for a specific keyword in your blog. If you don't find any search bar in a theme, you can modify index.php (the main index template) to achieve the functionality.
Usually search bars are placed in the sidebar. So if you find the search bar in any other place, for example in the top menu, there is a fairly good chance that it is inside the header.php file. In most cases, the search form is placed inside sidebar.php. The file that is responsible for displaying search results is search.php. If you look at the index.php file of the Almost Spring theme, you will find that they include the search bar using a separate get_sidebar() function that actually includes searchform.php. Inside the search form, you will find the <form> element for search.
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" value="<?php _e('Search'); ?>" />
</p>
</form>
In other themes like Connections, Pool, and Green Marine, this code is embedded in sidebar.php. In some themes like Blix, the search form is embedded in header.php. You can easily locate the search bar if you analyze the appearance of your theme as well as the index.php file.
Let us disable the search bar. All you have to do is just comment the preceding code. In HTML, if you place some code inside markers, it will be considered as a comment and will not be rendered in the browser. Let us modify the code and make it look as follows:
<!--
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" value="<?php _e('Search'); ?>" />
</p>
</form>
-->
Now refresh the blog and you will notice that the search bar has disappeared. If you find the search bar missing in any theme, just add the preceding code at the appropriate place and you will obtain the search bar functionality in your blog.
[edit] Enabling/Disabling Calendar in a Theme
If you can display your posts in a calendar, it will be very useful for your visitors. They can jump to posts of any date using this calendar. Let us look at a sample calendar.
This is a sample calendar in WordPress blog. WordPress has built-in functions for generating such a calendar. Please note that the dates on which you made some post, are highlighted and are clickable. For example, in the preceding calendar, you can click on 7th May to go to the post that you made on that day.
To enable the calendar in WordPress themes, just add the following code in sidebar.php:
<li id="calendar"> <?php get_calendar(); ?> </li> <pre> Sometimes, in some themes you may need to add the following lines: <pre> <ul> ..<li id="calendar"> ....<?php get_calendar(); ?> ..</li> </ul>
That's it!
[edit] Adding Static Content in the Sidebar
Usually a sidebar is generated dynamically, with various types of links. If you want to add some static content to the sidebar, open the sidebar.php file and add some code like the following:
<h2>About Me</h2> <ul> <li> Hi I am Hasin Hayder, You can find my personal blog at <a href='http://hasin.wordpress.com'>The Storyteller</a> </li> </ul>
You will see the output as follows:
You can add something very special about you as static content in the sidebar.
[edit] Additional References
- For instructions on Developing WordPress Themes, click here
- For instructions on installing and setting up WordPress, click here
- For instructions on Troubleshooting WordPress Installation, click here
[edit] Source
The source of this content is Chapter 3: Choosing and Installing Themes of WordPress Complete by Hasin Hayder (Packt Publishing, 2006).
