You can use wordpress to create a custom and professional looking website. In this post we are sharing some wordpress custom field tricks and hacks that will allow you to have a better wordpress powered site.

Sometimes there could be guest bloggers who only writes one post  on your site and that’s all. You can use this method to show regular author information. Keep in the mind the author has be registered in wordpress. Maybe, you do not want to register every time a new guest authors writes. But, how do you still get guest author information to show up in the same format as regular author? Custom Fields !

Guest Author Name in the Front Page and Individual Posts

The first thing we need to do is to set a wordpress if statement to get the custom filed value. This way it will only show up when the custom file value is assigned. Open up your “index.php” and “single.php” and paste the following code where you want the author name to show up. It could be after date or after comments. For example after this code: <?php the_time(‘M j, Y’) ?>

< ?php if ( get_post_meta($post->ID, 'guest_author_name', true) ) { ?>
// check to see if custom field guest author name exists
< ?php echo get_post_meta($post->ID, "guest_author_name", $single = true); ?>
< ?php } ?>

Once we put the if statement we just call it on whichever post we want the guest author name to show up. The guest author name should show up on the front page and for specified post only.

Guest Author Information Block on Individual Post

Okay , so we have the name showing up in the in the post meta description but some information about the guest author would be nice too.

Again, first we have conditional if statement. which looks for author image thumb and description. Do not forget to change the image the directory. Also, we attached a class to the block and thumb, it allows to style both image and the block using CSS.

<?php if ( get_post_meta($post->ID, 'autho_thumb', true) ) { ?>
               //check to see if autho_thumb  custom field exist and gets the thumbnail
             <div class="writer_bio">
            <img class="autho_thumb" src="http://desizntech.info/wp-content/uploads/author/<?php $values = get_post_custom_values("autho_thumb"); echo $values[0]; ?>" alt="Author Thumb" width="60" width="60" height="60" />
<?php } ?>
               //check to see if description exist
<?php if ( get_post_meta($post->ID, 'guest_author', true) ) { ?>
<?php echo get_post_meta($post->ID, "guest_author", $single = true); ?></div>
<?php } ?>

Here is the CSS I used

.writer_bio {
	color: #666;
	background: #eee;
	text-transform: none !important;
	font-size: 13px;
	font-weight: normal;
	height: 75px;
	width: 600px;
	padding: 6px;
	padding-bottom: 6px;
	padding-left: 0;
	margin-bottom: 10px;
}
.writer_bio img {
	padding: 0 !important;
	float: left !important;
	margin-left: 4px !important;
	margin-top: 3px !important;
	border: 2px #ccc solid !important;
	height: 60px;
}

You even style more with the class autho_thumb. Once that is done all you need to do it add the autho_thumb and guest_author in the field and fill out the information. You can even add HTML such as link in custom field.

So, there you have two custom field for guest author information. This might seems a lot of step. Trust me once have done it, it is just matter of adding the image and the description next time you want to do it.

Better Custom Field for Displaying Post Image on Front Page

I saw this method on Smashing Magazine by Jean from Catswhocode. This method is used to display a thumb for the post on the front. Tutorial9 also did a similar tutorial. I wanted to take it a little bit further and make easy for the front end user. Also, with Jean’s method every the images would have  same alt=”post-image”  and I might not be good for search engine. Moreover, you would have to include the whole URL for images everytime. First here is the code:

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);// variable for image
	    $image_alt = get_post_meta($post->ID, 'img_alt', true);// variable for description
// check if the the custom field is called
if ($postimageurl) {
?>
      <a href="<?php the_permalink(); ?>" rel="bookmark">
<img src="<?php echo get_option( 'siteurl' ) . '/wp-content/uploads/thumb/' ?><?php echo $postimageurl; ?>" class="post-img" alt="<?php echo $image_alt; ?>" width="500" height="300" /></a>
<?php } else { ?>

Before I explain the code, notice that I did not add a else statement for a default thumb. Look at Jean’s post if you would like to have a default image if so image is assigned in custom field.

First we have two varibales $postimageurl and $image_alt. First one is to get image location and second one is to add the image name. Then again we set a if statement to check if the custom field gets called. The different thing is this code <?php echo get_option( ’siteurl’ ) . ‘/wp-content/uploads/thumb/’ ?> that gets the image location. I have create a folder called  thumb in my wordpress upload directory, so rather than typing the whole  URL evertime I would just type the image name, once I uploaded the image in the folder. Look at the following screenshot:

If you want a different directory such as lets say you would store your images in the root of your domain just replace <?php echo get_option( ’siteurl’ ) . ‘/wp-content/uploads/thumb/’ ?><?php echo $postimageurl; ?> with http://yourwebsite.com/images/<?php echo $postimageurl; ?>.
So, the code is a little tweaked so every post image would have a different alt (title) and you would type the image name extension rather then whole URL.

Arrange Your Wordpress Navigation However You Want

The first thing to know is wordpress list pages using wp_list_pages tag, which is usually located in header.php. but you may not want  to list all your pages. If you want to hide all some of your pages from showing up you would do this:

  <?php wp_list_pages('include=7,13' ); ?>;
//or
<?php wp_list_pages('exclude=5,9');?>;

Exclude or include almost works the same way. Exclude will omit certain pages from wordpress page list and include only show the pages ID you specify. (How do I find my page id?). However, most of the web design blog or any other blogs like to use tags or categories as their navigation. In that case, you can just get rid of wp_list tag and custom code the navigation. For example: in Desizn Tech’s CSS categories is linked this http://desizntech.info/category/css/ .  Alternately you can do that with your tags as well. The benefit of coding this way you can assign CSS class to style each element of the navigation.

Showing Archive Topic

Most of the wordpress themes comes with  archive.php  page . But, I have seen many websites where the archive pages is not very helpful  and does not tell users what topic or categories they are browsing. You can add the following codes in your archive.php to avoid that confusion.

< ?php /* If this is a category archive */ if (is_category()) { ?>
		<h3 class="pagetitle">Current Browsing Topic: ‘< ?php single_cat_title(); ?>’</h3>
 	  < ?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h3 class="pagetitle">Posts Tagged  as ‘< ?php single_tag_title(); ?>’</h3>

Snazzy Archive and Clean Archives Reloaded are two cool plugins that improves wordpress archive page.

That’s it for now. If there any cool wordpress trick or hack you know please share with us.