The idea intrigued me and so off I went to build my own archive. Following Leland's instructions I had the site up and running in less than half hour with a modified version of his free TL Tweets theme.

After a few months of the archive going live I decided to convert it to the Genesis framework for 2 reasons:

1. To see if I could do it
2. I'm a huge fan of Genesis

Surprisingly the process was much easier than I initially thought it would be. I simply had to study the construction of Leland's theme and adapt that to Genesis. After a few unfortunate mishaps (it blowed up real good) I got the result I wanted.

In this post I won't cover how to build the tweet archive itself as Leland has already done that. What I will do is show you the steps I took on getting this archive to run on Genesis.

The Tools

• Genesis Simple Hooks by StudioPress
• Genesis Framework by StudioPress
• Genesis child theme

The process I used was a combination of the Genesis Simple Hooks plugin and edits to the child theme's functions.php file. For my own archive I chose the Minimum child theme for its crisp and clean appearance.

Genesis Simple Hooks

First, grab a copy of the plugin. Once activated it will create a submenu under the Genesis menu in the sidebar. Navigate to Genesis > Simple Hooks and scroll down to the meta box called Post/Page Hooks. Once you find it scroll down a bit farther to locate the genesis_post_title Hook. You will see an option that asks Unhook genesis_do_post_title() function from this hook? Place a check mark in the box. Take a look at the screenshot below.

As you might have guessed this will unhook genesis_do_post_title() thereby preventing its output. We don't need post titles for our tweets.

Now, I wanted a way whereby I could output the date/time of the post directly beneath the post then turn that into a permalink. Here's how I did it.

Go back to the Post/Page Hooks meta box and look for the section genesis_after_post_content Hook. You will see an option that asks Unhook genesis_post_meta() function from this hook? Place a check in the box. You will see another option that asks Execute PHP on this hook? Check that box as well. In the text area enter the following.

<?php if (is_page() || is_single()) : ?>
<?php else : ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_time('M jS Y') ?></a> <?php edit_post_link('edit', '', ''); ?>
<?php endif; ?>

Have a look at the screenshot below.

What we have done is unhooked the genesis_post_meta() function then elected to execute some PHP. This will prevent the default output from appearing in favour of our own PHP.

I used the_time() and wrapped it inside the_permalink(). I also threw in a edit_post_link() because I wanted it but it's not necessary. I then wrapped the entire bit with a conditional because I didn't want it to appear on pages or single post pages. That takes care of that.

But wait! We now have the post date appearing twice because Genesis already outputs this via the genesis_post_info() function.

No problem. Once again go to the Post/Page Hooks meta box and look for the section genesis_before_post_content Hook. There will be an option that asks Unhook genesis_post_info() function from this hook? Place a tick in the box. This will prevent that function from firing. Have a look at the screenshot below.

We're now finished configuring the plugin options. Off to the child theme's functions.php file.

Editing functions.php file

This goes without saying but I'll say it anyway, make sure you are editing the child theme's functions.php file and not the Genesis file. All edits should be made to the child theme.

To add pagination to individual post pages add the following to the child theme's functions.php file.

// Add pagination to single post
add_action('genesis_after_post_content', 'custom_post_nav');
function custom_post_nav(){
if (is_single()) {?>
<div class="post-nav">
<div class="next-post-nav">
<?php next_post_link('%link', 'Next Post »'); ?>
</div>
<div class="prev-post-nav">
<?php previous_post_link('%link', '« Previous Post'); ?>
</div>
</div>
<?php
}}

What we've done here is created a new function called custom_post_nav() and hooked it into the genesis_after_post_content hook. Then we wrapped it in a conditional so that it appears only on single post pages.

To style it I added the following to the child theme's css file. *

.post-nav {
	overflow: auto;
	margin: 10px 0;
	padding: 5px 0;
	}

.prev-post-nav {
	float: left;
	width: 50%;
	}

.next-post-nav {
	float: right;
	width: 50%;
	text-align: right;
	}

For the large font size on the single post pages I added the following to the child theme's css file. *

.single-post #content .entry-content p{
	font-size:24px;
	line-height:30px
	}

That's all there is to it. Your own personal tweet archive is now powered by Genesis.

Optional Steps

The following steps are not necessary. They are merely extras that I wanted to incorporate into my own archive. I'll share them with you in case you want to use them.

i Layout
The default layout of the Minimum child theme is content-sidebar. But I only wanted content-sidebar for the front page and any additional pages I decided to create. For single post pages, archive listings, search results etc I wanted full-width-content.

Here is what I did.

Under the Genesis Layout Options I chose full width. That selection imposes that layout site-wide. Then I added the following to the child theme's functions.php file.

/** Force layout on homepage */
add_filter('genesis_pre_get_option_site_layout', 'child_home_layout');
function child_home_layout($opt) {
	if ( is_home() )
    $opt = 'content-sidebar';
	return $opt;
}

This forces the content-sidebar layout on the home page while the rest of the site remains with the full-width-content layout. But what about pages?

Genesis gives you the ability to choose a certain layout on a post-by-post or page-by-page basis. I like that flexibility. Using my own archive as an example, I chose the content-sidebar layout for my About page.

ii Feeds
Since this is simply an archive I saw no need for RSS feeds. To disable them I added the following to the child theme's functions.php file.

// Disable feeds
function fb_disable_feed() {
wp_die( __('We\'re sorry but there is no feed available for this content. Please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

To test it try accessing one of your feed links.

The Result

To see an example of this in action take a look at my own tweet archive. http://tweets.wpcanada.ca

* Post updated 12:30PM

While this is a welcome change it does have a problem. Take a look at the screenshot below.

It seems that when you mouseover the Author name the actual Login name is revealed in the browser tooltip at the bottom of the screen. Kind of defeats the purpose of choosing a unique login name in the first place don't you think?

I'll show you how to quickly fix that in a few steps.

First, fire up phpMyAdmin from your host's control panel and select your WordPress database. Upon doing so you will be presented with a list of the database tables. Click the browse button in the wp_users table. See the image below.

After clicking the browse button you will see the following screen. Click the pencil icon. This will allow us to edit the data contained in that row.

After clicking the pencil icon you will see the following screen. The data we want to edit is contained within the Field called user_nicename. Click the image below to enlarge.

Simply enter whatever name you want in the textarea of the user_nicename Field then click Go.

I chose to go with bugsbunny. Using a test site this is what it now looks like ...

If you're not comfortable with the idea of mucking about in the database check out a plugin called Edit Author Slug from the WordPress Plugin Directory.

While the method I detailed works quite well I stumbled upon what I think is an even better way to go about it. All that is required is a few lines of code in your theme's functions.php file.

Thanks to Bavota San for that! [link]

This comes in handy if you have a large article, such as a tutorial, that you want to break up into smaller segments. Simply add <!--nextpage--> to the point in your post where you want the break to occur.

Using the default TwentyTen theme, here is an example of a long post without pagination. (click to enlarge)

Here is an example of the same long post with pagination added. (click to enlarge)

This method breaks the post into smaller pieces making it easier to digest. Who wants to read a 5,000 word blog post on the same page right?

You can even dress it up further by adding subheadings etc.

Using WordPress Native Functionality

If you navigate to Tools > Import you will see the following screen ... (click to enlarge)

Referencing the image above simply click on Blogroll. If you do not have the OPML importer installed you will be prompted to do so. Once installed, clicking on Blogroll will bring up the following screen shown below ... (click to enlarge)

Okay, we now have the ability to import an OPML file but exactly how do we get that OPML file? As I said the process is somewhat obscure. You can view a copy of your current blogroll links by visiting http://yoursite.com/wp-links-opml.php. For example, if you copy and paste http://wpcanada.ca/wp-links-opml.php in your browser address bar you'll see a list of my links.

Now go back to the previous image above. You'll see that you have 2 options:

1. Specify an OPML URL
2. Choose from your local disk

If you choose the first option simply paste http://yoursite.com/wp-links-opml.php in the Specify an OPML URL field. Select the category you want the links imported to and click the button marked Import OPML File.

If you prefer the 2nd option this is how to do it. The process varies from browser to browser but is basically the same. We'll be using Firefox for this example. As I said earlier, navigating to http://yoursite.com/wp-links-opml.php will bring up a list of your blogroll links. From your browser's menu select Save Page As. In the resulting dialogue box choose Web Page, XML only and save it somewhere on your hard drive. See image below. (click to enlarge)

Now that you have a local copy on your machine you can import that rather than specify a URL.

Using the built in method does have a caveat however. When importing links, whether it be via URL or file import, you can only choose one category to assign your links to. If you have several blogroll categories you can see how this will be a problem. It means that after the import process is completed you'll have to manually re-assign your various links. This can be rather tedious if you have many links in many categories. I'll show you another method using a plugin.

Using a Plugin

First, grab yourself a copy of the Import Blogroll With Categories plugin. You can install it right from your dashboard. If you prefer the old school method download it from the WordPress Plugin Directory and then upload it to your site using your favourite FTP client. Once installed, activate the plugin.

This nifty little plugin will add two new sub-menus to your Links menu:

• Import
• Export

Navigating to Links > Export will automatically take you to http://yoursite.com/wp-links-opml.php where you can save the info to your hard drive.

Navigating to Links > Import will bring up the following screen ... (click to enlarge)

As you can see from the image above the plugin gives you the ability to create new link categories. If you have 3 link categories containing various links this option will automatically create those 3 link categories and assign the appropriate links to them. Very cool.

To quickly recap, if you tend to post a lot of code in your posts you already know the problem of having your code snippets look like code snippets rather than behave like code snippets. For example, if I want to include <php the_content();> and have it display in my post as such I have to manually escape both < and > which means I actually have to write it as <php the_content();> If I don't then the code will attempt to render rather than be displayed. Since each special character has to be manually escaped you can see how quickly this can become tedious especially if you post large amounts of code.

The other point I talked about in the original post was adding extra buttons to your Post Editor toolbar. For example, WordPress includes a code button but not a pre button. Any time you want to use a pre tag you have to manually insert it.

In that post I highlighted 2 plugins which solved these minor problems. The bad news is they no longer work with the current version of WordPress. The good news is I found 2 replacements and yes they work since I use them here.

SimpleCode

Unlike Decoder Button which I highlighted in the original post this plugin does not add a button to the toolbar. What it does do is add a link to the admin menu which when clicked on takes you to a page where you can escape your code. You'll find it under Posts > SimpleCode.

You'll see 2 fields - the first one is where you paste the code with the characters you need to be escaped and the second one is the generated output that you copy and paste into your blog post. See the image below. (click to enlarge)

SimpleCode is simply a huge time saver. You can download it from its home at village-idiot.org

AddQuicktag

AddQuicktag is much like Post Editor Buttons which I talked about in the original post. Once activated it adds a link to the admin menu under Settings > AddQuicktag. The link takes you to a configuration page where you can start adding your buttons. See the image below. (click to enlarge)

All you need to do is insert the label, start tag and close tag for each button. For instance, I use a lot of h3 tags as subheaders in my posts. Rather than manually typing in <h3></h3> I now have a button on the toolbar that does it for me. I added a few extra buttons as well which allow me to quickly insert things like pullquotes or pre tags.

This is what my configuration options look like. (click to enlarge)

And here is a screencap of my Post Editor Toolbar with the extra buttons. (click to enlarge)

You can download the plugin from its home at the WordPress Plugin Directory.

This is Part 2 of a 2 part tutorial.

In Part 1 of this tutorial we showed you how to install XAMPP on your PC. In this tutorial we'll show you how to get WordPress up and running.

First off, head over to WordPress.org and download the latest ZIP which is 3.0.4 at the time of this writing. After you have saved it somewhere on your hard drive we need to extract the contents of the ZIP. Personally, I prefer to use 7-Zip for this. 7-Zip is free and open source and is released under the GNU LGPL license.

Extract the contents of the ZIP to the htdocs folder which you will find at C:\xampp\htdocs All of your web projects will go in that folder. For example, if you want to install another package such as bbPress, Joomla, phpBB etc they all go in the htdocs folder. Think of it as the public_html folder on your host's server. Once you have extracted the ZIP you will now have a folder named wordpress inside the htdocs directory.

As a sidenote, you can rename the wordpress folder to anything you want. If you're like me and intend to run more than one instance of WordPress you'll have to. I have my folders renamed as wp01, wp02 and so forth. If you want to go with just one instance of WordPress then just leave it as it is.

Now we can begin. In your browser navigate to http://localhost/phpmyadmin/ and log in. This is where we'll create the database WordPress needs in order to function. Once you log in you'll see the screen below,

In the screen above you'll need to set a few things. Choose a name for your database. It doesn't matter what it is, for the sake of simplicity I use database names like wp01, wp02 etc to coincide with my various WordPress installs. After you have entered the name of your database you need to set both the charset and collation - go with utf8_general_ci When you're finished click on Create. You now have an empty database.

In the wordpress folder look for the wp-config-sample.php file and open it with a plain text editor like Notepad. The lines we will need to edit are,

define('DB_NAME', 'database_name_here');
define('DB_USER', 'username_here');
define('DB_PASSWORD', 'password_here');

In the first line you will enter the name of the database that you chose earlier. The second line is where you enter the username, it will be root. The third line is where you enter the database password. Using XAMPP the database password is the same password you use to log in to phpMyAdmin. Remember this paragraph from Part 1?

It is in the screen above that you can set your passwords. Referencing the image above, under the heading MYSQL SECTION: ROOT PASSWORD is the password you'll need to access phpMyAdmin. Choose a password and enter it. Don't forget that password because we'll need it again later when we install WordPress. For the options entitled phpMyAdmin authentication and Set a random password for the phpMyAdmin user pma you can go with the defaults. If you want you can tick the box where it asks if you'd like to store your password in the directory shown. When you're finished click on Password Changing.

Just for the sake of simplicity let's say you chose wordpress as the database name and 1234 as the password. The username is the default root. The lines you need to edit should now look like this,

define('DB_NAME', 'wordpress');
define('DB_USER', 'root');
define('DB_PASSWORD', '1234');

That's all you need to edit here. If you were installing WordPress on a live server than you would have to make further edits. You'd want to enter the various security keys in the following section,

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

You might even want to change the database prefix here,

$table_prefix  = 'wp_';

Since this is localhost we don't have to worry about any of that. When you're finished with that file save it and rename it as wp-config.php

Now browse to http://localhost/wordpress/wp-admin/install.php and follow the onscreen instructions. Of course this assumes you haven't renamed the wordpress folder. If you did then you would browse to http://localhost/YourRenamedFolder/wp-admin/install.php You will now be at the WordPress installation screen. See the image below. (click to enlarge)

In the screen above fill in the various details and click on Install WordPress. If all goes according to plan you will see a Success message with a log in button.

further reading:
http://codex.wordpress.org/Main_Page

Go to Part 1 of this tutorial.

This is Part 1 of a 2 part tutorial.

Back in December of 2008 I showed you how to install WampServer and WordPress on your PC in a tut called Installing WordPress Locally. I thought it was time to revisit the topic but this time I'll show you how to do it using XAMPP.

Having WordPress running in a local environment is a good idea for several reasons,

1. Maintaining a clone of your live blog.
2. Testing new functionality such as themes or plugins without affecting your live blog.
3. General experimentation.

I currently have over a dozen instances of WordPress on my computer including two SVN flavours.

As I said in the original article WordPress is not an executable. It is a software package written in PHP meaning it needs a few things to operate. The minimum requirements for WordPress 3.0.4 are:

• PHP version 4.3 or greater
• MySQL version 4.1.2 or greater
• a server that supports PHP and MySQL preferably Apache

XAMPP will install these things for you. Now that we're ready let's begin. Head over to the Apache Friends website and download the XAMPP for Windows package. At the time of this writing it is version 1.7.3. For the purposes of this tutorial we will be using the EXE version that weighs in at 51 MB. You'll find it under Basic Package.

After you have downloaded the EXE to your hard drive, double click the XAMPP icon to begin the installation. After double clicking the XAMPP icon you will see the screen below,

It's pretty self-explanatory. It's asking you what directory you want to install XAMPP in. Go with the default which is C:\ When ready click on Install. The procedure will take several minutes depending on your system so be patient.

Once the various files have been unpacked and set up you will be presented with a series of dialogue boxes.

The first one you will see is the image below,

In the above screen it is asking if you want to add shortcuts to your desktop and start menu. I chose yes. Make your selection and hit Enter.

Next up is the screen below,

In the above screen it is asking you if it should locate the XAMPP paths correctly. Choose the default which is Yes. Hit Enter.

After that you will see the following screen,

In the above screen it is asking if it should make a portable XAMPP without drive letters. Pay special attention to the Note on that screen. If you plan on using services you must choose No, which is the default. I chose No because I want the services and don't plan on using USB sticks. When done hit Enter.

Now you will be shown the next screen below,

When it has finished relocating the various paths hit Enter.

After that you will be presented with the screen below,

In the above screen it is telling you that it set the timezone in php.ini and my.ini to America/Chicago and that you should correct it if it is wrong. We'll worry about that later. Hit Enter.

After hitting Enter you will see the following screen,

In the above window it is telling you that XAMPP is ready to rock and roll. Select option 1 and hit Enter. This will start the XAMPP Control Panel which sits at the bottom right corner of your screen when maximized. From here you can access the various functions. See the image below,

You may see a warning from your firewall - grant permission to both Apache and MySQL. To minimize the Control Panel to the taskbar click the red x in the top right corner.

We now have a functioning server and database installed on our computer.

At this stage you may want to configure a few things such as password protection. Navigate to http://localhost/xampp/ and select your language. I chose English. You are now at the XAMPP welcome page.

From the XAMPP welcome page click on Security in the menu on the left side of the page. See the image below.

After clicking on Security you will see the screen below advising you of security problems. (click image to enlarge)

Don't worry, this is easy to fix. Navigate to http://localhost/security/xamppsecurity.php Once you navigate there you'll see the screen below,

It is in the screen above that you can set your passwords. Referencing the image above, under the heading MYSQL SECTION: ROOT PASSWORD is the password you'll need to access phpMyAdmin. Choose a password and enter it. Don't forget that password because we'll need it again later when we install WordPress. For the options entitled phpMyAdmin authentication and Set a random password for the phpMyAdmin user pma you can go with the defaults. If you want you can tick the box where it asks if you'd like to store your password in the directory shown. When you're finished click on Password Changing.

Still looking at the image above, let's go down to the section entitled XAMPP DIRECTORY PROTECTION. Select a username and password and enter them. Again, if you want to, tick the box where it asks if you'd like to store your password in the directory shown. When you're finished click on Secure the XAMPP directory.

At this point you will need to restart both Apache and MySQL for the changes to take effect. All you need to do is open the XAMPP Control Panel and click on Stop beside both Apache and MySQL. Wait a few seconds then click Start beside both Apache and MySQL.

Okay, now let's test it. Navigate to http://localhost/xampp/ If everything works correctly you should see a dialogue box asking for your login credentials. See the image below.

Enter the username and password you chose earlier. Those will be the values you selected under XAMPP DIRECTORY PROTECTION.

If you entered the correct username and password you should now be back at the XAMPP welcome page.

You can access phpMyAdmin in one of two ways:

1. While at the XAMPP welcome page, click on phpMyAdmin in the menu on the left
2. Navigate directly to http://localhost/phpmyadmin/

Either method will take you there. When you arrive at the phpMyAdmin screen it will ask you for your login credentials. See the image below,

The username you will need is root and the password is whatever you chose earlier. It will be the value you entered under the heading MYSQL SECTION: ROOT PASSWORD.

Congratulations! XAMPP is installed and configured along with a fully functioning Apache and MySQL.

In Part 2 of this tutorial we will install WordPress on your computer. Stay tuned for that.

further reading:
http://www.apachefriends.org/en/faq-xampp-windows.html
http://www.apachefriends.org/f/viewforum.php?f=16

Go to Part 2 of this tutorial.

The problem with writing code snippets is having your snippet look like code but not behave like code. Let's look at an example of what I mean ...

<php the_content();>

The above snippet is a WordPress function that outputs the content of your posts and pages. Now, when including that in a post I can't write it exactly as it appears because WordPress will see the < and > tags and try to execute them. If I want to post a < tag I actually have to write &lt; and if I want to include a > tag I have to literally write &gt; So you can see how much of a hassle this can become if you post a lot of code.

The other problem is although WordPress includes a code button on the Post Editor Toolbar it doesn't include a pre button. Of course the code button is for inserting the <code></code> tags in your posts. On the occasion you want to insert the <pre></pre> tags you have to do so manually.

I'm going to introduce you to two wonderful plugins that will solve both problems.

Decoder Button

This plugin is simply a huge time saver. Once activated it adds a Decode button to the Post Editor Toolbar. See image below.

What the plugin does it automagically convert < to &lt; and > to &gt; All you have to do is highlight your selected text with your mouse then hit Decode. The plugin will take care of the rest. You can see what a lifesaver it is if you have a block of code 20 lines long containing numerous < and > tags. Just highlight the entire block and press Decode. The plugin will only convert any < and/or > tags it sees and will not touch anything else.

You can download the plugin from its home at scriptygoddess.

Post Editor Buttons

Post Editor Buttons is another handy plugin to have in your toolbox if you post a lot of code. The plugin allows you to add virtually any button you want to the Post Editor Toolbar. Want to add a h3 button to your toolbar to make adding subtitles to your posts easier? Done. Want to add a pre button to your toolbar to make adding <pre></pre> tags to your posts a snap? You got it.

Once activated you can start adding your buttons by navigating to Settings > Post Editor Buttons where you will see the following screen ...

You can download the plugin from the WordPress Plugin Directory.

Editor's note: These plugins don't seem to work with the current version of WordPress. Please see the updated version of this post at Writing Code in Posts Made Easy Updated.