Theming Wordpress

From ThemesWiki

Jump to: navigation, search
Theming Wordpress
Official Page
Project Documentation
Download
Source Book
200px-1847197388.jpg
ISBN 978-1-847197-38-2
Publisher Packt Publishing
Author(s) Jean-Baptiste Jung

Themes are a very important part of any WordPress blog they control the manner in which your content is being displayed and the design of your blog. A lot of customization actions can be performed on an existing theme, such as, changing colors, font families, font size, integrating plugins, logo, and favorite icons.

In this tutorial, we shall learn many tricks to customize an existing theme and enhance the theme that you've created.

Contents

[edit] Modifying your theme colors

Have you ever come across a WordPress theme available online and thought, 'Wow, this is a great theme but it would look even better if it had a green layout!'? This happens to me really often, and I'm pretty sure it's happened to you as well.

Luckily, changing the theme color scheme isn't as difficult as it seems to be.

Of course, you'll need at least one readily available WordPress theme. You'll also need a text editor. In this example, we shall use the Vi text editor which is my favorite text editor; however, even other decent text editors can do the job (TextEdit on Mac, gEdit on Ubuntu, or Notepad on Windows).

If you don't have a favorite text editor, you can use Vi text editor which is available by default on Mac and Unix systems and freely downloadable from the link: 

[http://www.vim.org/download.php#pc http://www.vim.org/download.php#pc]

On Mac and GNU/Linux systems, just open a terminal and type vi in order to open the Vi text editor. Type vi myfile.php in order to open a file in Vi.


1. The first thing we need to know is the hexadecimal color codes for each of the theme colors. Most WordPress themes use a color scheme of three to five different colors.

2. In order to know which colors are used on the theme, we'll have to open the theme CSS file, named style.css.

3. The CSS property used to define a background color is background color (or simply, background). For the foreground color, the property's name is color, and for the border colors, it is border color (or simply, border). For example, here's the color scheme which I use on the OpenTutorial theme: 

*Background color: #151515
*Content background color: #fff
*Header blocks: #222
*Green (used for links): #49AB0D
*Blue (Titles, hover links):#109dd0

4. Once you have known about the colors used on the theme, you'd want to modify the theme. Open the style.css file in Vi: vi style.css 5. Vi has a very useful command to replace all the occurrences of one sting with another. This way, you'll have to run the command only once for changing each color. If you choose to use some other text editor, then look for the search and replace command, which achieves the same result. 6. For example, suppose we are using the OpenTutorial theme, and you want to replace the dark grey background with a white background. Run the following command in Vi: 

:%s/151515/ffffff/g

7. Save your modification with the help of the save command::w 8. Repeat the search and replace command as necessary.

The command used above is a powerful find and replace feature of Open Source text Editor Vi. In case you want to learn more about the Vi's features, visit the following link: 

[http://www.catswhocode.com/blog/
100-vim-commands-every-programmer-should-know]
[http://www.catswhocode.com/blog/
100-vim-commands-every-programmer-should-know]

Following are a few important points, for your information:

  • All themes use a style.css file, but some themes also use extra stylesheet (for example, using a specific stylesheet for Internet Explorer is very common). Thus, make sure to replace colors in all stylesheets that are part of the theme.
  • This trick can only replace CSS-based colors. To modify image colors, you'll need to use a design program such as Adobe Photoshop or The Gimp.
  • If you changed your theme colors and some parts still display the old colors, make sure that the CSS colors are written in hexadecimal codes (for example: #151515). Some theme designers use color names instead of hexadecimal codes (for example: they may use background color: white instead of background color: #ffffff).
  • Some color codes can be written by using shorthand, for example, #006699 can be written as #069 therefore, make sure that you've checked for that too.

[edit] Modifying your theme fonts

Now that you have learned how to search and replace hexadecimal color codes, let's customize your theme a bit more.

In this recipe, we're going to see how we can easily modify the fonts used in a WordPress theme and also discuss about the good practices for typography on a WordPress blog.

For this recipe, you'll need exactly the same things that were needed in the Modifying your theme colors recipe a theme to customize, and a text editor.

A common beginner mistake is to try and use non web-safe fonts on a web site or blog. For example, there are web sites using the Myriad Pro or Segoe UI fonts. These fonts look beautiful, but what if only 10 or less percent of your readers can render it?

The following web-safe fonts can be used on any web sites:

  • Times New Roman
  • Arial
  • Verdana
  • Courier
  • Comic

Installed on more than 80% of computers, these two fonts can be used as well:

  • Trebuchet MS
  • Century Gothic

Most WordPress themes use a maximum of three different fonts. However, it is common to only use one or two different fonts. There's not a big choice, in terms of fonts, due to the fact that a user must have the font installed on his computer to have it render correctly on a web site.

1. In order to modify the fonts of a theme, the first step is to find out which are the fonts used. To do so, open the style.css file, in Vi and use the search command to find the font and font-family CSS properties: /font 2. This command will find all the occurrences of font in the stylesheet. To go to the next occurrence, simply type n. 3. The font-family CSS property looks as follows: font-family: "Trebuchet MS", arial, serif; 4. This CSS property allows you to specify one or more fonts to be used. In our example, if in case Trebuchet MS isn't available on the client computer, Arial will be used. 5. The font CSS property is a shorthand which allows you to specify all the font related parameters on a single line: font: italic small-caps bold 12px arial; 6. To modify the size of a font, you'll look for the font-size CSS property.

Tips and things to know about fonts

It can be very tempting to play with the fonts and CSS fonts related properties. However, there are a few things to be kept in mind:

  • The standard font size of a text is between 11 and 14 pixels; 12px is the most common choice of font size. For titles, (h1, h2, h3, and so on) a font size between 14 and 26 pixels is good.
  • While using a font with a two word name (for example, Trebuchet MS), always put it between quotes; that is, font-family: "Trebuchet MS";)
  • While defining font families always list at least two fonts, and offer a generic family name as the last alternative. The client's browser will use the first font that it recognizes.

[edit] Creating and integrating a favicon

A favicon is a small icon (16 x16 pixel) associated with a web site. The favicon is displayed by modern web browsers in the address bar, tabs, and tutorialmarks.

Nowadays, almost all the web sites and blogs have their own favicon. The following screenshot shows a favicon displayed in Mozilla Firefox:


You'll need a 16 x 16 pixels image to serve as a favicon. Due to the very small display size of the favicon, the image should be very simple.

I always tend to use a background color that fits my web site color scheme, and a simplified logo.

Favicon format

Basically, you can use .jpg, .png, .gif, or even .mng and .apng files to display a favicon. Unfortunately, the Internet Explorer (6 and 7) recognizes only the Windows .ico file format named favicon.ico.

Therefore, if you want to have an IE-compatible favicon, you'll have to convert your image file from png, gif, or jpg to Windows .ico.

Many imaging software applications can convert an image into a Windows icon file. Personally, I use an online service called ConvertIcon (available at the link http://converticon.com/) in order to convert my png image into Windows .ico file. The ConvertIcon application will also resize your image if needed. Therefore, there's no need to worry about your image width and height.


1. Once you have your favicon ready, upload it on your server under the directory of your choice. Personally, I prefer putting it in wp-content/themes/mytheme/. However, the choice is yours.

2. Open the header.php file from your theme. We now have to place a line of code to specify the location of our favicon. This line can be placed anywhere within the <head> and </head> tags.

3. Here's the code that we shall use in order to define an Internet Explorer compliant favicon: 

<link rel="shortcut icon" type="image/x-icon" href="/path/to/your/favicon.ico" />

The preceding line of code is the standard code to integrate a favicon on a web site. Using the .ico format, you can make sure that your favicon will be displayed by Internet Explorer, which doesn t happen when using the .png version.

4. If you uploaded your favicon into your wp-content/themes/yourtheme directory, we can use the bloginfo() function in order to automatically retrieve the template path as follows: 

<link rel="shortcut icon" type="image/x-icon" 
href="<?php bloginfo('template_url'); ?>/favicon.ico" />

5. If you chose to use a file format, such as .gif, .png, or .jpg, you can add your favicon with the following code; however, Internet Explorer will not recognize it: 

<link rel="icon" type="image/png" href="favicon.png" />

6. Once you have saved your header.php file, your favicon will be displayed.


The following line of code is the standard code used to integrate a favicon on a web site: 

<link rel="shortcut icon" type="image/x-icon" href="/path/to/your/favicon.ico" />

[edit] Integrating your own logo

By default, most WordPress themes display a header text usually the name of the blog and blog description. This is a nice option for personal blogs. However, I personally believe that displaying your own personal logo will make your blog look even more professional.

In this recipe, we shall learn how we can add a logo instead of the default blog name and slogan on a WordPress theme. The following screenshot shows the logo integration on a default WordPress theme:



For this recipe, you'll need your own logo and a WordPress theme on which you'd like to integrate your logo. I shall be using the WordPress default theme for this recipe.

However, there are a few things to be kept in mind before getting on with this recipe:

  • Some recent themes don't display blog name and slogan anymore instead, they display a default logo which can be changed by editing the code or even by defining a new logo in a custom WordPress control panel (which shall be covered in Tutorial 3).
  • Due to the fact that each theme is coded differently, the result of this recipe may vary from one theme to another.


1. Open the header.php file and locate the part of code where the blog name and description are displayed. In the WordPress default theme, it looks like this: 

  <div id="header">
  <div id="headerimg">
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <div class="description"><?php bloginfo('description'); ?></div>
  </div>
  </div>

2. We can just put an html image tag between the <h1> </h1> tags, but there's a much better, SEO friendly, way to display our logo by using CSS.

3. Upload your logo into your wp-content/themes/default folder. Once you're done, open the style.css file from the WordPress default theme. Go to line number 95. You'll see the CSS properties for the #headerimg .description element: 

  #headerimg .description {
  font-size: 1.2em;
  text-align: center;
  }

4. Now, replace the preceding piece of code by the following piece of code: 

  #headerimg h1 {
  background: transparent url(images/logo.png) no-repeat 50% 30px;
  text-indent:-9999px;
  }
  #headerimg .description
  {
  text-indent:-9999px;
  }

5. Don't forget to change the image name and path if your logo isn't named logo.png or is not located at wp-content/themes/default/images.

As you have seen, we haven't edited a single line of HTML to achieve our logo integration. We didn't have to, and it's better this way. Having h1, an html element, as the header text is good for your semantic and SEO. Due to the text-indent CSS property, we're able to hide the text by indenting it this is the reason why we added this property to both #headerimg h1 and #headerimg .description.

We do not want our logo to be hidden, this is why we used the CSS background property to display it.

Our logo looks good, but its usability can be improved even more by adding a link to the logo on the blog homepage. Adding a link to the homepage

To add a link to the homepage, open the header.php and replace the following line of code on line 33: 

 <div id="headerimg">

With the following line of code: 

<div id="headerimg" onclick="document.location.href= '<?php echo get_option(\'home\'); ?>';">

[edit] Adding social bookmarking buttons to your theme

Social tutorialmarking web sites are well known among bloggers. Digg, Del.icio.us, StumbleUpon, Reddit, and many more such web sites can drive a huge amount of traffic to your blog.

I have noticed that if you directly add social tutorialmarking buttons to your theme and give your readers the opportunity to do it in your blog, they'll vote for you more often. In this recipe, we shall learn how to create our own personal social tutorialmarking buttons.

In this example, I shall be using a background image although, it isn't necessary for achieving this recipe. However, if you don't have a background image and wish to have one you can freely use the basic background that I have created, by visiting the following link: 

[http://wphacks.com/wp-content/uploads/2008/08/cwc-vote.jpg 
http://wphacks.com/wp-content/uploads/2008/08/cwc-vote.jpg]

1. First, if you choose to use a background image, upload it into the 

wp-content/themes/yourtheme directory.

2. The social tutorialmarking button can be added at the end of single posts or on the homepage, after each post excerpt. Personally, I choose to add it on single posts, but the choice is completely yours.

3. We'll have to create a list of HTML elements containing all the links that we want to use, to the social tutorialmarking sites. In this example, I shall be using Del.icio.us, Digg, Stumble Upon, Reddit, and Dzone. However, you can add more social tutorialmarking sites or replace the one's which I have chosen with the ones of your choice.

4. Open the single.php file from your theme and add the following piece of code where you want the widget to appear: 

  <div id="cwc-vote">
  <ul>
  <li><a href="http://del.icio.us/post?url= <?php echo the_permalink();
  ?>">Del.icio.us</a></li>
  <li><a href="http://digg.com/submit?url= <?php echo the_permalink(); 
  ?>">Digg</a></li>
  <li><a href="http://www.stumbleupon.com/submit?url= 
  <?php echo the_permalink();   ?>">StumbleUpon</a></li>
  <li><a href="http://reddit.com/submit?url= 
  <?php echo the_permalink();
 ?>">Reddit</a></li>
  <li><a href="http://www.dzone.com/links/add.html?url=
  <?php echo the_permalink(); ?>">Dzone</a></li>
  </ul>
  </div>

As you have seen, most if not all social tutorialmarking sites have a URL where you can pass a GET request containing the URL of the web site you'd like to add or vote for. We're using the WordPress the_permalink() function to retrieve the URL of any post.

For the markup, using an HTML list is considered a better solution in terms of semantic HTML.

You can easily add others social tutorialmarking sites; I can't guarantee that it will work for all sites, but basically, the link must look like this: 

 <a href="http://www.yoursite.com/links/submit?url=<?php echo the_permalink(); ?>">

Now, we have a fully functional social tutorialmarking widget. The reason why we have created one manually, instead of using the buttons provided by such sites, is that we can use CSS to integrate it to our theme and make these links looks like a part of the blog.

Using CSS to style the social tutorialmarking widget

Open your style.css file and add the following code: 

 #cwc-vote {
  /* Don't forget to change the image path */
  background: #fff url(images/cwc-vote.png) no-repeat top left;
  width:600px;
  height:45px;
  padding-top:35px;
 }
 
 #cwc-vote ul {
  list-style-type:none;
  margin-left:-20px;
 }
 
 #cwc-vote ul li {
  display:inline;
  margin-right:-10px;
 }
 
 #cwc-vote ul li a {
  color:#fff;
  font-size:13px;
 }

This example CSS will be a good start to personalize the widget. Though, you may have some extra styling to do in order to make it fit your theme color scheme.

Adding Del.icio.us live count

Right now, we have a good looking and functional widget, but we can still improve upon it. I shall teach you how to add a Del.icio.us live count it will count the number of people who save your post on Deli.cio.us, and print it next to the Deli.cio.us link.

If you want to add the Deli.cio.us live count to your social tutorialmarking widget, 

we'll have to edit the list a bit. Simply replace the following line of code:

 <li><a href="http://del.icio.us/post?url= <?php echo the_permalink();
 ?>">Del.icio.us</a></li>

By the following line of code: 

 <li><a href="http://del.icio.us/post?url=<?php echo the_permalink();
 ?>">Del.icio.us (<span id='<?php echo md5("http://".$_SERVER["HTTP_HOST"].
 $_SERVER["REQUEST_URI"]);
 ?>'>0 </span>)</a></li>

In the preceding piece of code, we have added a zero (the default Del.icio.us count) within a span HTML element. This is the basis of our Del.icio.us live counter. Of course, we have to use a bit of JavaScript to make it work.

Enter the following code in the single.php file, below the widget HTML code: 

 <script type='text/javascript'>
 function displayURL(data) {
  var urlinfo = data[0];
  if (!urlinfo.total_posts) return;
  document.getElementById("<?php echo 
  md5("http://".$_SERVER["HTTP_HOST"].
  $_SERVER["REQUEST_URI"]);?>")
 .innerHTML = urlinfo.total_posts;
 }
 </script>
 <script src='http://badges.del.icio.us/feeds/json/url/data?url=
 <?php the_permalink() ?>&callback=displayURL'></script>

We're done! Your widget is now able to count the number of people who have saved your post to Del.icio.us and display the count.

Code explanation This code uses Del.icio.us JSON (JavaScript Object Notation) feeds a lightweight data-interchange format easily used in browser-based mashups, blog badges, and more to get information about the URL which we have passed as a parameter.

As a callback, we're calling the JavaScript function, displayURL(data). This function retrieves the ID of the span element created in the widget html list and replaces the default value (zero) with the number returned by Del.icio.us JSON feed.

[edit] Integrating Feedburner feeds on your theme

Feedburner is a service that allows you to keep a count of the people who have subscribed for your RSS feed. Once you have created a Feedburner feed, you have to integrate it to your theme. In this recipe, we shall learn three different How to do it... sections to integrate the Feedburner feeds with your theme.


There are three methods of integrating the Feedburner with a theme. These methods have been explained in the following sections:

Method 1:111 The manual way:

1. In order to integrate your Feedburner feeds, you can simply edit your theme files and replace the following line of code, <?php bloginfo('rss2_url'); ?> with your Feedburner URL.

2. Usually, the RSS feeds are called in the header.php file. Many themes also feature RSS links in the footer.php and sidebar.php files.

3. If you're using a Mac or a Linux machine, you can find any RSS link featured on a theme by executing the following command in the theme directory: 

 find . -type f -print | xargs grep rss2_url

Method 2: The plugin way

Thanks to open source, a WordPress plugin exists to help you with your Feedburner RSS feeds.

1. This plugin that will help you with your Feedburner RSS is called FeedSmith and can be downloaded from the following link: http://blogs.feedburner.com/feedburner/archives/2007/10/the_feedsmith_plugin_newly_for.php

2. Install and activate it, just like any other plugin.

Method 3: The .htaccess way

How about a bit of WordPress hacking? It is easy to use the .htaccess file to automatically redirect any RSS feed top your Feedburner feed.

1. The .htaccess file is located at the root of your WordPress installation. This is a configuration file for the Apache web server.

2. While editing .htaccess, make sure to create a backup. If you make a mistake or typo in this file, your blog will stop functioning. However, if you create a backup, you can restore the backup file, in order to eliminate that problem.

3. Edit the .htaccess file and add the following code (make sure you have replaced my Feedburner feed URL by yours!): 

  <IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC]
  RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
  RewriteRule ^feed/?([_0-9a-z-]+)?/?$ 
  http://feeds.feedburner.com/ wprecipes [R=302,NC,L]
  </IfModule>

Let's have a look at the function of the preceding code:

  • First, we make sure that the mod_rewrite.c module is installed on the server. There's more than 90% of chance that it is installed, however, while developing you must keep in mind every rare possibility.
  • We need to make sure that the client user agent isn't the Feedburner itself, or the feed validator. We definitely don't want to redirect bots to our Feedburner feed URL, otherwise they'll be able to grab our new blog content!
  • Finally, we shall use a rewrite rule that requests the server redirect any kind of feed URL to our feedburner URL.
Method Pros Cons
1 

 No plugin, just the addition of a small file.


 If you switch to another theme,you'll have to replace feeds links again.
 If someone subscribed to your old feed,he'll never be redirected to Feedburner.

2 

 Simple as a plugin! Upload it, activate it, give it your Feedburner feed,
 and it will do the job for you.
 FeedSmith can redirect your old feed subscribers to your Feedburner feed.
 This way, even the early subscriber will appear on your Feedburner count.


 Some people believe that having many plugins activated will slow down their blog.
 If you don't like using many plugins at the same time you can replace this one by the .htacess code.


3 

 No need to install a plugin.
 No upgrade problems if you update your WordPress version or switch theme.


 This method might be too hard to implement if you are a beginner or a non-programmer.
 However, I have clearly explained the method.


[edit] Integrating Twitter on your theme using the Twitter Tools plugin

Twitter is a free micro blogging service that allows you to post short messages (less than 140 characters) by answering the simple question What are you doing?.

I must admit that I was very skeptical at first about the use of Twitter for a blog. However, I decided to give it a try and found it really helpful. It is a great way to get in touch with other bloggers, interact with your readers, and promote your blog posts. By the way, my twitter URL is http://twitter.com/catswhocode, so don't hesitate to get in touch with me!

However, similar to your RSS feed, in order to invite visitors to your twitter account you have to promote it on your blog this way your readers will know that you're using Twitter. In my opinion, the best way to tell your readers about your twitter account is to display your tweets on your blog. In this recipe, we'll see how to do it with and without a plugin.

My favorite Twitter plugin for WordPress is, by far, Twitter Tools created by Alex King who has released numerous popular WordPress plugins, such as Simple tagging or Share This.

The Twitter Tools plugin is great because it offers so many possibilities; for example, if your theme uses widgets, you can simply drag the Twitter Tools widget to your sidebar and you're done! Twitter Tools also gives you the choice between displaying only your latest Twitter entry or latest page.


1. To install the Twitter Tools plugin, visit the following link and download it: http://wordpress.org/extend/plugins/twitter-tools/. Then, upload the twitter-tools.php file into your wp-content/plugins directory.

2. Once you have activated the plugin, a new tab where you can set up your Twitter Tools options will appear under Options in your WordPress Dashboard.

3. With the Twitter Tools plugin, displaying your Twitter entries is made very easy. If your theme is widget-ready, go to Design | Widgets on your WordPress Dashboard and drag the Twitter Tools widget to your sidebar. Once you have saved the modification, your twitter entries will appear on your sidebar.

4. If your theme isn't widget-ready, you have to edit the sidebar.php file and add the following function:

5. Display your last tweets: <?php aktt_sidebar_tweets(); ?>

6. Display only your latest tweet: <?php aktt_latest_tweet(); ?>

In order to display your latest Twitter entries, the Twitter Tools plugin uses PHP to parse your Twitter RSS feeds. RSS feeds parsing will be discussed in detail in the following recipe.

[edit] Displaying your Twitter entries on your blog, using a page template

It is possible to create a Twitter page on your blog with the help of the Twitter Tools plugin. How about playing a bit with the code in order to achieve the same result without using any plugin?

To achieve this recipe, you'll need to use a page template. Page templates will be discussed later in this tutorial. Therefore, I won't get into details; just the basics a page template is a PHP file with a custom layout that you can use on your WordPress blog.

1. Let's start by creating a very basic page template. Create a new file on your computer and name it, for example, twitter.php and insert the following code in it: 

  <?php
  /*
  Template Name: Twitter Page
  */
  ?>
 
  <?php get_header(); ?>
 
  <div id="content">
  <?php //Content goes here ?>
 
  </div>
 
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

2. The most important thing to remember while attempting to create a WordPress page template is the template name your page name comment is always located at the beginning of the file. This PHP comment allows WordPress to know that this file is a page template, and then you'll be able to use it.

3. As you can see, there's nothing hard with page template coding. We just need to import blog header, footer, and sidebar.

4. Now that we have our basic page template layout, we can start to integrate the Twitter entries. Each Twitter account has RSS feeds.

5. The first thing to do is to get the feed URL. To do so, just visit your own Twitter page and get the feed. It might look similar to the following link: http://twitter.com/statuses/user_timeline/15985955.rss

6. To integrate this feed into our page template, we shall use the rss.php file from WordPress core. This file will allow us to use the wp_rss() function, which is a built-in RSS reader. The function can read any RSS feed and display it on your WordPress blog.

7. Let's go back to our page template code, and add the following code instead of the <?php //Content goes here ?> comment: 

  <?php include_once(ABSPATH . WPINC . '/rss.php');
  wp_rss('http://twitter.com/statuses/user_timeline/15985955.rss', 10); ?>

8. In the preceding code, we first include the requested rss.php file and then we call the wp_rss() function, which will read our Twitter feed and display it on our page template.

9. The wp_rss() function takes two arguments the first argument is the RSS feed URL and the second is the number of entries you'd like to display. In the following example, I set 10 as the parameter but it's up to you to choose the number of entries you wish to display. Our final Twitter Page code now looks like this: 

  <?php
  /*
  Template Name: Twitter Page
  */
  ?>
 
  <?php get_header(); ?>
 
  <div id="content">
 
  <?php include_once(ABSPATH . WPINC . '/rss.php');
  wp_rss('http://twitter.com/statuses/user_timeline/15985955.rss', 10); ?>
 
  </div>
 
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

10. Save the file under the name twitter.php.

11. Now that we have our Twitter Page ready, I'm pretty sure that you can't wait to use it. Great! Upload the file to your wp-content/themes/yourtheme directory and login to your WordPress Dashboard.

12. Create a new page and name it Twitter entries, for example. You don't have to write any content because it isn't needed and our page template doesn't have a function such as the_content(). Therefore, it simply can t display any content. The purpose of this page is to display your twitter entries.

13. To use the page template, scroll down until you see the Page Template drop-down box. In the drop-down menu options, select Twitter Page (the name of the template) and publish the page.

14. You can now go visit your blog. The Twitter entries will be displayed on the page we just created.

To achieve this recipe, we had to make use of a Page Template. Page Template will be discussed later on this tutorial so you'll hopefully find an answer to all questions you are currently asking yourself.

The second part of the code is used for parsing the RSS feeds using the PHP language. To learn more about the RSS feeds parsing, you can visit the following link and read the entry on my blog: http://www.wprecipes.com/how-to-display-your-latest-twitter-entry-on-your-wp-blog.

[edit] Customizing WordPress admin login page

If you're creating a WordPress web site for a client, you'll probably like to make his or her login page a bit more personal than the default. In this recipe, we'll see how to make a custom admin login page for your clients, or even for yourself.

While writing this recipe, I was tempted to provide you two ways to customize your admin login page: with the help of a plugin, and by using a hack. But in the hack method, you are required to edit the WordPress core files, this really isn t a good idea. For example, suppose you hack the WordPress core successfully, but when you update your WordPress installation your hacks will be replaced by the new WordPress files. You'll have to hack again the new version, and so on.

This is the reason why, in this recipe, we shall discuss only about the plugin solution, which I think is really the best for the current scenario. The following screenshot shows a custom admin branding displayed on www.womantribune.com.

Creating a custom login panel is easy using the WordPress custom admin branding plugin and your creativity. Just carry out the following steps to get started.

Carry out the following steps in order to get the plugin:

1. The plugin we shall be using to rebrand or admin login page is called WordPress custom admin branding and can be downloaded for free at the following link: http://pressingpixels.com/wordpress-custom-admin-branding/

2. Once you have saved it in your hard drive, unzip it, and upload the custom_branding file into your wp-content/plugins directory. Login to your WordPress dashboard and activate the plugin.

3. Once activated, you'll be able to notice some changes. For example, in your WordPress dashboard your blog name has been replaced by Pressing Pixel (the plugin author's blog) logo. You should also log out to see your new login form it also will have the Pressing Pixel logo. Don't worry, we shall learn how to replace this logo with yours!

Carry out the following steps in order to create your own images:

1. Now that we have a functional plugin, it's time to create and use our very own images. Luckily, the plugin author provided some PSD files that we can edit in a program such as Adobe Photoshop or The Gimp.

2. Under the custom_branding directory, you'll find a psd_image_template directory which contains 3 PSD image templates custom_footer.psd, custom_header.psd, and custom_login.psd. The plugin author has also provided useful information, such as the part of the login form that may be hidden by the forms elements.

3. Once you have edited the PSD files, export it as custom_login.jpg, custom_header.png, and custom_footer.png. Upload it to your wp-content/plugins/custom_branding/images directory and replace the existing images.

Using WordPress hooks, the Custom Admin Branding plugin redefine the CSS as well as the images used in WordPress login screen, which are replaced by your custom images.

[edit] Using conditional tags to display content on specific pages

Sometimes, you may want to display some content only on specific pages or sections. For example, you may wish to display a welcome message on your blog homepage or show specific information on the Categories page. In this recipe, Let's learn how to do it with the help of WordPress conditional tags.

To achieve this recipe, you'll need a WordPress theme that you can edit.

1. WordPress conditional tags are Boolean variables so you have to use them as a condition on a php if statement as shown in the following example: 

  <?php if(is_page())
  {
  echo "Page title:";
  the_title;
  } ?>

2. The preceding if statement will return false if the current page template isn't a WordPress page template so nothing would happen. Otherwise, the if statement will return true and will print the page title on screen.

3. Conditional tags can be used in any theme files.

WordPress features a large amount of conditional tags for all needs. They all work as described above. Following are the conditional tags: 

* is_home(): It returns true if the current page is the blog homepage
* is_front_page() : It returns true if the current page is the blog front page
* is_single() : It returns true if the current page is a single post template
* is_page(): It returns true if the current page is a page template
* is_page_template("about.php"): It returns true if a page
  template is currently being used
* is_category(): It returns true if the current page is a category template
* in_category('4'): It returns true if the current posts belongs 
  to the specified category
* is_tag(): It returns true if the current page is a tag template
* has_tag("wordpress"): It returns true if the post have the tag 
  specified in parameter
* is_author(): It returns true if the current page is an author archive
* is_date(): It returns true if the post or page is a date-based archive
* is_year(): It returns true if it's a yearly archive
* is_month(): It returns true if it's a monthly archive
* is_day(): It returns true if it's a daily archive
* is_time(): It returns true if an hourly, minutely, 
 or secondly archive is being displayed
* is_archive(): It returns true if the current page display 
 any type of archives (time, author, tag, and so on)
* is_search(): It returns true if the current page displays search results
* is_paged(): It returns true if the current page is paged
* is_404(): It returns true if the current page is a 404
* is_sticky(): It returns true if the '''Stick this post to 
  the front page''' check box has been checked for the current post
* has_tag("WordPress"): It return true if the current posted has been 
  tagged with '''WordPress'''
* is_admin(): It returns true if the dashboard or an admin page is 
  currently displayed
* comments_open(): It returns true if commenting is allowed on the post
* pings_open(): It returns true if pinging is allowed on the post
* is_preview(): It returns true if the post or page is displayed in preview mode

The is_home() function has been deprecated and replaced by the is_front_page() function. To ensure backward compatibility with older WordPress versions, you should use the following piece of code: 

<?php if (is_front_page() || is_home()) { //Do something } ?>

Unless specified, the above tags doesn't take any parameter. They have to be used in a PHP conditional statement. 

 <?php if (is_404()) " {
  //Do something only if the post or page is a 404 error.
 } ?>

On the other hand, some conditional tags request a parameter to work. For example, to use the is_year() tag, you have to provide a year in parameter. 

 <?php if (is_year("2007")) {
  //Do something only if the post or page was published during the year 2007.
 } ?>

Conditional tags, as we have seen, are very useful. But there's more some conditional tags accept optional arguments that allow you to create a more specific condition. For example, you should create a code snippet that will only be executed if the current page is a WordPress template.

Special parameters

Some conditional tags can accept up to 4 different types of parameters:

  • ID: The ID parameter can be used in is_category, is_page(), is_tag(), is_single(), is_author(), and is_sticky(). 
o <?php if (is_category(5)) {
o }?>

As a result, the preceding code returns true if the category ID is 5.

  • Name: The name parameter can be used in is_category, is_page(), is_single() and is_author(). 
o <?php if (is_category("Blogging Tips")) {
o }?>

As a result, the preceding code returns true if the category name is "Blogging Tips"

  • Slug: The slug parameter can be used in is_category, is_page(), is_tag(), is_single(), and is_author(). 
o <?php if (is_category("blogging-tips")) {
o }?>

As a result, the preceding code returns true if the category slug is "blogging-tips".

  • Array: The array parameter can be used in is_category, is_page(), is_tag(), has_tag(), is_single() and is_author(). 
o <?php if(is_category(array(5,'blogging-tips','Blogging Tips'))) {
o } ?>

As a result, the preceding code returns true if the category of posts being displayed either has the ID as 5, slug as "blogging-tips", or name as "Blogging Tips".

[edit] Using page templates in your theme

Even though most of the WordPress themes use a unique page template, our favorite blogging engine allows us to create as many different page templates as we want.

Why always use the same page layout in your blog? Using different page templates will make your blog look a lot more professional.

In this recipe, you'll learn to create and use page templates.

To achieve this recipe, you only need a WordPress theme and a text editor. In the following example, we use the WordPress default theme. If you're using another theme, you'll have to adjust the code a bit to make it fit your theme HTML markup.

Let us start with creating a test page template and learn how to create more page templates in the following recipes.

1. On your theme directory, create a new file and name it testpage.php.

2. Open the testpage.php file in your favorite text editor and insert the following code in it: 

  <?php
  /*
  Template Name: Test Page
  */
  ?>
  <?php get_header(); ?>
  <div id="content" class="narrowcolumn">
  <h1>My first page template, called <?php the_title(); ?>!</h1>
  </div>
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

3. Login to your WordPress Dashboard and go to Write | Page and give your page a title. You don't have to write any text in the body since it won't be displayed by the page template.

4. Scroll down until you see a Page template link. Clicking on the link will open a drop-down menu from where you can select the page template to use. Select the new template, Test Page.


5. Publish the page.

6. Visit your page. You will see a basic page with only a title displaying My first page template, called XXX (the name you have given to the page).

Now, you know how easy it is to create and use page templates in your WordPress theme. This example isn't useful at all, therefore, let us see some really interesting uses of page template in the following recipe.

The WordPress page template allows you to define special template layouts that can be assigned to pages.

[edit] Creating an archive page

More and more blogs feature an archive page where they display all of their posts. There are two good reasons to do it the first is SEO and second is your visitors. With an archive page, any search engine crawler is able to easily index all your posts. When I find a blog of my choice, I'm used to browsing through their archive page to get a quick view of what might interest me.

In this recipe, you shall learn how to create an useful archive page for your WordPress theme, by using the page template technique.

As I just said, we shall be using a page template to create an archive page, for which you have to understand the page template concept explained in the previous recipe.

I'm using the WordPress default theme in the following example, so you might have to adapt the HTML markup a bit to make it fit your own theme.

1. Create a file named archive-custom.php on your WordPress theme directory.

2. Enter the following code in that file: 

  <?php
  /*
  Template Name: Custom Archives
  */
  ?>
  <?php get_header(); ?>
  <div id="content" class="narrowcolumn">
  <?php
  while(have_posts()) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <ul id="archive-list">
  <?php
  $myposts = get_posts('numberposts=-1&offset=0');
  foreach($myposts as $post) :
  ?>
  <li><?php the_time('m/d/y') ?>: <a href="<?php the_permalink();
  ?>"><?php the_title(); ?></a></li>
  <?php endforeach; ?>
  </ul>
  <?php endwhile; ?>
  </div>
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

3. Save the file and upload it to the wp-content/themes/yourtheme 

 directory of your WordPress install.

4. Log in to your WordPress Dashboard, create a new page, and select Custom Archives as a page template. Give it a title of your choice, for example Archives.

5. Publish the page. Your theme now features an archive page; cool for both, search engines and visitors!

Basically, an archive page is just a page which loops through all posts you wrote, and only display the post title and its date.

In the example, we have used the get_posts() function instead of the classic WordPress loop. The reason behind this is that the WordPress loop's purpose is to display posts on your blog homepage depending on certain parameters, such as posts per page or pagination information. However, on our archive page we only need to display all post titles on a single page.

You must have noticed that the get_posts() function have two parameters:

1. The first one is numberposts, which is used to specify the number of posts you want to retrieve. I have set it up at -1, which means that I want to get all the available posts.

2. The second parameter used is offset; which allow you to specify the number of posts that you don't want to be displayed. If you specify offset=5, the first post you'll get will be the sixth. The offset=0 in the example doesn't change anything at all. For example, you should enhance the archive page we just created by creating a first loop which will only get you the most recent posts and style it differently.

For those who prefer to use a plugin instead of creating their own archive page, I have used the Smart Archives plugin some time ago and enjoyed it. You can get it for free at the following link, 

 [http://justinblanton.com/projects/smartarchives/
 http://justinblanton.com/projects/smartarchives/].

[edit] Source

The source of this content is Chapter 3: Theming Wordpress of WordPress 2.7 Cookbook by Jean-Baptiste Jung (Packt Publishing, 2009).

Angular Cheilitis

There are several angular cheilitis treatments that prove effective angular cheilitis treatment is one that offers an quick remedy in curing cheilitis. People are in pain from angular cheilitis it is a horrible fungal infection that seems to infect the mouth corners. Making it hard to eat, cheilitis patients now have a cure.

Logo Designby ThemesWiki.org Kevin Josh 2010

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

[edit] Error 404 - Not Found

 </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

</pre> As you can see, this page does nothing except inform the user that nothing was found at the particular URL. Let's enhance it to help the visitor looking for some content, by displaying archives, categories, and a link to the blog homepage.

1. Open the 404.php file in your favorite editor.

2. Below the <h2 class="center">Error 404 - Not Found</h2> line, add the following code to create a link to the blog homepage: 

 <a href="<?php bloginfo("url");?>">Homepage</a>

3. Add the following code to display your categories: 

 ==Source==
The source of this content is '''Chapter 3: Theming Wordpress''' of [http://www.packtpub.com/wordpress-2-7-cookbook/book?utm_source=themeswiki&utm_medium=WordPress%2B2.7%20Cookbook&utm_term=source_booklink%2B&utm_campaign=jul_2009  WordPress 2.7 Cookbook] by Jean-Baptiste Jung ([http://www.packtpub.com/wordpress-2-7-cookbook/book?utm_source=themeswiki&utm_medium=WordPress%2B2.7%20Cookbook&utm_term=source_packt&utm_campaign=jul_2009 Packt Publishing], 2009).[http://www.logoinn.com logo design] by Kevin Josh 2010


Angular Cheilitis

There are several angular cheilitis treatments that prove effective [http://cheilitistreatment.com/ angular cheilitis treatment] is one
that offers an quick remedy in curing cheilitis. People are in pain from angular cheilitis it is a horrible fungal infection that seems to infect the mouth corners. Making it hard to eat, cheilitis patients now have a cure.

[[Category:Open Source]]
[[Category:Content Management]]
[[Category:Open Source]]
[[Category:PHP/MySQL]]

==Using a static page as a homepage==

Almost 90% of blogs use the list of most recent posts as a homepage. However, if you prefer to use a static page as a homepage, the choice is yours. This technique allows you to use WordPress and create different kinds of web sites not only blogs.

Nothing special is needed here. The possibility of using a static page as a homepage is built-in in the WordPress however, a lot of bloggers aren't aware of it.

In this recipe, we will learn how to set up a static page as a homepage for your blog, though, we won't create the entire page for you. Now that you have learned how to create and use page templates, setting up a homepage shouldn't be a problem.

'''1'''. Log in to your WordPress '''Dashboard''' and create a page named '''Homepage''' and publish it.

'''2'''. On your WordPress '''Dashboard''', go to '''Settings | Reading'''. You'll see a title saying '''Front page displays'''.

'''3'''. Select the '''A static page''' radio button and choose your new front page from the drop-down list. If you please, you can also choose a new template for the posts to be displayed.

[[Image:7382_03_11.png|thumb|center]]

WordPress allows you to choose between the post lists (most used in blogs) and a static page of your choice as homepage.

This second option gives you quite a few of possibilities, in particular if you'd like to create a non-blog site using WordPress.

If you have chosen to use a static page as homepage, how about executing some PHP in it? If this idea seems [http://custom-essay-writing-service.org/index.php custom essay writing] appealing to you, you should definitely check out the Exec-PHP plugin. You can download it for free at the following link: [http://wordpress.org/extend/plugins/exec-php/ http://wordpress.org/extend/plugins/exec-php/].

To install Exec-PHP, simply use the standard ''How to do it...'' described in Tutorial 1. Suppose you want to execute some PHP within a post or a page, you can do it by simply turning the WordPress editor to source mode and starting with coding your PHP.

==Creating a Featured Posts block on your homepage==

Would you like to make some of your posts stands out of the crowd? If yes, a good solution is to create a '''Featured''' '''Posts''' block on your blog homepage.

[[Image:7382_03_12.png|thumb|center]]

As you can see in the preceding screenshot, before the normal post listing, the blogger set up a '''Featured''' '''Posts''' block where he or she display the most popular posts.

To achieve this recipe, you only need a text editor and a WordPress theme.

'''1'''. Log in to your WordPress '''Dashboard''', go to '''Manage | Categories''', and create a new category named '''Featured'''.

'''2'''. Once you have created your '''Featured''' category, simply put your mouse cursor on the '''edit''' link related to this category and look at your browser's [http://cvresumewriters.com/ writers resumes] status bar you'll be able to see the <code>action=edit</code> and category ID (<code>cat_ID=1</code>, in our case), as shown in the following screenshot:

[[Image:7382_03_13.png|thumb|center]]

'''3'''. Open the <code>index.php</code> file from your theme directory.

'''4'''. At the location where you want your '''Featured''' '''Posts''' to appear, insert the following code:
<pre>
  <?php if (!$paged) { ?>
  <div id="featured">
  <?php
  query_posts('showposts=5&cat=5); ?>
  <h2>Featured posts</h2>
  <?php while (have_posts()) : the_post(); ?>
  <div class="featuredElement">
  <h3><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></h3>
  <?php the_excerpt(); ?>
  </div><!--/featuredElement-->
  <?php endwhile; ?>
  </div><!--/featured-->

5. Don't forget to modify the category parameter on line 4 of the preceding code according to your "featured" category ID.

6. Save the file, upload it on the wp_content/themes/yourtheme directory of your server, and go back to your WordPress dashboard.

To create featured posts, simply add it to the "featured" category. The 5 most recent posts will be shown on your blog homepage.

The earlier stated code starts by looking for the $paged variable. If the page isn't paginated, which means the reader is looking at the blog homepage only, the code executes the query_posts() function with the showposts parameter to display only 5 posts and the cat parameter. This allows us to only get posts from a certain category, that is, the featured category we had created before.

Another interesting use of the Featured Posts block in your blog homepage is to create a widget-ready zone. Widgets will be discussed in the later tutorials of this tutorial.

[edit] Making your new posts stands out with a custom style

Creating a Featured Posts block, as we have seen earlier, allows you to specify some posts to be displayed on your blog as the featured posts. However, you may prefer to automatically make your latest posts stand out. In this recipe, we shall learn to modify the classic WordPress loop to give another style to your latest posts.

Similar to the previous recipe, you only need a text editor, a WordPress theme, and of course this tutorial to achieve the hack. This recipe is based on the WordPress default theme, but can be adapted on any other theme as well.

1. Open the index.php file from your theme and 

 look for the WordPress loop. In the WordPress default theme,
 the WordPress loop is located on line 5 and looks similar to the following code:

  <?php while (have_posts()) : the_post(); ?>
  <div class="post" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() 
  ?>" rel="tutorialmark" title="Permanent Link to <?php the_title_attribute();
 ?>"> <?php the_title(); ?></a></h2>
  <small><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --></small>
  <div class="entry">
  <?php the_content('Read the rest of this entry »'); ?>
  </div>
  <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />');
 ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | ');
 ?> <?php comments_popup_link('No Comments »', '1 Comment »
 ', '% Comments »'); ?></p>
  </div>
  <?php endwhile; ?>

2. Replace that loop with the following code and save the file. 

You can edit the number of posts that will be marked as "featured" on line 4.
As the earlier code displays only one featured post, let us use the following code.

  <?php $count = 0; ?>
  <?php while (have_posts()) : the_post(); ?>
  <?php $count++; ?>
  <?php if ($count < 2) : ?>
  <div class="featured post" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>">New Post: <?php the_title(); ?></a></h2>
  <small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?>.</small>
  <div class="entry">
  <?php the_content('Read the rest of this entry »'); ?>
  </div>
  </div>
  <?php else : ?>
  <!-- "Normal" posts -->
  <div class="post" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></h2>
  <small><?php the_time('F jS, Y') ?></small>
  <div class="entry">
  <?php the_content('Read the rest of this entry »'); ?>
  </div>
   <p class="postmetadata"><?php the_tags('Tags: ', ', ', ' <br />');
 ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | ');
 ?> <?php comments_popup_link('No Comments »', '1 Comment »
 ', '% Comments »'); ?></p>
  </div>
  <?php endif; ?>
  <?php endwhile; ?>

3. Now, edit the style.css file from your theme. The preceding code creates and adds a "featured" class to your latest posts with the help of the "featured" class you can modify the post displays. Add the following code to the style.css file and style it your way: 

  post.featured {
  background:#f9f9f9;
  font-weight:bold;
  }

At the beginning of the code, and before the loop, I have created a PHP variable named $count and initialized at the value 0. This variable is a counter on each iteration through the loop, the code changes its value to its current value + 1.

On line 4 of the earlier code, I test whether the $count value is smaller than 2. If yes, a post with the "featured" style is displayed, otherwise the posts are displayed in normal style.

The PHP counters are very useful and can be used to achieve various tasks. For example, the following code, similar to our previous code will display some AdSense ads after the first post: 

 <?php $count = 0; ?>
 <?php while (have_posts()) : the_post(); ?>
 <?php $count++; ?>
 <div class="post" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></h2>
  <small><?php the_time('F jS, Y') ?></small>
  <div class="entry">
  <?php the_content('Read the rest of this entry »'); ?>
  </div>
   <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); 
 ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | ');
 ?> <?php comments_popup_link('No Comments »', '1 Comment »
 ', '% Comments »'); ?></p>
  <?php if ($count < 2) : ?>
  <!-- INSERT ADSENSE CODE HERE -->
 <?php endif; ?>
 </div>
 <?php endwhile; ?>

That's it! Your latest posts are now displayed with a custom style.

In this tutorial, you have learned how to modify and enhance a WordPress theme to definitely make your blog different.

[edit] Additional References

  • For instructions on installing and setting up WordPress, click here
  • For instructions on Developing WordPress Themes, click here
  • For instructions on Troubleshooting WordPress Installation, click here
  • For instructions on Set Up for Word Press 2.7, click here
  • For instructions on Developing WordPress 2.7 Themes, click here
  • For instructions on Troubleshooting WordPress MU 2.8, click here
  • For instructions on Installing WordPress MU, click here
  • For instructions on Customizing site using WordPress MU 2.8, click here
  • For instructions on Configuring WordPress Themes, click here

[edit] Source

The source of this content is Chapter 3: Theming Wordpress of WordPress 2.7 Cookbook by Jean-Baptiste Jung (Packt Publishing, 2009).

Angular Cheilitis

There are several angular cheilitis treatments that prove effective angular cheilitis treatment is one that offers an quick remedy in curing cheilitis. People are in pain from angular cheilitis it is a horrible fungal infection that seems to infect the mouth corners. Making it hard to eat, cheilitis patients now have a cure.

Logo Designby ThemesWiki.org Kevin Josh 2010

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes

And Like The Global Information Network and Global Information Network

Retrieved from "http://www.themeswiki.com/Theming_Wordpress"
Personal tools