One of the most effective ways of using Greasemonkey scripts with WordPress is with the administration pages. For example, Engtech’s Akismet Auntie Spam speeds up your spam checking, by limiting each spam comment to one line, and grouping spam by the amount from one IP address.

The beauty of combining Greasemonkey with WordPress is that even WordPress.com users, who can’t always have access to plugins can alter their administration pages to improve their workflow. For more examples check out the scripts tagged with WordPress on userscripts.org.

The competition will be running for one month, and will therefore end on the 1st November 2008. Entries will be accepted until midnight UK time. All entries must be sent to greasemonkey [at] epicalex [dot] com.

To encourage you all to participate, every entrant will be featured in a blog post at the end of the competition. More details of that to follow. We also have some great prizes up for grabs, the list at the moment is as follows:

• 1 $250 FlashDen voucher, and 2 $50 FlashDen vouchers.
• A pre-approved Woopra invitation from Lorelle.
• A signed copy of Lorelle’s Blogging Tips book.
• 3 single user Revolution Theme licences from Brian Gardner.
• A WordPress Mug, from me.

If you wish to donate a prize, please email greasemonkey [at] epicalex [dot] com.

To find out more about Greasemonkey scripts, and how to write them, check out Engtech’s series of posts.

• How to install Firefox extensions
• How to use Greasemonkey scripts
• How to be a Greasemonkey Ninja
• Un-minifying Javascript

The rules of the competition are as follows:

• All scripts must be designed for use with the WordPress administration pages, either .com or self-hosted.
• All scripts must be newly written and released during the competition period.
• All scripts must be available for download from Userscripts.org.
• A screenshot of the script in action must be submitted along with your submission, which must also contain a description of what the script does, and why it is beneficial to a user.

More details will be added with time. I look forward to receiving your scripts and trying them out!

I decided to make a front end implementation of the themes.php page of the admin pages, and I modified a few files to do so. I have removed the activate links that you will find in the admin pages, and added some css to give the display some basic styling. This has only been tested on, and will only work on, Wordpress 2.6!

I have several directions that I want to take this in, but for the moment I have written a simple plugin that will create a display of all the themes in your wp-content/themes/ directory. You can view the demo here

My eventual intention is that I will develop this plugin into one that can be used for those who offer themes for download, so that it can be used instead of a separate database/install to demonstrate their themes, but I wanted to get this out there now!! Who knows, maybe the official theme browser might adopt a similar technique, it certainly needs something doing to it!

Usage

1. Unzip epicthemeviewer.zip and upload to your plugin folder.
2. Go to the plugin management page and activate ‘Epic Theme Viewer’.
3. Add <?php epic_theme_viewer(); ?> into a page template. See example below.
4. Create a page where you want to add the theme viewer, and assign your new Page Template to it.
5. Enjoy!

Example Page Template

The example below uses the default K2 theme.

<?php
/*
Template Name: Theme Viewer
*/
?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php epic_theme_viewer(); ?>
</div>
</div>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

Customisation

If you want to change the amount of columns of themes, open up epicthemeviewer.php and find these lines, changing the number 2 to whatever you want.

$rows = ceil(count($theme_names) / 2);

for ( $col = 1; $col <= 2; $col++ )

if ( $col == 2 ) $class[] = 'right';

By default, only 15 themes are shown per page, but you can change this here:

$per_page = 15;

I’d really love some feedback on this, especially ways to improve the plugin/directions to take the project in.

Issues

Annoyingly, the plugin will only work for logged in users. I’m trying my best to work out why this is, but can’t find any hints as of yet.

Download it here:
Epic Theme Viewer (86)

The method below uses my new friend, Custom Fields. We will add some code to our single.php that will nicely style our edits.

If you are unfamiliar with Custom Fields, I suggest reading the codex entry.

Understanding The Custom Field Code

Unlike some of my other tutorials that use Custom Fields, this one will be using a different call to get_post_meta. I will instead be using get_post_custom_values, as this will allow us to add more than one edit to each post. get_post_custom_values($key) works by retrieving a list of all the ‘values’ associated with the ‘key’ defined as a parameter. It then stores these ‘values’ in an array.

The Code

We will be placing the code within the loop, just after <?php the_content(); ?>. The basic code below gets all of our values, and then echoes them out:

<?php $my_edits = get_post_custom_values('Edit');
foreach ($my_edits as $key => $value) {
echo "<div class='post_edits'><strong>Edit:</strong>" . $value . "</div>";
} ?>

‘Edit’ is the ‘key’ that you add to your post when you want to add something, and you write your edit in the ‘value’ field.

Styling The Edits

Now we can add to our style.css to make our edits stand out.

.post_edits {
background: #E3FED3;
border: 2px dashed #338833;
color: #3B5F17;
margin-bottom: 5px;
padding: 5px;
}

The CSS above is a nice green, but play around with it until it fits into your own theme.

Extending The Code

We also need to make sure that if there are no edits that we don’t have anything displayed that will look out of place. For this, we can use an if statement to check if the ‘key’ is empty, as in my Default Custom Field Tutorial.

<?php $my_edits = get_post_custom_values('Edit');
if ($my_edits == '') {}
else {
foreach ($my_edits as $key => $value) {
echo "<div class='post_edits'><strong>Edit:</strong>" . $value . "</div>";
}
} ?>

This does the following:

1. Creates a variable that stores an array of custom fields with the value of ‘Edit’.
2. It then checks whether that variable is empty.
3. If it is empty then nothing will be done.
4. The else then says that if the $my_edits variable IS NOT empty (i.e. You’ve made an edit), then the div is displayed with the edit information.

See how creative you can be with this, and custom fields in general, the possibilities are endless!

The plugin will only work on single post pages, so your archives and homepage etc will remain as they are now.

There are currently no configurable options, however, in future versions it will be possible to define the amount of columns.

Download it here: Newspaper Style Posts (774)

Of course, you could just add the same custom field for every post where you want the ‘default’ used, but why bother when we can make it easier for ourselves? The first example code below will show a basic method that can be adapted to your needs, and then the second example will develop that to demonstrate how I achieve my effect with images.

The Basic Code

The basic method will check if the desired custom field ‘key’ has no defined ‘value’, or if it is absent. If it is missing, then the default text is shown, otherwise show the ‘value’.

<?php
$var = get_post_meta($post->ID, 'My Custom Key', true);
if ($var == '')
{ 
echo "<p>I'm the default text!</p>";
} else { 
echo "<p>" . $var . "</p>"; 
} ?>

Simple!

Default Image Display

If you take a look at my WordPress category page you will see that some of the images for the posts are the same. I achieved this by extending the above code to include a default image if I didn’t need an image to specifically demonstrate the post.

<?php
$thumb = get_post_meta($post->ID, 'Homepage Image', true);
if ($thumb == '')
{ ?>

First of all we store the ‘value’ defined for the ‘key’ Homepage Image for the current post in a variable called $thumb. We then check to see if $thumb is either blank, or if there is no Homepage Image ‘key’ at all. If either of these is the case, then we do the following:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="http://domain.com/images/defaultimage.jpg" 
alt="<?php the_title(); ?>"/>
</a>

This will output an image that is on my server each time there is no custom field available.

<?php } else { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php the_title(); ?>"/>
</a>
<?php } ?>

In addition to the if statement, we add an else. This says that if $thumb is not empty, ie it has a defined ‘value’, then output that ‘value’ in the image source, and make it a link to the post.

This saves me a lot of time when posting, as I don’t need to find the url of my default image and add it to the custom fields, I can just post straight away, knowing that an image is going to be there where I need it.

A category page is set up so that whatever category you are viewing, only those posts are seen, but only one file is needed in your theme to do this. That file is usually called category.php, but if that is missing, then archive.php is used, and if that is not there either, then finally index.php is used.

It is possible to create an infinite amount of different category pages by appending the id of that category to the file name, like category-6.php. You could then add some text to each of those files, describing each category.

But isn’t that a lot of work? Why not do all of that in one file? By using the is_category() function it is possible to do that. We can add the following outside of the loop, so that it isn’t repeated per post.

<?php if (is_category('Category A')) { ?>
<p>This is the text to describe category A</p>
<?php } elseif (is_category('Category B')) { ?>
<p>This is the text to describe category B</p>
<?php } else { ?>
<p>This is some generic text to describe all other category pages, 
I could be left blank</p>
<?php } ?>

This does the following. Checks to see if we are looking at Category A, if we are then show the first bit of text, but if we’re not then check if we are looking at Category B. If we are then show that bit of text, and finally, if it is neither Category A or B, then show this default text.

You can keep adding an elseif for as many different category texts as you need.

Firstly, I know that there are a lot of different ways of doing this, and this is just one way that achieves one certain effect. The idea is that we use images to promote our ‘Featured’ content, using the excerpt as well to provide a teaser, to really pull the user to where we want them to go. Of course you can just use this to show your latest posts, it doesn’t have to be featured. Have a look at my example first, so you can see what we’re aiming for!

The javascript that I use for this demonstration doesn’t use a library such as jQuery or Prototype, so the total script size is very small. You can download the Crossfader script here.

If you just want to download the full code and not bother reading the post, scroll to the bottom and click to the next page.

Now down to business!

Including the Crossfader File

Open your header.php file and add the following line, making sure that the url correctly points to where you uploaded the file on your server:

<script type="text/javascript" src="http://domain.com/crossfader.js">
</script>

Constructing the HTML

Taking a look at the example on Brand Spanking New where I got this code from, we can see the basic format of the HTML needed. We will expand on this later.

<div id="cf_wrapper">
        <div id="cf1" class="cf_element">
        This is what we will see in the first crossfade.
        </div>
        <div id="cf2" class="cf_element">
        This is what we will see in the second crossfade.
        </div>
        <div id="cf3" class="cf_element">
        This is what we will see in the third crossfade.
        </div>
</div>

So, we have a <div id="cf_wrapper">that contains all of the items that we want to crossfade, which are contained in <div id="cf1"> etc. Now to make it do something, we need that javascript…

The Basic Script

This needs to be added anywhere below the closing tag for the <div id="cf_wrapper">.

<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 1000, 3000 );
</script>

What this does is basically interact with the script we placed in our header, providing the information it needs to rotate all of our divs. The 1000 (1 second) is how long the transition between divs takes, and the 3000 (3 seconds) is how long each div is shown for.

You can take a look at the basic demo of the script in action on the script’s site if you didn’t check mine out: Crossfader Demo (external link).

Now that’s done, we can start to make things a bit more interesting!

Making the Content Dynamic

As we’re dealing with WordPress, we have an easy way of providing dynamic content; the loop. By using the loop for this, we do not need to repeat the HTML structure for the <div id="cf1">, which means that if we do not have enough posts in the ‘Featured’ category, we will not have empty divs displayed, and that we can create as many of them as we want, dynamically. This will hopefully become much clearer by looking at the code below.

<?php $featured_posts = 
new WP_Query('category_name=Featured&showposts=5');
while ($featured_posts->have_posts()) : $featured_posts->the_post();
$div_ids[] = get_the_ID();?>

If you aren’t used to creating custom loops, that might look a bit crazy, so here is what’s going on:

1. The first part starts a new query of the posts database, looking for the last 5 posts in the ‘Featured’ category. (You’ll need to create that category)
2. This custom query is then stored in the variable $featured_posts.
3. Now we run the loop, using that new variable.
4. Finally, we create an array of the IDs of those posts that we just queried, and store that in the $div_ids variable for later use.

Place this custom loop after <div id="cf_wrapper">, because we don’t need that to be repeated for every post.

Now we need to add our individual divs for our content. Remember, we only need to create one, and let the loop do the rest! Place this straight after our loop.

<div id="cf<?php the_ID(); ?>" class="cf_element">
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" 
rel="bookmark"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?> <!-- this ends the loop -->
</div> <!-- This closes off the cf_wrapper -->

Because we don’t necessarily know how many divs will be created (remember there might not be enough posts in the chosen category) we cannot just make the cf# count up from one. Using cf<?php the_ID(); ?> means that the post ID is used as the cf#. This is a basic version, where just the title and excerpt of each post is used as the div content, but we can expand on that later. The importance of class="cf_element"will become clear when we look at styling.

Making the Script Pick Up Our Divs

Now that the <div id="cf#">s are no longer known, we have to change the javascript to accommodate for that. As we are now outside of the loop, we need to go back to our $div_ids variable.

<script type="text/javascript">
var cf = new Crossfader( new Array(
<?php
foreach ($div_ids as $id) {
$stringlist[] = "'cf".$id."'";
}
echo implode (',',$stringlist);
?>
), 1000, 5000 );
</script>

Again, this might need some explaining.

1. We start the javascript as before, but where we list the cf#s, we use our variable.
2. Next we say that for every $div_ids we will have $id
3. We then get back the array of these $div_ids and build a string from them.
4. Then this string is ‘imploded’, where the string of cf#s is put together with commas between them.
5. This is echoed back to the page, and the script continues.

We now add this to the code so far, I put it in between the end of the loop and the end of the cf_wrapper div.

You can take a look at all that code together here

You can now be as imaginative as you like, Click below to go to the next page and read about incorporating images into the mix!

They have been made in Photoshop CS3, but I’m not sure if they are compatible with other versions. All the brushes are high quality, that is, 2500px x 2500px.

Download

Photoshop Brick Brushes (1065)

Installing the Brushes

1. Download and unzip the file.
2. Copy the unzipped .abr file to Photoshop/Presets/Brushes.
3. Now open Photoshop, and go to the Brushes palette, click on ‘Load Brushes’.
4. Find the bricks.abr file and load it.

Enjoy!

In time honoured tradition, I’m going to make this a ‘10 things…’ post, but I’m going to try to suggest things that might not spring to mind straight away. I would still recommend doing all of those normal things, such as Technorati, Digg and Feedburner, of course.

EDIT: The post is tailored towards those in the same field as this blog, i.e. WordPress, but the tips are of course transferable. The Key, as Lorelle highlights, is to target the right demographic when submitting your news to news sites. Enjoy!

This is the first in a two part series, the second post will deal with monetization.

1. Lorelle’s Resource Page for Content Topics - There is no use submitting your site to Digg, or creating a Technorati Profile if you have no content to promote. Getting started on a blog can be a daunting process, and it seems like you have a massive void to fill. Lorelle has a great post listing a huge number of resources to find things to write about, I would seriously consider using this list to find inspiration if you are struggling!
2. Now that you have your new content, the world needs to know about it. Aside from the afore mentioned methods, I also suggest searching for your post topic in google and visiting as many of the blogs as you can that discuss the same thing, and let them know about your post. There are two ways you can do this, firstly ‘Pingbacks/Trackbacks’. Copy the URL of the post you were just reading, and add it to the bottom of your post under a ‘Further Reading’ header, this way you are providing more useful content to your visitors, and also letting the other post author know about what you have written. The other method involves posting a comment directly on the similar post that you have been reading, saying that you have written something similar that the readers might find interesting. Commenting on lots of related sites can also help build up your web identity, and provide valuable traffic.
3. Weblog Tools Collection News. Did you know that Weblog Tools Collection has a section on their site where you can submit news? It is basically a bb-press forum, but the main guys at WLTC look there, and it is where they find out about the new plugin releases that they feature that you might have seen in the RSS feed on your WordPress dashboard. Not only might the article get picked up by them and featured, assuming the content is interesting enough, but you will pretty much guarantee yourself some traffic. I submitted one article there, and I got 50 hits within the first day (I know this through Google Analytics).
4. Similarly to above, lots of sites have places that you can submit news, for example:
   • WPCandy
   • BloggingPro
   • The Blog Herald
   • Blogosphere News

   These are just a few to get you started, but searching for more WordPress resources on Google will find you some more.

5. When you submit your posts to these sites, the chances of people visiting your site are dependent on what they read on that news site, the post title. Writing an effective post title can be a tricky thing, but there are plenty of resources on the internet to help you out. I suggest starting at CopyBlogger and taking it form there.
6. Make sure you sign up to Google Analytics so you can track how all of this work you are doing is helping get you traffic. I cannot recommend any other stats software, as Google Analytics is the only one that I’ve used, and I have to say that I’ve never needed to consider another one.
7. On the same note, Google Analytics will help you to reduce your bounce rate. It shows you top exit points from your blog, in other words, which post people were reading when they left your site. Knowing this can help you in several ways. Take a look at the post were people left from most, is it lacking quality? Is it too long? Or did people get what they wanted from it and then leave? In my case, it is the later (;-)). People were visiting my blog and downloading my plugin, and then leaving without looking around, so I knew that I had to encourage people to stay here somehow!
8. This brings me to the next point. I believe one of the most effective ways of keeping people on your site is by showing them related content to what they were just looking at. Say, for example, that someone came straight to a post on your blog, and didn’t see the homepage, how would they know what else you had written. I have just installed a great plugin called Related Posts. What this plugin does is generate a list of other posts that you have written with the same tags. Therefore it is quite likely that the people reading that post will be interested in these others. I have placed these links at the bottom of each post, so that they are there when people finish reading. The more people stay on your site and see the quality of what you are writing, the more likely they are to subscribe to your feed, and through that keep coming back.
9. Give something away free. You need to be careful with this one, make sure you have some visitors before you try and do this, especially if it is a contest you are running, otherwise it might be a bit embarrassing if no one enters!! If you have the knowhow, writing a plugin or a theme is a great way of getting people to come to your blog. (I’m releasing a theme when my exams are over in May) If this isn’t something you can do, then maybe give away something that you have bought or can buy and has a lot of value to someone. Depending on your niche, maybe a membership to something like WPDesigners Theme Club would work (admittedly that a bit in limbo at the moment, but you get the idea). Publicising this contest in the blogosphere can easily bring people to your blog.
10. Keep at it! I know from experience that if there is a drought in posts, that this will adversely effect your hits. Keep commenting on other peoples blogs, and keep finding high quality content to post about.

I hope that you’ve found this post useful, and can use it to promote your new blog to bring in visitors to help you with the next part of this series: monetization. I will be posting updates to this post if I find other good methods.

Now that the full 2.5 has been released, it is even more important that other plugin authors also update their plugins to fit the new admin style.

Hopefully, this is fairly conclusive, so should act as a good guide for all the different ways of displaying data. Some of this might be a bit trivial, but it wouldn’t be conclusive without it! (NB - This post does not deal with any of the changes to hooks etc)

Main Page ‘Frame’

As with previous versions of WordPress, 2.5 wraps all of the options page in a div as follows:

<div class="wrap">
     <!-- Put all your plugin options here -->
</div>

The Form Tag

As all the plugin options need to be submitted, the plugin options page needs to be a form, therefore, we need to add this element in too. Thanks Stephen.

<div class="wrap">
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
     <!-- Put all your plugin options here -->
</form>
</div>

Titles

There is only one title that has a style rule in 2.5, which is your main page title:

<h2>My Plugin Options</h2>

You can of course use h3 etc too, and the browser styling will be used, but with the new layout, individual titles for individual options have kind of been replaced:

Layout

The main layout used for plugin options is, unfortunately, tables, but it is easy to use, the structure is as follows, below that, I have listed all the different types of input that you can use.

<table class="form-table">
  <tbody>
    <tr valign="top">
      <th scope="row">Option 1</th><!-- this is like your title -->
      <td><input type="text" size="40" value="" id="Option_1" 
                                 name="Option_1"/>
        <br />
        This is where you put a short description of this option field
      </td>
    </tr>
  </tbody>
</table>

This looks like this:

Now, to change the type of input, you can use the following (I’ve assumed that you already have your th scope=”row” in place for each one, just to save me writing it every time):

Text Area

<td>
<textarea name="Option_1" cols="60" rows="4" style="width: 98%; 
font-size: 12px;" id="Option_1">
This is where you would put your PHP options call, so that text is 
displayed in the text area
<textarea>
</td>

An example text area:

Checkbox

<td> 
  <label for="Option_2">
    <input type="checkbox" value="" id="Option_2" name="Option_2"/>
    The description for the first checkbox
  </label><br/>
  <label for="Option_3">
    <input type="checkbox" value="" id="Option_3" name="Option_3"/>
    This is the next description
  </label>
</td>

An Example checkbox:

Dropdown Box

<td>
<label for="Option_4">
  <select id="Option_4" name="Option_4">
    <option value="">First Value Name</option>
    <option value="">All Values are...</option>
    <option value="">Where you put your PHP options</option>
    <option value="">That are saved in the Database</option>
    <option value="">Enjoy</option>
  </select>
</label>
</td>

An example dropdown box:

Radio Buttons

<td>
<p> <!-- Note the extra p -->
  <label>
    <input type="radio" value="" name="Option_5"/>
    This describes the first radio button
  </label><br/>
  <label>
    <input type="radio" value="" name="Option_6"/>
    This describes the next radio button
  </label>
</p>
</td>

Example radio buttons:

Submit Button

What you put in ‘value’ here will be the text on the button. Make sure to put this OUTSIDE the ‘table’.

<div class="submit">
  <input type="submit" value="Update Settings" name="submit"/>
</div>

An example submit button:

I hope that this covers all of the options that are available, if I discover any more I’ll add them on.

See also:
Joost de Valk’s Style Guide
Migrating Plugins and Themes