All over the internet you can find tutorials, help, samples on creating wordpress theme. Still, there are some topics that are not covered by many of them. I will try to focus on the solution of practical problems I had while creating Starscape theme.

This first part will cover following problems and solutions:

1. Using theme WordPress options within CSS or JavaScript file
2. Adding Gravatar support to the theme
3. Separating trackback from comments
4. Creating Post Date button

And as always, Starscape theme contains all this, so you can check it out also.

Using theme WordPress options within CSS or JavaScript file

If you need to have some dinamyc settings in CSS or JavaScript, you can use PHP to modify styles or JS code. But you might also need to load WordPress options and use them. Both CSS and JS are external resources and they can’t communicate with WordPress code directly.

This is actually quite simple to accomplish. You need to created css or js file, but it has to have extension php, like this: ‘mycode.js.php’ or ‘mystyles.css.php’. On the top of this file add following code:

1
2
3
4
5
6
7
8
9
10

<?php
 
    $d = 0;
    while (!file_exists(str_repeat('../', $d).'wp-config.php')) 
        if (++$d > 99) exit;
    $wpconfig = str_repeat('../', $d).'wp-config.php';
    require($wpconfig);
    header('Content-Type: text/css');
 
?>

First part of the code will go through paths backward from the folder where the file is located, until it founds WordPress config file. This file will import WordPress into CSS or JS file.

Header line is there to ensure that created file after going through PHP is of the right type:

• for CSS: header(‘Content-Type: text/css’);
• for JS: header(‘Content-Type: application/javascript’);

Now you have complete WordPress classes and functions in your CSS or JS file as you would have them in any other PHP file in WordPress.

Adding Gravatar support to the theme

WordPress from version 2.5 has few built in functions to help you getting gravatar icons. But you need to implement how this will be used by the theme. WP older then 2.5 has no gravatar support. To get gravatar image you only need email address. You can also specify few additional options. More on these options you can find on official Gravatar website: http://en.gravatar.com/site/implement.

Here is the method you can use to get a gravatar image regardless of WordPress version you use. This code will generate image URL for email:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
 
    function get_gravatar_url($email, $size = 48, $rating = 'g') {
        $default = get_bloginfo('template_url').'/images/gravatar.jpg';
 
        if ($email != '') {
            $url = 'http://www.gravatar.com/avatar/';
            $url.= md5(trim($email)).'.jpg';
            $url.= '?r='.$rating;
            $url.= '&s='.$size;
            $url.= '&d='.urlencode($default);
            return $url;
        }
        else
            return $gravatar["default"];
    }
 
?>

Default image is the image that will be shown if the gravatar for the email is not found on the gravatar website. Adjust this default image url based on the image you want to use.

Separating trackback from comments

WordPress puts trackbacks or pingbacks into the comments table in the database, and on the regular wordpress page comments and trackbacks are displayed together. If you like to separate these two, you need to make few changes to the ‘comments.php’ (typical file for comments). If you look at the contents of this file, you will see a foreach loop: foreach ($comments as $comment) {…}. $comments is a WordPress array with comments for the post. Each $comment is an object with actual comment contents. To separate comments and trackbacks you only need to check comment_type property of the $comment. If the property is empty, then it’s a regular comment. If the value is ‘pingback’, then you are dealing with trackback/pingback.

Easiest solution is to duplicated foreach loop, and in one instance to check if the comment is pingback, and display only them, and then to repeat the loop, and check if the comment is not pingback and display only them. More complex solution can be found in my Starscape theme.

Creating Post Date button

For this you will need example image. You can save and use the one on the rig ht. Positioning of the month and date on this button is done with few CSS classes. You also need to add some html/php code into the WordPress loop where the post/page is displayed. Post loops are ususally found in ‘index.php’, ‘single.php’. Loop for page is in ‘page.php’. HTML/PHP code for the button looks like this:

1
2
3
4

<div class="postdate">
  <div class="postmonth"><?php the_time('M') ?></div>
  <div class="postday"><?php the_time('d') ?></div>
</div>

As you can see, we use 3 CSS classes. In postdate class you need to put url to your image. Float will determine if the button will be displayed on the left or the right. Depending on where you plan to use it, you might not need float. This CSS is based on the button for the Starscape theme. Here is the CSS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.postdate {
  background: transparent url(___imageurl___) no-repeat scroll 0% 0%;
  display: inline;
  float: left;
  height: 54px;
  margin: 0pt 10px 0pt 0pt;
  width: 48px;
}
 
.postmonth {
  color: #FEFF77;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
 
.postday {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
  margin-top: -2px;
  text-align: center;
}

Conclusion

This is the first article with few tips that you might need for your own wordpress theme. If you have any suggestions on what you would like to see in the next part(s), please leave the comment or send me an email.