Lesson 10. Using Themes on Your Own Site

This lesson covers how themes can affect the form and function of your own self-hosted WordPress site and what types of layouts are available. You also will install a new theme to your newly installed blog.

Changing the Look and Function of Your Site

WordPress was originally intended to be a blogging platform, and it is really good for that purpose. However, you might want to use WordPress for other purposes, too. Are you are a photographer who wants to showcase your images or a cartoonist who wants to start a web comic? These are just two examples illustrating where the standard WordPress design may not suit your needs.

If you are a photographer who wants to show your work as a photo-blog, for example, you might want to display a large photograph on the front page for more of a gallery feel. Then you can include thumbnails on the side for easier navigation so that your readers can find your other works.

In the case of a web comic, you might want to show your latest comic strip at the top of the site until you post the next one and allow the readers to flip through older strips as they view your archive. And, of course, you want to keep a regular blog all at the same time.

Because there are so many WordPress themes in a variety of styles, having a clear idea of what direction you want to go can help you in your decision.

Theme Types

When you start to look at themes, you will notice that there are as many variations of styles as there are themes for WordPress. There are fixed width, variable width, two-column, three-column, free, and premium. Before deciding on a style, first consider your blog content and readers.

If your blog is for a business, you may want something more corporate or business-like. If your blog is for you or someone else’s personal site, you may not need to be so straightforward with your theme and therefore can select something more along the lines of your personality.

Finding a unique style for your blog and its voice can be a challenge. It might make sense to hire a web developer and let her design a theme from the ground up, but this task may be as simple as finding the right theme and doing a little customization. Perhaps you or someone in your organization is familiar with cascading stylesheets (CSS) and a little HTML. In that case, you can easily take a theme you find online and change it to meet your needs. Or developing your theme may be as simple as changing a logo and colors.

Free Versus Premium

I don’t want to start a debate on why premium themes are better than free themes or vice versa. I will, however, break down this issue to the lowest common denominator: You get what you pay for. There are a lot of high-quality free themes available for WordPress, many of which are available directly from the WordPress Dashboard. On the other hand, there also are a lot of high-quality premium themes for WordPress that you might like and can find simply by doing a little Internet searching.

So what do you get if you go with premium versus free?

Often premium themes come with some level of support in the form of a developer that you can contact with installation problems or even customization help. Perhaps for the cost of your theme or a few dollars more, you can have an exclusive license to use the premium theme and no one else can. This would ensure your unique look.

Alternatively, using free themes means that you can afford to change your look from time to time. You would be on your own to install or customize them, but you do get a little more freedom in return at little or no cost. Usually, the author asks only that you include a link to his site, which is common courtesy.

Choosing between free and premium themes boils down to what your personal preferences and needs are.

Layouts

Depending on the type of site you are running, you may need room in a sidebar for links and other functionality. Maybe you need more than one sidebar, and that is where columns come in. The number of columns you see when searching for themes refers to the structure and layout of your page.

The default theme that comes with WordPress is a two-column theme in which one column is larger than the other (see Figure 10.1). The larger column is meant to display your blog posts, and the smaller, more narrow sidebar column is meant to display links, search functions, and other widgets that you choose to display. (You can read more about widgets later in this lesson.)

Figure 10.1. The default two-column theme.

As you can see, two-column themes offer a lot of flexibility and space. They also don’t take up all the browser real estate to allow for readers who have lower screen resolutions and smaller browser windows. Other options for two-column designs include having the narrow column appear on the left or right of the larger content column.

Three-column layouts are similar to two-column layouts except that they have one larger content column with two smaller columns for links. Three-column layouts are also good when you’re trying to organize data that you do not want pushed below the fold of the site.

When you use the three-column layouts, it is common to place your two narrow columns either both on the left or right, or split with the content column between them. Some themes give you the option to specify how the columns are arranged, whereas others do not, so you get what you get.

Fluid Versus Fixed Layouts

With all types of layouts, you have to decide if there is going to be extra space on either side of the content area or if your site will fill the full width of the screen. How much space the site fills is determined by fluid or fixed themes.

Using themes with fluid styles means that as you resize your browser, your site expands and contracts to fill up the space. Additionally, as visitors come to your site, they are presented with your site that fits their browser. With a fluid design, your site does not look odd with a small, fixed-width column or a compact content area if the viewer has room to display.

Fixed themes are the most predictable. Unlike fluid themes, fixed designs are essentially the same size design on anyone’s browser, which offers you the advantage of having your graphics and text in a predictable format. This format is especially important if you have a theme that is image based, meaning the background and other parts of the site are made up of a series of images that need to line up correctly to look right.

Searching for and Installing a Theme

Now that you have an understanding of the options that are available when beginning your search, you can start sorting through the large assortment of themes, choose one, and install it.

Locating Themes

Finding a theme is probably the hardest part of installing a theme for your site. As mentioned earlier, hundreds and thousands of themes are available to you, free or otherwise, and they come in just about every color in the spectrum.

The main source for finding a theme you like is the Internet itself, and another is the WordPress.org site. Free themes are the easiest to download and try on your site, but the directions for installing a theme are the same whether the theme is free or premium.

Browsing Themes at WordPress.org

You can access the WordPress database of free themes in two ways. You can access the site by pointing your browser to http://wordpress.org/extend/themes/ or you can use your WordPress Dashboard to search for and download themes directly into WordPress itself.

When you open http://wordpress.org/extend/themes/ in your web browser, you are presented with several site features that help you start looking for themes (see Figure 10.2):

• Search Box—You can search for tags or keywords that you think describe what you are looking for, such as green and two-column.

• Featured Themes—These themes are chosen randomly and change periodically.

• Most Popular—This list includes themes that get a lot of downloads and are used by a lot of users of the WordPress Themes directory.

• Newest Themes—These themes have recently been added to the Themes directory.

• Recently Updated—These themes have been recently updated by the author.

Figure 10.2. The WordPress Themes directory.

The WordPress Themes Directory is a good start and gives you several options to start browsing themes right away. All themes on the site are tagged with keywords that make them easy to search for. For example, if you search for Photo or Picture, you find WordPress themes that mostly relate to photography themes or galleries. Themes are also tagged with keywords about their layout and main color scheme.

If you are looking for a fixed-width theme that is mostly green, search for fixed and green and you see a selection of mostly fixed-width, green themes.

Additionally, when you click Check Out Our New Filter and Tag Interface on the main page at WordPress.org’s Themes page, you are presented with a set of check boxes where you can click the keywords that you are looking for and continue your search (see Figure 10.3).

Figure 10.3. Searching for themes with tag selection.

After you click on a theme and view its profile, you can see the theme’s description and a link to its stats (see Figure 10.4). The stats provide you with some information on how many times it has been downloaded over time. This information might or might not be of interest to you. You might want a popular theme, which would be one that is downloaded a lot. However, you might prefer to have a unique theme, in which case you can steer clear of themes that are downloaded frequently and choose something else instead.

Figure 10.4. Viewing a theme’s details.

The description tells you a bit about this theme, providing the layout along with a thumbnail image. If you click the thumbnail or the green Preview button to the right of the page, you are presented with a large preview of the theme in action to see whether it is what you’re looking for. This feature makes it much easier to shop around for a look you like.

Instead of using the WordPress site, you can also browse the same themes from inside your WordPress Dashboard (see Figure 10.5). Go to your Dashboard (www.yoursite.com/wp-admin) and log in. While you’re viewing your Dashboard, on the left side there is a block that has the title Appearance. Inside the block is a link called Add New Themes. Clicking this link takes you to a search that is similar to what’s on the WordPress site.

Figure 10.5. Installing themes from inside your own WordPress.

The main differences between searching for themes on the WordPress site and searching from your Dashboard are that on your Dashboard, your search results (see Figure 10.6) are displayed in a grid fashion with thumbnails and descriptions, and you have a couple of additional options.

Figure 10.6. Theme search results on your Dashboard.

Clicking Details gives you details on the author of the theme, ratings from other users, and the last time it was updated. Clicking on the thumbnail image or the Preview link brings up a larger preview, just as before on the WordPress site. To close the preview, click the X in the top left of the new window.

One option that you didn’t have before is the ability to install themes directly from your search. To install themes directly from your search, follow these steps:

1. Click the Install link, which opens the dialog box shown in Figure 10.7.

   Figure 10.7. Ready to install a theme from your WordPress.

   

   Tip: Where’s the Install Now Button?

   You may have to scroll down a little to see the Cancel and Install Now buttons.

2. Click Install Now.
3. Enter your File Transfer Protocol (FTP) credentials. You should have this information from an earlier lesson, or your Internet service provider (ISP) can provide that information for you.
4. Fill in this form with your username, password, hostname, and the connection type (see Figure 10.8). Usually, the Connection type is FTP unless otherwise specified by your ISP. When you are ready, click Proceed.

Figure 10.8. Enter the connection information.

On the following screen, you see that your theme was downloaded, unpacked, and installed (see Figure 10.9). At this point, you can preview your theme and actually see what it looks like with information from your site. If you do preview it after installation, you also see the X at the top left to close the window, and on the right side you can activate the theme. If you click Activate, the theme is immediately enabled on your site.

Figure 10.9. WordPress’s installation confirmation screen.

Downloading and Installing Themes

If you do not have access to automatically install themes on your site, you have found a theme on another website, or you have purchased a premium theme, installing a theme is still easy.

On the WordPress.org themes site (http://wordpress.org/extend/themes), select a theme that you think will work on your site and you are happy with. After you choose a theme and are looking at its profile page (refer to Figure 10.4), click on Download.

Most WordPress themes you download are in the form of a zip file that you must save and unzip; this includes premium themes also. Your browser asks you where you want to download your zip file. Save it to a location on your computer that you will remember, such as a download folder or your desktop.

When the download is complete, go to the folder where you downloaded your theme. In that folder, you need to unzip your theme file; it creates a folder. The folder it creates should be named the same as the theme. For example, if your zip file is called AwesomeTheme-2.2.3.zip, your new folder should be called AwesomeTheme.

Use your FTP client and connect to your hosting account. On the right side of your client, you should see the remote files. Double-click on the folder named wp-content. Now double-click on the folder named Themes. You should see two folders: classic and default. These two standard themes come with WordPress out of the box. The folder name’s default is the theme you see on your WordPress site as soon as the installation is complete.

In the left pane of your FTP client, navigate to the download folder that has the new theme you downloaded.

To upload your theme properly, upload the entire folder to your website. In this example, you would upload AwesomeTheme to your site. After the upload is complete, you should have three folders: classic, default, and AwesomeTheme.

Now that your theme is uploaded, it’s time to turn it on.

Applying Themes

Changing between themes, now that they are installed, is fairly straightforward.

1. Using your web browser, go to your Dashboard (http://www.yoursite.com/wp-admin).
2. On the left side of your Dashboard is a block called Appearance. Open that block and select Themes.
3. On the Managing Themes page, all the themes you have installed are listed. The theme listed at the top is your current one. Activate the theme you want to use by clicking the Activate link.
4. If you want to see how a theme is going to look before turning it on, click the Preview link or click the thumbnail.

   As you have seen before (refer to Figure 10.7), a preview appears. From the top-right corner of the preview, you can activate the theme if you are happy with its appearance.

Widgets

With your new theme installed and running, you might want to move things around a little bit. Perhaps you have a two- or three-column layout and want to move some of the items in those columns around a little bit or possibly put something in a column of your own. You can use widgets, which are similar to small plug-ins designed so that you can move them easily from place to place on your site, specifically in the sidebars.

From your Dashboard, go to Appearance, Widgets. On the resulting page, you see a list of available widgets in the center of the page and the columns available to your theme on the right (see Figure 10.10).

Figure 10.10. Available widgets with a one-column theme.

Below each widget is a quick description of its function. To move a widget to a column—in this case, Sidebar 1—do the following:

1. Click your mouse on a widget and hold it.
2. Now drag and drop it over the column where you want it to appear.
3. When you drop the widget where you want it, usually it asks you for a title. This title is optional. If you want to call the Search widget Find It, for example, this is the place where you would assign it a name. Leave the field blank, and it defaults to the name of the widget.

Other widgets have more options than just the title. So be prepared if the one you choose asks for something more than just a title.

If you want to change a title or other options for a widget, click the small, downward-pointing arrow on the right of the title bar for the widget. It then expands, showing all the options available.

Additionally, if you want to remove a widget from the sidebar, click and drag it to the bottom of the widgets page to a section called Inactive Widgets. Placing widgets here removes them and their settings. If you click and drag them to the Available Widgets section, they are still available to you, keeping any settings that you may have added.

Summary

This lesson started with a discussion of what themes are and how they affect your site with form and function. You learned about the types of themes available and their layouts. You also started with the default theme, downloaded your own, installed it, and customized it a little. You also learned some basic Widget skills.