Style Your Site

Change Your Theme

WordPress allows you to apply any theme to your blog. All themes include a CSS stylesheet that defines the design and layout (the colors, arrangement, and shape) of your site. In WordPress, the content is completely separate from the format, so you can change themes at any time without having to alter your content.

In the past, WordPress attempted to create a central theme repository called the WordPress Theme Viewer. However, due to numerous issues with the repository, themes for WordPress are now scattered all across the web. Weblogtoolscollection often features newly released themes. The footer of most blogs identifies the theme the user has applied. You can search for “WordPress themes” and find a good variety of them. You can also buy a well-designed theme usually for $100 or less (search for “designer WordPress themes” or “premium WordPress themes”). In general, when choosing a theme, find one that’s simple and focuses your eye on your the content. You can always change it when you get tired of it.

To apply a new theme to your site:

  1. Download the theme to your computer.
  2. Right-click the zipped file and unzip it using a tool such as 7-zip or Winzip.
  3. Open your FTP program (such as Filezilla), connect to your web host, and upload the entire theme folder to wp-content/themes.
  4. Log in to your blog’s admin panel and go to Manage > Themes. The theme you uploaded should appear there.
  5. Select the theme. Now check out how it looks on your site.

After selecting a new theme, you may need to configure the sidebar, page navigation, and header. Always make sure it looks good in both Firefox and IE. If you have a question about a theme, try visiting the author’s site first. If that doesn’t work, go to the theme section of the WordPress forum.

More Information:

Modify Your Sidebar

Themes usually have at least 1 or 2 sidebars. Sidebars are the narrow columns to the left or right of your blog posts. Each section in the sidebar is known as a “widget” that you can move up or down. Sidebars commonly list your pages, contact information, top posts, RSS feed, some about text, links, and ads.

To configure your sidebar:

  1. Go to Design > Widgets. The Widgets subtab has two columns: Available Widgets and Current Widgets.
  2. In the Current Widgets section, select the sidebar you want to configure, and then click the Add button next to a widget in the Available Widgets column. The widget is added to your current widgets.
  3. Click the Edit link on the widget to set any additional details, such as the title and number of items displayed. Most of the widgets are self-explanatory, except for the RSS widget. The RSS widget doesn’t display your RSS feed, but rather allows you to display the latest items from an RSS feed somewhere else.
  4. In the Current Widgets section, drag and drop the widgets into the order you want.
  5. Click the Save button.
  6. Select another sidebar, if your theme has one, and configure the widgets for that sidebar as well.

More Information:

Customize Your Header Image or Background

One of the most common ways you’ll want to customize your theme is by changing the banner image. Exactly how you do this depends on the theme you’re using. But in general, here’s how you alter the banner image:

  1. Find out the exact size of the banner image. In your theme’s folder, the banner image is usually stored in an images or img subfolder.
  2. Note the name, file type, and dimensions of the file.
  3. Using a graphics program such as Photoshop or SnagIt, create your custom replacement image with the exact same dimensions and save it as the same file type and name.
  4. Use FTP to upload the new image file to the same folder where the original banner image is stored (usually wp-content/themes/themename/images).
  5. When prompted, select to overwrite the original.
  6. Refresh your blog’s page to view the new image.

Alternatively, you can keep the original file, but just change the file name in the stylesheet.

The header style in your stylesheet may look like this:

#header {
  background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") 
  no-repeat bottom center; }

By changing the background attribute (wc_header.jpg), you can change the header image/background.

Sometimes the header doesn’t have an image at all, but instead uses a background color. To change the background color:

  1. Go to Design > Theme Editor.
  2. Click the Header file. See what styles are defining the header section. Alternatively, use a tool like the Firefox Web Developer Extension to see what styles are defining the header.
  3. Click the Stylesheet file (within Design > Theme Editor).
  4. Update the header style you noted in step 2 with the attributes you want.

More Information:

Configure How Your Pages Appear

Different themes show pages in different ways. Themes that have buttons or tabs at the top sometimes populate those buttons/tabs with your pages automatically. Other themes generate your list of pages in the sidebar. Other themes require you to manually type the page URLs.

You should know several things about the ordering of pages. If a list of pages (that you created) automatically appear on your site, you can change their order through the Page Order field that appears below the page.

To change the page order:

  1. Go to Manage > Pages.
  2. Click the page you want.
  3. In the Page Order section below the page, set the page order by typing 1, 2, 3, and so on. A page with an order of 1 appears before a page with an order of 2.
  4. Click Save.

Tip: If you’re listing your pages in your sidebar, the Pages widget has an Edit link that allows you to define the way the pages are sorted and what pages are excluded.

Note: If you have a theme with 5 tabs across the top (coded to automatically fill these tabs with your pages), yet you have 10 pages, you’ll either want to manually code the links in your header.php file (available by going to Design > Theme Editor), or modify the arguments in the wp_list_pages tag to exclude pages you don’t want to appear in your header. The Pages sidebar widget provides easy fields to note exclusions. But if your theme has a navigation or tab bar, editing the pages is trickier. The list of pages is automatically generated in your code through the <?php wp_list_pages(‘arguments’); ?> tag. You can modify the “arguments” text with different parameters that define how you want your pages to appear. For example, you can include or exclude pages from the list, include child pages, define their sort order, and so on. See the instructions about the wp_list_pages template tag for more information.

More Information:

Make It Easy to Subscribe to Your RSS Feed

One of the most important features of your site is your RSS feed, which subscribers will use to add you to their feedreaders. All WordPress blogs have RSS feeds by default, and even categories and specific posts have RSS feeds. You can see your feed by adding /feed after your domain. For example, if http://idratherbewriting.com is my domain, then http://idratherbewriting.com/feed is my RSS feed.

However, unless you redirect your feed through Feedburner, it’s hard to know how many people are subscribed to your blog. You may have seen little chiclets on blogs showing how many people are subscribed. This is a Feedburner chiclet that you can easily insert on your site.

To direct your feed through Feedburner and add a subscriber chiclet on your site:

  1. Find your RSS feed by adding /feed to the end of your URL.
  2. Go to Feedburner.com and sign up for an account.
  3. In the main field on the Feedburner home page, below the text “Start Feedburning Now,” type your site’s RSS feed. If you plan to include podcasts, select the I am a podcaster check box. (By the way, using Feedburner for your podcast feed will automatically include the necessary iTunes specifications.)
  4. Title your feed, select the feed name you want, and then click Activate Feed.
  5. Click Next and set other options as needed.
  6. If desired, download the Feedburner Feedsmith plugin. Unzip the file and use FTP to upload it to your wp-content/plugins folder. Then click your Plugins tab and activate the plugin.
  7. In Feedburner, click the Publicizetab. Then do the following:
    • To get code for your RSS button, click the Chiclet Chooser subtab.
    • To get code for an email subscription form, click the Email subscriptions subtab.
    • To get code for the reader count chiclet, click the Feedcount subtab.
  8. Return to your blog, and go to Design > Widgets.
  9. Add a text widget to your sidebar and insert the desired code (RSS, Email, or Feedcount) to display this feature.

Note: If you don’t use the Feedburner Feedsmith plugin, readers may still be able to subscribe to your blog’s default feed rather than the redirected Feedburner feed. When Firefox and IE sense an RSS feed on a site, they display an orange RSS button to the right of the web address field. If readers click this button, it shows the site’s default feed rather than the Feedburner feed. You can change the feed that appears in the web address field by editing the feed listed in your site’s header file.

To change the feed in your header:

  1. Go to Design > Theme Editor.
  2. Click the Header file.
  3. Replace the auto-generated feed with your specific Feedburner feed, and then save it.

For example, a line in your header that specifies the feed looks something like this:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

The <?php bloginfo('rss2_url'); ?> automatically populates with your feed. Swap your Feedburner feed in there instead. For example:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://feeds.feedburner.com/tomjohnson" />

More Information:

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s