As I update the DesignRJC site, I run into a query issue for my Custom Post Types in WordPress 3.1 where the previous_posts_link() and next_posts_link() are not displaying properly. If you’ve been working with custom post types in WordPress 3.1 and have this issue, hopefully this will help resolve it.

Researching The Issues With previous_posts_link() And next_posts_link

Basically, the previous_posts_link() and next_posts_link() functions allow you to display the next set of posts being queried. In this case, it is a custom post type of portfolio items I created for DesignRJC to display projects, client work and concepts. You can read more on using the these functions on the WordPress Codex here and here.

Its maddening when something so simple as using a built-in WordPress function does not work properly and I had several hunches to try and debug.

At first, I thought it was the theme.  Currently testing the capabilities of building out a child-theme using Justin Tadlock’s Prototype Theme. Unfortunately, not being an exclusive member of their support forums doesn’t get me much help.  Still not 100% sold on child-themes and relying on a framework but it definitely has its positives.

Began double-checking the custom post type registration functions to make sure the re-write slug name for portfolio post type is different than the page template name used.

Everything checked out okay on that end as well.

I then study the query itself within the page template.  The query I use for the portfolio post type is:

<?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
    $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 2, 'paged' => $paged );
    $loop = new WP_Query( $args );
    while( $loop->have_posts() ) : $loop->the_post();
?>

From reading other people’s experiences, it seems that my query is correct because of creating the variable $paged = ( get_query_var( ‘paged’ )) ? get_query_var( ‘paged’ ) : 1; line of code. This didn’t resolve my problem.

Solution For Fixing previous_posts_link() And next_posts_link() Properly For Custom Post Types

I came across another solution for displaying next_posts_link() and previous_posts_link() functions correctly.  It required the use of a second parameter of $max_number_pages. In short, it passes the total number of pages to be paginated within this custom query. This solved my issues and here is the snippet of the code I used:

<?php previous_posts_link('« Previous', $loop->max_num_pages); ?>
<?php next_posts_link('More »', $loop->max_num_pages); ?>

Notice in both functions, the second parameter is used.  By default, it is set to zero to display all pages.  Pagination for custom post types require extra finesse.

Where it is $loop->max_num_pages, $loop is the original query variable object from above and by using max_num_pages, I pass the total number of pages to be paginated into the second variable from the query.

Very helpful hint and fix to working with WordPress custom post types. Credit goes to WPCanyon for coming up with this solution.

Default WordPress allows you to display recent posts and recent comments through a widget.  However, as I develop my own theme, I want to be able to customize as much as possible without using a widget in my sidebar at all.

The problem is, displaying recent posts and recent comments is not as simple as just using a WordPress template tag found in WordPress Codex.  Instead, you will need to get creative and create a bit of custom code to grab the data from the database.

There are definitely some common code snippets used for WordPress but I found the ability to control and display recent posts and recent comments to be what I need most.

Displaying Most Recent Posts

There are several ways to display the most recent posts from just using the wp_get_archives tag to query_posts tag which involves using the WordPress loop.  There is a more customized solution that I found from Dino Latoga and its as follows:

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Displaying Most Recent Comments

Also from Dino’s post on commonly used WordPress code snippets is being able to display recent comments.  Unlike displaying most recent posts, it doesn’t necessarily uses any WordPress tags.  Instead, you are actually querying your database to grab the necessary information you want to be displayed.

Here is the code for displaying most recent comments:

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

There a tons of custom codes to make your WordPress installation that much more feature and content rich, but these two code snippets have helped me create a better user experience when combined with Tabbed Menu in the sidebar.

It is always nice to add custom features to enhance the user experience.  One of these enhancements is to add the an author’s bio information to an article he or she has written.  This is particularly useful because when reading a good article the user may be inclined to learn more about the author.

A quick snippet of the author’s information can help users relate to the author as well as help the author promote himself or herself.

Using the_author_meta tag to grab information

In WordPress, each registered user can fill out information about themselves in their profile.  This is found in the Dashboard under Users -> Your Profile.  Some of the meta information fields that are available by default are the following:

• Username
• First name
• Last name
• Nickname
• Email
• Website
• AIM
• Yahoo IM
• Jabber / Google Talk
• Biographical Info

By using the_author_meta tag in your single.php, you are able to pull the information regarding the author.  Of course, you will need all the strings that you can use with the_author_meta tag.  Here is a list of all the strings to use the_author_meta tag:

• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• user_activation_key
• user_status
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim
• user_level
• user_firstname
• user_lastname
• user_description
• rich_editing
• comment_shortcuts
• admin_color
• plugins_per_page
• plugins_last_view
• ID

Course, you can read more about the_author_meta tag at WordPress Codex.

Sample Code Snippet of Adding Author Bio to the Post

A quick simple sample is to grab the author’s display name, bio information and website.

<div id="author">
<p>Written by: <?php the_author_meta('display_name'); ?></p>
<p>Quick Bio: <?php the_author_meta('user_description'); ?></p>
<p>Website: <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a>
</div>

Adding the code above into your single.php after the loop, you will be able to display the author information.  You will need to style with CSS.

Adding Gravatar to the Author Bio

To further customize the author info, you may want to add an avatar.  Because gravatar is linked to your email and recognized by all WordPress installation, the only tag you need to grab your avatar icon is the following code:

<?php echo get_avatar (get_the_author_email(), '100'); ?>

The code snippet above is just a function.  Basically, you are calling the function get_avatar and the two parameters following is for the author’s email and the second is the size of the avatar.

Other Guides on Adding Author Bio Information

• Add an author’s bio to WordPress posts – Stranger in a Strange Land
• Displaying Author Pic and Bio in Your WordPress – Gabe Diaz

The sidebar for WordPress is typically where the archive, categories and other items are listed on your front page. However, as your categories and numbers of posts in the archive grow, so does the list; resulting in a really long sidebar.  Having a long sidebar can take up precious onscreen real estate.  It can also be a distraction to the user.

Tabbed Menu as the Solution

In looking how to save some onscreen real estate as well as providing a more slick interface for users to navigate for content on the site, designers can choose to create a tabbed menu.

In searching the internet, there were many solutions.  There are actually a couple of specific plugins for WordPress.  Although, it is easier to use a plugin, the widget based style is less customizable for my liking.

I found several resources on the tabbed menu mechanism and some required a lot of coding as well as using different javascript framework libraries to achieve such effect.

Implementing the Yahoo! TabView

In the end, I chose to use the method found on Rubiqube because it uses a trusted code source, Yahoo’s TabView.  Rubiqube does a good job of explaining implementation and reassures that this technique will work with WordPress.

Here are the steps I took to implement:

1. Go to http://developer.yahoo.com/yui/tabview/#start and read through the instructions.
2. You will need to paste the following code in the header part of header.php for the theme your working on.  This will allow your theme to load the necessary javascript for the tabbed view menu.

   <!-- Sam Skin CSS for TabView -->
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
   
   <!-- JavaScript Dependencies for Tabview: -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
   
   <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
   
   <!-- Source file for TabView -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>

3. Add the HTML code into the location of where you desire the tabbed menu, this is most likely somewhere in your sidebar.php.

<div id="demo">
<ul>
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div>
<div>
Tab One Content</div>
<div>
Tab Two Content</div>
<div>
Tab Three Content</div>
</div>
</div></pre>

<pre><div id="demo"><ul>	<li><a href="#tab1"><em>Tab One Label</em></a></li>	<li><a href="#tab2"><em>Tab Two Label</em></a></li>	<li><a href="#tab3"><em>Tab Three Label</em></a></li></ul><div><div>
Tab One Content</div><div>
Tab Two Content</div><div>
Tab Three Content</div></div></div>

4. Do not forget to activate by enabling the Yahoo TabView by calling the  script with the following:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>

5. Finally, make sure the tabbed menu is loaded on the desired page and the effects are working.  You can now begin customizing the content to be loaded.  Just replace items in the HTML code markup.
6. Once you customize what you want in each tab which is just a <li> element, you can add the CSS classes to style it to your liking.  The CSS classes used to style the tabbed menu are the following:

   .yui-navset {
       background: #E8F4FD;
       padding: 5px 5px 3px 5px;
       margin-bottom: 35px;
   }
   .yui-nav li
   {
       list-style: none;
       float: left;
       margin-right: 2px;
       text-align: center;
       font-size: 90%;
       font-weight: bold;
   }
   .yui-nav li a
   {
       text-decoration:none;
       color: #005288;
       display: block;
       padding: 8px;
   }
   .yui-nav li.selected a {
       background: #FFFFFF;
   }
   .yui-nav li a:hover
   {
       color: #000;
   }
   .yui-content {
       background: #FFFFFF;
       clear: both;
   }
   .tab-list li {
       padding: 8px;
       border-bottom: 2px solid #E8F4FD;
   }

Simple enough, I was able to implement it after reading both articles and having a rough idea on how to style it.  It works easily enough and I will use this for future projects as well.

If your running WordPress, you’ll know that if you want to log into the admin dashboard, you have to type in the URL for the login page.  This can be inconvenient if you set up a social website where you want users to be able to login.

Sure, a link to the login page can be done, but that requires one extra click and loading of the page.

WPDesigner has a great snippet of code to add to your theme so users can login from the front page.

The Code

You can download the code from WPDesigner.  But here is a quick preview of the code:

	<li>
		<?php global $user_ID, $user_identity, $user_level ?>
		<?php if ( $user_ID ) : ?>
		<h2>Control panel</h2>
		<ul>
			<li>Identified as <strong><?php echo $user_identity ?></strong>.
			<ul>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

				<?php if ( $user_level >= 1 ) : ?>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
				<?php endif // $user_level >= 1 ?>

				<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
				<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
			</ul>
			</li>
		</ul>

		<?php elseif ( get_option('users_can_register') ) : ?>

		<h2>Identification</h2>
		<ul>
			<li>
			<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
				<p>
				<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User</label><br />
				<label for="pwd"><input type="password" name="pwd" id="pwd" size="22" /> Password</label><br />
				<input type="submit" name="submit" value="Send" />
				<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><br />
				</p>
				<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
			</form>
			</li>

			<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
			<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
		</ul>

		<?php endif // get_option('users_can_register') ?>

	</li>

Just copy and paste the code above into your sidebar or any other desired location where you want the login form on your front page.  You can do some CSS to edit the appearance so it fits your theme’s design.

Today, I decided that I needed to move my website, a WordPress, installation to a different location.  Since I was going to move and migrate my entire website, I figured I might as well choose an ideal location.

Being hosted on Bluehost meant that my primary domain resided in the root folder.  Any add-on domains were in their own sub folders or sub directories inside the root or public_html.  The downside to this is it keeps all the files to my primary domain unorganized in the root folder.

In order to have it organized, I wanted to have my primary domain folder reside in its own sub folder or sub directory.  I am not as comfortable in the server environment as my knowledge of working with the .htaccess file is limited.

I searched Bluehost knowledgebase as well as other sources and finally came up with a solution that would work.  It required modifying the .htaccess file. You needed to redirect any traffic hitting your domain name to the sub folder directory.

The code is as follows:

# Bluehost.com
# .htaccess main domain to subdirectory redirect
# Copy and paste the following code into the .htaccess file
# in the public_html folder of your hosting account
# make the changes to the file according to the instructions.
# Do not change this line.
RewriteEngine on
# Change yourdomain.com to be your main domain.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteCond %{REQUEST_URI} !^/subdirectory/
# Don't change this line.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteRule ^(.*)$ /subdirectory/$1
# Change yourdomain.com to be your main domain again.
# Change 'subdirectory' to be the directory you will use for your main domain
# followed by / then the main file for your site, index.php, index.html, etc.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
RewriteRule ^(/)?$ subdirectory/index.php [L]

Once that was accomplished, I was able to have my files in a sub folder directory organized like the other add-on domains.

As a side note, since my website is using WordPress, it took a bit more delicate effort to get it working structurally.  One of the problems I had after the redirection to my .htaccess file is that WordPress kept rewriting my .htaccess file rendering the redirection code above useless whenever I updated the Permalink structure.

After hours of testing and trying to figure it out, I found my problem.  The solution is to make sure that once you have done the redirect code to your root .htaccess file, the WordPress Address (URI) and Blog Address (URI) both need to match.

For example, even though, my domain is http://yourdomain.com but the WordPress installation is located at http://yourdomain.com/subfolder, both WordPress Address and Blog Address URI’s need to point to the path of http://yourdomain.com.  I made the mistake of pointing my WordPress Address to http://yourdomain.com/subfolder causing a loop or an Internal 500 Server error.

Here are some additional resources for you if you are on Bluehost and also about to do what I just did.  This can save you lots of time, like 4 hours worth.

• Bluehost Knowledgebase
• Discussion and Solution at WebProWorld
• Another Bluehost Redirect Method

WordPress is a popular blog.  I did not know how much I would fall in love with developing on this platform.

For my installation, I have it hosted on Bluehost.  Since I installed it in 2007, I was not aware of its capabilities at the time.  I had it in directories nested two levels deep and also had it pointing to a different subdomain, http://blog.designrjc.com.  This is not ideal for SEO and it kept organization chaotic.

I had previously moved a WordPress installation to a different location on the server so I have had experience, but that one was a bit more straight forward.

There are several methods to move or migrate your WordPress to different locations on your server but I believe this to be the easiest implementation.

1. Backup your WordPress installation by downloading the entire contents via FTP as well as backing up your database.  Just in case something goes wrong and you need to do a re-install.
2. Create a new folder at the location of the directory where you want it to be in.
3. Log into your WordPress website
4. Go to Adminstration -> Settings -> General panel.
5. Change the WordPress address (URI): to the new location path of where all your main core files will end up at.
6. Change the Blog address (URI): pointing to where the new location is at.  In most cases, this will match the previous box.
7. Move all your files to the new directory into the folder you just created.
8. Now test to see if you have successfully moved and migrated your WordPress to the new location.

There are several things to note after you migrate.

1. If you were using Permalinks you will need to log into your Dashboard and update the Permalink structure.
2. Images may be missing from posts because they are pointing to the old path.
   • Old Path – http://yourdomain.com/wordpress/blog/wp-content/uploads/
   • New Path – http://yourdomain.com/newwordpress/wp-content/uploads/

Good luck on moving your WordPress installation to a more ideal location that is easier for you to keep organized as well as being SEO friendly.

Here are some additional resources and guides to help you with this:

• Moving WordPress via WordPress Codex
• WordPress Codex – Changing the Site URL

WordPress is a great platform to work with because of the structure, however, there are limitations to a default WordPress theme.

One of the limiting factors of WordPress by default is that the included pagination for navigation is too simple.

The default WordPress pagination allows for “previous” and “next” hyperlinks only.  As you can imagine, without using the search function, it may take you some time to jump several pages.  Bonus:  If your blog has many articles and posts, the number of pages displayed can show the visitor how much you’ve actually written on a certain subject.

As a web designer focused on user interface and experience, I am not satisfied with the default.  Instead, I want better pagination for the website.  Thanks to WordPress’ the ability to support plugins, this task is made simpler than creating my own PHP functions.

WP-PageNavi plug created by Lester Chan is a plug-in used for easy implementation of page navigation.  Here is a look at the default WP-PageNavi WordPress plug-in for page navigation:

I won’t go into detail, but you can see that this method of page navigation is found across the internet on many websites.

Download WP-PageNavi

Installation and Styling of WP-PageNavi

1. Download WP-PageNavi or search for it through the WordPress Dashboard Plugins section
2. Upload the downloaded folder, “pagenavi” into your wp-contents/plugins folder or you can also automatically install from the Dashboard
3. Now activate the plugin
4. In order to use it in a theme, you will need to add the following code:

   <?php if(function_exists('wp_pagenavi')) {wp_pagenavi(); ?>

5. You can toggle the different settings in WordPress Dashboard found under Admin -> Options -> PageNavi
6. Make sure to click “Update Options” once your done

To style the page navigation to your liking, the file to edit is pagenavi-css.css found here:

/wp-content/plugins/pagenavi/pagenavi-css.css

Good luck on making your WordPress installaion custom!