Whether you just like to put up a personal greeting or have a site that has quite a few users, something a welcome message is nice. I have seen a few people put this together and have a centralized paged where users can log in, read the personal message, and then go on their merry way using the website.

The code is really simple. This code calls the current user. If you want to only let people like contributors or other roles see the message, you have to adjust the level_0 to any of the levels corresponding with the roles. (Example: administrator is 10)


< ?php global $user_ID; if( $user_ID ) : ?>
< ?php if( current_user_can('level_0') ) : ?>

Welcome < ?php global $current_user; get_currentuserinfo(); echo ($current_user->user_login); ?>
< ?php else : ?>
< ?php endif; ?>
< ?php endif; ?>


You can edit the little welcome message to whatever you like.

Aside from the wonderful WordPress 3.0 navigation, a lot of people really like the two-tiered navigation. So, what is it? The two-tiered navigation is a horizontal navigation that the first layer on top is the parent pages and the second are the child pages. When you click the parent page, the child pages will appear below the parent.

In order to successfully make a similar two-tiered example like that of above, you will need to insert some html, and WordPress php functions to your layout’s template, and the CSS to help with that sheet. However, this tutorial is written for you as a step-by-step process to make it easier to understand.

Step 1. You will want to keep things simple and define our tiered navigation with its own list ID named ‘tiered-nav.’ Since this is the beginning, add the php function to call the parent page.

<ul id="tiered-nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>

Step 2. After this, you want to add the php if function statement to connect the parent page and children pages, so it will connect to the correct section. For example (using the picture example included with this tutorial) if you have About, Freebies, and Contact for parent pages, you do not want to click on Contact and its child page is Site History (which is suppose to be in the About section.)

<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>

Step 3. You want to make sure to add the second list that will call your child pages. To keep organized, especially when using CSS later, this list unordered list ID is named ‘sub-tiered-nav’.

<ul id="sub-tiered-nav">
<?php echo $children; ?>
</ul>

Step 4. Not done yet! You have some php functions to close. The if php statement needs to be closed and the whole function that was used in creating the two-tiered navigation needs to be closed.

<?php } else { ?>
<?php } ?>

Step 5. To get this code looking like a two-tiered navigation, you will have to specify in your CSS what to do in order to make this happen. Right now, you have two unordered lists.

/* Two Tiered Navigation */

* {
	margin:0px;
	padding:0px;
	}

/* Top Tier */

#tiered-nav {
	background:#C1DBE9;
	border-bottom:1px solid #FFFFFF;
	height:32px;
	}

#tiered-nav li {
	margin-right:25px;
	}

#tiered-nav li, #sub-tiered-nav li {
	float:left;
	list-style:none;
	}

#tiered-nav a, #tiered-nav a:visited {
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	}

#tiered-nav a:hover, #tiered-nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#tiered-nav li.current_page_item a,
#tiered-nav li.current_page_item a:visited
        {
	background:#073447;
	}

/* Second Tier */
#sub-tiered-nav {
	background:#E3EFF7;
	border-top:2px solid #BBD8E7;
	border-bottom:2px solid #E3EFF7;
	height:28px;
	}

#sub-tiered-nav {
	border-right:1px solid #073447;
	padding:0px 7px;
	}	

#sub-tiered-nav a, #sub-tiered-nav a:visited {
	color:#073447;
	text-decoration:none;
	font-weight:bold;
	}

#sub-tiered-nav a:hover, #subnav a:active,
#sub-tiered-nav li.current_page_item a,
#sub-tiered-nav li.current_page_item a:visited {
	text-decoration:underline;
	}

Of course, you can use your own colors to pull off this effect and insert images for backgrounds.

Please sneak on over to Darren Hoyt to thank him for the original code for this tutorial.

There is a Custom Admin Branding plugin for that, but why bother when you can insert a few lines into your theme’s functions.php file?

However, if you like to change up your site’s theme sometimes, you probably want to change the log in page too. A lot of people have been really hooked into branding their WordPress log in page, especially since guest blogging has become popular.

Here is the code I put together for WPAddict. This is all merely adding CSS and an action to your theme’s functions.php file.

Adding the action for your custom login:


add_action('login_head', 'my_custom_login_logo');


Replace the WordPress logo:


function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }


Remove the border at the top of the login page:


body { border-top-style:none; }


Adding your own background to the login page:


html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}


Removing the Back to blog link:


#backtoblog { display:none; }
</style>';
}


Full code:


function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
body { border-top-style:none; }
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
#backtoblog { display:none; }
</style>';
}

add_action('login_head', 'my_custom_login_logo');


You can customize more of the page too, so just view the source of your login page and you can put other CSS attributes into the code above.

I went over an effective way to put more social network handles into your WordPress profile without having to use a plugin, as well as being able to call it to your template in case you have an author’s box somewhere within your single post template.

This time, we are not going to have to tinker with your functions.php page.

To create a new page, you will need to specify that you are making a new template. This one will be called author.php

You want it styles somewhat similar to your other pages, but you can add the following and style it according to your own template. The code contains the gravatar, 3 different social network handles, and a simple listing of the author’s posts. You can customize it to display excerpts, display excerpts with thumbnails, full posts, and more.


<!-- This sets the $curauth variable -->
<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
<div class="post-top">
<div class="post-title">
<h2>About: <?php echo $curauth->display_name; ?></h2>
<p style="float:left;padding-right:10px;"><a href="<?php echo $user_link; ?>" title="<?php echo $curauth->display_name; ?>">
<?php echo get_avatar($curauth->user_email, '96', $avatar); ?>
</a></p><p style="float:left;">Connect with <?php echo $curauth->display_name; ?> at: <a href="http://twitter.com/<?php echo $curauth->twitter; ?>"><strong>Twitter</strong></a> | <a href="http://facebook.com/<?php echo $curauth->facebook; ?>"><strong>Facebook</strong></a> | <a href="http://linkedin.com/in/<?php echo $curauth->linkedin; ?>"><strong>LinkedIn</strong></a></p>
<br />
<h3><strong>Website:</strong> <span><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></span></h3>
<p><strong>Profile:</strong> <?php echo $curauth->user_description; ?><p>
</div></div>
<div class="entry">
<h3>Posts by <?php echo $curauth->display_name; ?>:</h3>
<ul>
<!-- The Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>
</li>
<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>
<?php endif; ?>
<!-- End Loop -->
</ul>

In order for people to be able to see your author, simply add the following within your post’s byline:

Written by <span><?php the_author_posts_link(); ?></span>

This is actually from my own template from Blondish.net. In fact, this is what my author profile looks like at Blondish.net.

Recently I had a run in with coding with a client who had a developer put together a sloppy custom WordPress query in place of a proper loop. In fact, it was amazing because it was put in replace of code on a great premium theme by StudioPress. By the way, no it was not StudioPress who did it, so let me get that out of the way. They are good at what they do.

Anyhow, the custom query was three different pieces of code: a section to show to first 5 most recent posts, and then two columns underneath to show two different categories that the site owner wanted to feature. The was done using a similar solution to the one At Weblog Tools Collection called Define Your Own WordPress WP-Query.

The problem was that this solution was not providing a good pagination. The “Next” and “Previous” did not work, and even if I wanted to use my favorite WP-PageNavi plugin, then I was pretty much – “sorry, out of luck.” This does not work well as a replacement for the regular loop, especially for what it was being used as.

So, I set out to put together a better solution. In the end, I displayed the most recent posts by normal Loop means. For the categories, I used the following:


<?php $recent = new WP_Query(); ?>
<?php $recent->query('cat=1&showposts=3'); ?>
<?php while($recent->have_posts()) : $recent->the_post(); ?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></h3>
<div class="attachment-post-thumbnail">
<?php the_post_thumbnail(); ?>
</div><?php the_content_limit(130, ""); ?>
<?php endwhile; ?>


We are still using a custom WP_Query, but only using it for the categories. You can replace the 1 after cat=1 to whatever category you want to display, and you can change the number of posts displayed by changing the number in showposts=3.

You can customize the code further with CSS and adding other attributes.

I left some styling to include the thumbnail, title, and a short excerpt, even using the_content. Hiowever, you can change it to the_excerpt if you have set your excerpts through your functions.php or excerpt plugin.

An example used by this is at Fab Gab Blog.

Sound easy?

This is a guest post by Jason Capshaw. Jason Capshaw is founder of MyWebTronics, an Atlanta web design firm. He resides in Atlanta with his wife and two children

This is Part 2 in the series of How to Optimize WordPress for Speed.

Reducing PHP functions in themes

WordPress has thousands of different functions that could be called at different points of page loading. Reducing the number of functions used by your theme will assist in speeding up page load times.

Themes are built to be used on any domain name without having to hard code anything. This is very useful for adding a new theme to your site, but it requires the use of certain functions to identify blog information. Since you know what them you are using, hard coding some of those functions will reduce server load.

Tip: the quickest way to learn how to fix something is not to back it up. So, if you are not looking for an additional lesson in programming, make sure to back up your files before you start editing them.

Here are a few functions to replace:

• bloginfo(‘stylesheet_url’); In the head section of your site. Should replace with http://www.example.com/wp-content/themes/YOURTHEME/style.css
• get_option(‘home’); This function is usually in the theme header in the link for your blog home page. Replace with your blog location with http://www.example.com/blog/
• bloginfo(‘name’); This function calls your blog name. Simply replace it with your blog title, “My Example Blog” in the theme header.
• bloginfo(‘description’); This function is usually in your header and calls your site’s tagline. Replace with your tagline.
• bloginfo(‘template_directory’); This function (or something similar) may appear throughout the theme to call certain images the theme uses. Simply hardcode each image link to the hard URL as in http://www.example.com/wp-content/themes/YOURTHEME/images/mypic.gif.
• edit_post_link(‘Edit this entry.’); When an editor or admin is logged in, links appears so that the site can be edited. I would just drop this all together and edit eveything from the admin panel.

Reduce HTTP requests

When a browser requests a web page, a series of communications begins between the browser and the server. Each time the servers sends a file, it sends a header first to tell the browser what to expect. If the subsequent data does not match, your browser should show an error.

The fewer times the server and browser engage the 7 different network layers of the internet, the less time will be needed to download the page. You do not want one big file with everythin in it, for example, CSS and javascript should be in seperate files. However, in an ideal situation your server should only send four different files:

• HTML
• Stylesheet
• Javascript
• Image

Most sites work like this:

• HTML
• Stylesheet 1
• Stylesheet 2
• Javascript 1
• Javascript 2
• Image 1
• Image 2
• Image 3
• Image 4
• Image 5
• Image 6
• Image 7
• Image 8

Steps to reduce HTTP requests:

#1 Put all CSS into one file

Some themes use multiple CSS stylesheets. Merge them together. Also, some plugins use stylesheets. If you are really serious about getting every bit of speed possible out of WordPress, you could edit the plugin and add the plugin’s CSS to your theme’s CSS file.

#2 Combine all javascript into one file

Put every single javascript function into one file. They should not conflict with each other.

#3 Use CSS sprites for background images

CSS has the ability to show only a portion of a particular image in the background. There are some problems with CSS sprites, for example ‘repeat’ may be a problem. However, many background images can be combined into one file, especially icons.

Here are a few examples of large sites that use sprites:

Stop use of Avatars

When avatars are enabled, WordPress takes the user’s email address and turns it into an md5 hash. It then communicates with Avatar to find out if the user has signed up and what Avatar they use. If they do not have one, they send the URL to the one you have selected.

The browser is required to make multiple DNS requests to the URL provided for the Avatar and download the image from a different source. This process may not be so bad for one or two comments. But when a post has many comments, it can become extremely burdensome and can slow your lightning fast WordPress load time into a turtle’s crawl.

Test plugins

When running a WordPress site, you need to weigh pros vs. cons for certain plugins. The easiest way to test a plugin, is to test your site speed before the plugin is activated, and after the plugin is activated.

If the plugin slows down your site; does it add enough value to continue it’s use? In most cases, probably not. Plugins are usually designed to get users to engage with your site, if it causes a higher bounce rate or frustrated users it is counter productive.

This is a guest post by Jason Capshaw. Jason Capshaw is founder of MyWebTronics, an Atlanta web design firm. He resides in Atlanta with his wife and two children

There are many reasons why you want WordPress to be as fast as possible. The least of which is user experience. Visitors are extremely impatient with slow loading sites. Google has zero’d in on this fact and has now added site speed as one of its 200+ ranking factors.

Reduce data base requests

Use DB Cache to cache data base queries so that the server does not have to access the MySQL database. Database queries use up a significant portion of server resources. By only performing the database query once for multiple visitors, you free up resources to quickly download the page.

Once the plugin is activated, you will see the following at the bottom of your content if you have wp-footer() in your site:


Generated in 0.730 seconds. Made 23 queries to database and 9 cached queries. Memory used - 19.67MB
Cached by DB Cache


As you can see, it gives you a readout of how many queries were performed and how many were pulled from cache.

Optimizing your MySQL database

If you have ever used Steam for gaming, or defragged a computer hard drive, you are familiar with this concept. Basically, phpMyAdmin gives you the ability to repair corrupted data and optimize tables.

Open your phpMyAdmin panel and navigate to the database structure. Select all of the tables and select ‘Repair tables’.

Repeat the process and this time select ‘optimize’. Your MySQL database will be running at maximum capacity.

Tip: to keep from having to do this manually, you could just create a cron job and do something like this in a php file:


$sql = 'OPTIMIZE TABLE `wp_commentmeta`, `wp_comments`, `wp_links`, `wp_options`, `wp_postmeta`, `wp_posts`, `wp_terms`, `wp_term_relationships`, `wp_term_taxonomy`, `wp_usermeta`, `wp_users`';


mysql_query($sql);


Please stay tuned for Part 2 of How to Optimize WordPress for Speed.

The authoer’s page by default only allows you to put just enough information up. For those who utilize their authors.php page, they can add more things like your Twitter and Facebook profile to their author profile and not have to even alter the core of their site. You can even add more than that.

This is done by adding and a simple function and filter to your theme’s functions.php file.


function my_new_contactmethods( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
//add Facebook
$contactmethods['facebook'] = 'Facebook';
//add LinkedIn
$contactmethods['linkedin'] = 'LinkedIn';

return $contactmethods;
}
add_filter(‘user_contactmethods’,'my_new_contactmethods’,10,1);

If you want to add more, you can do that. For example, if I wanted to add in YouTube, I would put the following code in before the return $contactmethods line and after the last social network code listed. Example code:


//add Youtube
$contactmethods['youtube'] = 'Youtube';


In order to call these into your author profile page, you can put the following code. In the case of the code above for Twitter, LinkedIn, and Facebook:

Twitter:


<a href="http://twitter.com/<?php the_author_meta('twitter'); ?>">Twitter</a>


Facebook:


<a href="http://facebook.com/<?php the_author_meta('facebook'); ?>">Facebook</a>


LinkedIn:


<a href="http://linkedin.com/in/<?php the_author_meta('linkedin'); ?>">LinkedIn</a>


As a note, even though you can add as many social network accounts to your WordPress author profile, you should probably use the ones that are the most important and most relevant to your website’s visitors.

Sounds easy?

By the way, Joost de Valk is the one to give credit for the ability to add more to the user contact fields.

Displaying two columns for categories in your WordPress is not too hard. Just takes a little php, html, and css. You can put this in your posts, pages, or sidebar.

We are taking the usual category code for WordPress


<?php wp_list_categories(); ?>


and replacing it with the following code. This php splits up each category and into columns, much like splitting odds and evens.


<?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i< $cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>


After you have put the above code you are ready to add your HTML right after it. Remember you need to make sure to remember your css class definition, because you will be adding it to your theme’s stylesheet. Remember you can use your own definitions, but remember to make sure you are not already using them for another part of your theme.


<ul class="alignleft">
<?php echo $cat_left;?>
</ul>
<ul class="alignright">
<?php echo $cat_right;?>
</ul>


Now that you have the php and html done, you need to add your css. In the case of this tutorial, I have used alignleft and alignright for the classes.


.alignleft {
float: left;
}
.alignright {
float: right;
}


Of course, if you want to play with the css and do other things, by all means go ahead.

How to Make Your WordPress front page a static page, rather than a page for your blog. Some people prefer to have their blog on a different page and have other pages they want visitors to see before the blog.