Code Hacks to Make your Website Theme Appealing

WordPress has some amazing and highly powerful themes that you can use to improve the functionality and aesthetic appeal of your website. While, there are functionalities available with these themes, you will see that there is a huge possibility of customizing the theme with some interesting code hacks!

Make Each Post Distinct
Not all blog posts are alike; so how can they be styled in a similar fashion? You will need to style individual posts in a way that they can be distinguished by the reader. You will need to use post_class() as well the post ID to style your posts.

Paste the following code to single.php file’s loop

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<?php _e(‘Sorry, no posts matched your criteria.’); ?>
<?php endif; ?>

With the post_class() function used in this code, you can easily style the post that you have selected. You can use a range of CSS style classes like .hentry, .sticky etc. to style the post. Here the post_ID is used so that you can style a particular post instead of the whole post class. Interesting right?

Keeping your Readers Engaged
When your readers come to your site to read a particular post, what happens once they are done? They move out of your website, obviously! What if you want to keep them engaged on your website? What will you do in that case? Show them related posts, which they can click on and keep reading.

Go to single.php file, and paste the code right after the_content()

<?php
$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo ‘<h2>Related Posts</h2>’;
$first_tag = $tags[0]->term_id;
$args=array(
‘tag__in’ => array($first_tag),
‘post__not_in’ => array($post->ID),
‘showposts’=>4,
‘caller_get_posts’=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo “<ul>”;
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><img src=”<?php bloginfo(‘template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, “post-img”, true); ?>&h=40&w=40&zc=1″ alt=”” /><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>
<?php endwhile;
echo “</ul>”;
}
}
$post = $original_post;
wp_reset_query();
?>

This code uses the first tag of the current post to fetch related posts on deck so that they can be displayed. You can set the number of posts you want to display at the end in this code. The $post variable has been cloned at the beginning and restored at the end to avoid issues related to loops.

Style the Home Page
There are ways in which you can style your home page so that they can display the posts or the content in a visually aesthetic manner. Many developers have complicated the whole way themes can include this customization by using two loops. Here’s a simpler way to achieve the same.

Go to index.php and paste the code in place of the existing loop

<?php
$postnum = 0;
while (have_posts()) : the_post(); ?>

<?php if ($postnum <= 3){ ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<div class=”date”><span><?php the_time(‘M j’) ?></span></div>
<h2>(<?php echo $postnum;?>)<a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
<div class=”post-image” style=”text-align:center;”>
<a href=”<?php the_permalink() ?>”><img src=”<?php bloginfo(‘template_directory’ ); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&w=500&h=200&zc=1″ alt=”<?php the_title(); ?>” /></a>
</div>
<p><?php the_content(‘Read the rest of this entry ยป’); ?></p>
<p class=”more”><a href=”#”>Read More</a></p>
</div>
</div>

<?php } else {
<div <?php post_class( ‘single ‘ . $end ); ?> id=”post-<?php the_ID(); ?>”>
<div class=”post-content”>
<h3><a href=”<?php the_permalink() ?>”>(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link(‘_’, ”, ”); ?></h3>
<p><?php the_excerpt( ” ); ?></p>
<p class=”more”><a href=”#”>Read More ?</a></p>
</div>
</div><!– End post –>

<?php }
endwhile;
?>

Here the $postnum function defines how many posts are displayed in full, and which posts are displayed in their compact form.

Avoid Issues that comes with Multiple Loops
When you are dealing with complex WordPress pages, you will need to indulge in multiple loops. This might create a problem, as one or more of the loops may not perform the way you set it to perform. What will you do in such a case?

You can use the following code in index.php or single.php files. Here is how you use a WordPress code with multiple loops; in this case there are two loops

// First loop (get the last 3 posts in the “featured” category)
<?php query_posts(‘category_name=featured&showposts=3’); ?>
<?php while (have_posts()) : the_post(); ?>
<!– Do stuff… –>
<?php endwhile;?>

//loop reset
<?php rewind_posts(); ?>

//Second loop (Get all posts)
<?php while (have_posts()) : the_post(); ?>
<!– Do stuff… –>
<?php endwhile; ?>

The rewind_posts() function allows the two loops to perform one after the other. It clears the first loop that was used, and makes space for the next loop, thus avoiding issues related to multiple loops in a code.

Customize Post Titles
the_title() function in WordPress is responsible for the title of a particular post. You may want two different titles- one for the listing and one for the actual page. How can you achieve this?

Go to single.php file, and check for the call the_title() function. Here you will need to paste the following code

<?php $title = get_post_meta($post->ID, “custom-title”, true);
if ($title != “”) {
echo “<h1>”.$title.”</h1>”;
} else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>

You will need to rewrite the post title by creating a field named custom_title. The post title mentioned here will be the custom title that will go on the actual post page. The code retrieves the custom_title, and checks for the value in this field. In case, there is a value, the code returns the value as the title, else it calls for the_title() function, and displays the value mentioned there.

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for hire wordpress expert then just get in touch with her.

About deeparanganathan