To celebrate, I have completely redesigned the site and tweaked the guy in the header to look more like me. It’s not quite finished yet, but I couldn’t wait any longer.

What happened

I’m not going to lie to you, the main reason I stopped creating tutorials, themes and plugins is because I wasn’t very motivated and didn’t have much time either.

The future

What should you expect from WordPress Guy?

From now on, I’m not going to post as often as I used to (which was 3-4 posts per week). I’m going to focus on producing higher quality content, even if it’s just once a week, or maybe less.

Goodies?

At the moment, I have a WordPress plugin that is almost finished and will post shortly.

I may also release my previous WordPress Guy theme.

I also have some ideas for great tutorials and howtos.

Stay tuned!

Connecting to your host via SSH

First, you need to have access to your host via SSH. If you don’t know how to do this, ask your hosting provider.

Installing Subversion

My MediaTemple DV server didn’t have Subversion installed, that’s one of the reasons I didn’t use it. So first, I had to install it. After a couple of hours of reading tutorials, installing packages and beating my head against the wall, I found out that you can get Subversion and other stuff by installing something they call “Developer Tools” from the admin panel.

Again, if you don’t have Subversion installed on your server, the best option is to ask your host.

Seting up a Subversion repository

For the sake of this tutorial let’s assume that your current WordPress install is at root level (”/WordPress”).

Here comes the fun part… Once you’re connected to your host via SSH you’ll have to create a temporary directory where we’re going to setup our repository (this varies depending on your setup):

cd /
mkdir wp
cd wp

Now download the latest WordPress version (currently 2.5.1):

svn co http://svn.automattic.com/wordpress/tags/2.5.1/ .

To avoid problems later, I’m removing everything from the wp-content directory:

rm -rf wp-content/themes
rm -rf wp-content/plugins
rm -f wp-content/index.php

Then we’re going to copy the custom stuff from our current WordPress, that is, the themes, the plugins, the uploads, etc.

cp -rpf /WordPress/wp-content/* wp-content
cp -p /WordPress/wp-config.php .htaccess ./

Now we rename the old WordPress directory to something else and the new one to what the old one was called.

mv /WordPress /WordPress.bak
mv wp /WordPress

That’s it. Check that your blog is still working, if something went wrong you can just revert to the old version by doing the last commands the other way around:

mv /WordPress /wp
mv /WordPress.bak /WordPress

From now on, you can easily update using the following command (changing the “2.5.1″ part to the appropriate version, of course):

svn sw http://svn.automattic.com/wordpress/tags/2.5.1/

It sure is a complicated process if you don’t have much terminal / shell / ssh experience, but it’s definitely worth the effort.

• May 2008
  • 25 - Lorem ipsum
  • 12 - Dolor sit amet
• April 2008
  • 22 - Adipiscing elit
  • 18 - Consectetur
  • 3 - Ipsum amet
• …

Cool, eh! Let’s go…

The page

First create a new php file and type this at the very beginning:

<?php
/*
Template Name: Hierarchical Archives
*/
?>

This will help us identify the template when we create the archives page in the WordPress back-end.

Now, let’s enter the basic page code. You may want to open the page.php file of your theme, and copy the structure. I’ll be using the default “kubrick” theme structure for this tutorial:

<?php get_header(); ?>
 
<div id="content" class="widecolumn">
 
<!--Here is where our code will go-->
 
</div>
 
<?php get_footer(); ?>

The code

Ok and now this is the code that will print the actual list of posts:

<?php
 
// Declare some helper vars
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
 
// Get the posts
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
 
?>
 
<?php foreach($myposts as $post) : ?>	
 
	<?php
 
	// Setup the post variables
	setup_postdata($post);
 
	$year = mysql2date('Y', $post->post_date);
	$month = mysql2date('n', $post->post_date);
	$day = mysql2date('j', $post->post_date);
 
	?>
 
	<?php if($year != $previous_year || $month != $previous_month) : ?>
 
		<?php if($ul_open == true) : ?>
		</ul>
		<?php endif; ?>
 
		<h3><?php the_time('F Y'); ?></h3>
 
		<ul class="month_archive">
 
		<?php $ul_open = true; ?>
 
	<?php endif; ?>
 
	<?php $previous_year = $year; $previous_month = $month; ?>
 
	<li><span class="the_day"><?php the_time('j'); ?></span> <span class="the_article"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>
 
<?php endforeach; ?>
	</ul>

How does this work? Well… it’s a little hard to explain. Basically, we’re using the get_posts() function to get all the posts (numberposts=0 means all of them), ordered by date (orderby=post_date) in descending order (order=DESC). Then, we’re looping through every last one of them, comparing it’s published month and year to the previous one and echoing the year and the month accordingly.

Wrapping up

That’s basically it. Now save this file and upload it to your template directory (/wp-content/themes/your_theme). Then create a new page in the WordPress back-end, selecting “Hierarchical Archives” in the page template drop-down menu. And you’re done.

Hope you liked the pseudo-tutorial ;-).

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^login$ /wp-login.php [L]
</IfModule>

But wait, if your blog’s permalink structure is set to “pretty” permalinks, then, your .htaccess file has some rewrite rules already, in that case just add the RewriteRule directive right after the “RewriteBase /”. Like this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
 
RewriteRule ^login$ /wp-login.php [L]
 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Make sure you save a back-up copy of the original .htaccess file (if there was one) before making these changes. You can never be too careful.

Also, make sure there isn’t a “login” directory.

The principles

As you may know already, WordPress posts are stored in a MySQL database. For us to obtain the URL to a random post from that database, we need to run a MySQL query. It’s pretty simple actually, thanks to WPDB, a built-in database class that comes with every WordPress install, we don’t need to bother about database names, passwords, connections and disconnections, etc. We just need to run the query and echo the result.

The MySQL query

Our database query needs to look inside the posts table and select one random post from the published posts. This is what the query looks like:

SELECT guid FROM wp_posts WHERE post_type = 'post' AND post_status = 'publish' ORDER BY RAND() LIMIT 1

Let me explain how exactly this MySQL query works:

1. SELECT guid - Select just the guid column value, which is where the URL to the post is located.
2. FROM wp_posts - From the posts table
3. WHERE post_type = 'post' - Since attachments are also saved in the posts table, we need to specify that we just want posts
4. AND post_status = 'publish' - We just want the published posts, not scheduled posts, not drafts
5. ORDER BY rand() - Get them in random order
6. LIMIT 1 - And get just one result

The PHP code

Now, let’s type the PHP code. As I said, we’re going to make it simple by using the WPDB class, which comes bundled into WordPress. This is our code:

<?php
$randomPost = $wpdb->get_var("SELECT guid FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' ORDER BY rand() LIMIT 1");
echo '<a href="'.$randomPost.'">Random Post</a>';
?>

In the first line of the code, we’re running the database query using the WPDB get_var() function, and storing the result inside a $randomPost variable. Then, in the second line, we’re echoing the link, pointing to the URL stored in the $randomPost variable.

Note I’m using $wpdb->posts instead of wp_posts, that way, we make sure that we’re selecting the right table, since you could have changed the table prefix (which by default is ‘wp_’).

That’s it for today. I hope you enjoyed the mini-tutorial.

http://yourblog.com/tag/music+apple

And if you want to see all posts tagged “music” or “apple” then:

http://yourblog.com/tag/music,apple

The same principle applies for categories.

Note: For those of you not using “pretty” permalinks, then it would be:

http://yourblog.com/?tag=music+apple or http://yourblog.com/?tag=music,apple

The only problem with this is that there is no way (that I know of) for doing such queries except typing the url by hand.

The HTML

In order to style the first letter of a paragraph differently, we need to wrap it inside a special HTML element that we can later style by adding a few lines of CSS. For this tutorial I’m going to use a simple span element, with the “initialcap” class. The resulting paragraph will look like this:

<span class="initialcap">L</span>orem ipsum dolor sit amet, ...

Remember not to repeat the letter after the span

The CSS

Here comes the tricky part, due to the fact that every theme has different font size and line height values you’ll have to adapt this part to your theme. I’m going to assume that our paragraph has a font-size of 14 pixels and a line height of 18 pixels.

1. Float! We need to make our capital letter float left in order for the paragraph text to flow around it.

span.initialcap{
    float: left;
}

2. Font size. We assign it a font size of 40 pixels (again, this may vary depending on your theme’s CSS), and a line height of 35 pixels, which is twice the line height of the paragraph minus 1 pixel (just in case).

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; /* Double the line height minus 1 pixel */
}

3. Extra styling. We’re going to use a serif font, make it blue, and add a little bit of spacing on the right.

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; /* Double the line height minus 1 pixel */
 
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* Blue */
    padding-right: 5px;
}

You’re probably going to have to play a little bit with the font size and line height values though.

Automation

Ok, so you’ve added the necessary CSS to your style.css file, but isn’t it a bit of a hassle to have to add the HTML markup every time you write a new post? Well, this bit of PHP code will do this for you:

function wpguy_initial_cap($content){
 
    // Regular Expression, matches a single letter
    // * even if it's inside a link tag.
    $searchfor = '/>(<a [^>]+>)?([^<s])/';
 
    // The string we're replacing the letter for
    $replacewith = '>$1<span class="capital">$2</span>';
 
    // Replace it, but just once (for the very first letter of the post)
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    // Return the result
    return $content;
}
 
// Add this function to the WordPress hook
add_filter('the_content', 'wpguy_initial_cap');

How does it work? Basically, our function takes the content of the blog post, and wraps the first letter with our special markup.

All you need to do is paste it inside the functions.php file of your theme.

I hope you enjoyed this tutorial! Remember to post your thoughts and questions in the Comments section.

Ever wanted to display a random “Read More…” link on your blog homepage? Here’s some code that’ll help you do just that.

The strings

Copy and paste this code somewhere in the index.php or functions.php file of your theme (but make sure you paste it before the loop):

<?php $more_strings = array("Read More...", "Keep on Reading...", "Wait! There's more...", "Read the rest of the article..."); ?>

You can add as many strings as you want.

Then change the the_content(); bit to this:

the_content($more_strings[rand(0,count($more_strings))]);

That’s it… Have fun!

It’s only been 2 weeks since I launched wpguy.com, but I’ve managed to design and develop my first free WordPress theme!

Features

It’s called Pistachio (?), and these are some of the features included:

• 3 Columns
• Unique icons
• Widget ready sidebars
• Gravatar ready
• Separated trackbacks and comments
• Author comments highlight
• Archives page template
• Compatible with WordPress 2.3 and up
• Valid CSS and XHTML

Installation

To install the Pistachio theme just follow these easy steps:

1. Unzip the pistachio.zip file.
2. Upload the resulting pistachio folder to the /wp-content/themes/ directory of your WordPress install
3. Log into your blog admin and go to the Presentation > Theme area
4. Find the Pistachio theme and activate it by clicking on it’s thumbnail
5. That’s it, enjoy!

Preview and Download

Pistachio Demo
Download Pistachio 1.0

Donate

If you like Pistachio, please consider making a small donation:

So remember your navigation links! Here is how to generate them in WordPress:

<?php next_posts_link('&laquo; Older Entries'); ?>
<?php previous_posts_link('Newer Entries &raquo;'); ?>