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 postclass() 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 postID 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(); ?>&amp;w=500&amp;h=200&amp;zc=1" alt="<?php the_title(); ?>" /></a>
  </div>
  <p><?php the_content('Read the rest of this entry &raquo;'); ?></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 customtitle. The post title mentioned here will be the custom title that will go on the actual post page. The code retrieves the customtitle, 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.

Conclusion

These five hacks will make your Wordpress theme powerful, and will help you customize the theme. You can avoid the multiple loop issues with this customization. You can even create a distinctly styled home page or keep readers engaged with these coding hacks.

Note: Don't forget to take a backup before you perform these code hacks.

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

Deepa Ranganathan
  • code
  • theme customization
  • wordpress development
By Deepa Ranganathan On 03 Jun, 15  Viewed: 187

Other blogs you may like

Use Shortcodes to Embed Widgets in Wordpress

As George Henry Lewes once said “Genius is rarely able to give any account of its own processes”, shortcode is that genius created by Wordpress which is not given the importance it deserves. With few elemental strokes and minimal editing needs, Shortcodes is able to create necessary elements for... By Deepa Ranganathan   On 14 Apr 2015  Viewed: 157

How to Add Custom Icons to Your Navigation Menu?

It's always good to make your designs user friendly! When your design is intuitive, it guides your user towards the right path all the while. Navigation menus are one of the most intuitive areas of your design. You need to make sure the menus talk for themselves. Adding custom icons to your... By Deepa Ranganathan   On 14 May 2015  Viewed: 206

Customize The Admin Post List in Wordpress Website

What do you see when you click on Admin post list in your Wordpress website? A list of all the posts created by you is displayed with their titles and dates. But, that's about it which is displayed! You won't be able to see any other details related to your post. So, if you want to display some... By Deepa Ranganathan   On 08 May 2015  Viewed: 448

Delightful WordPress Plugins That Augment Split Tests On WP Site

Keeping a check on your WordPress site's performance is a great way that helps make strives in the correct direction. Even a small tweak or change in the website can create a great difference in its performance. Thus, to ensure that your changes are offering breakthroughs and not introducing... By Edward John   On 26 Dec 2014  Viewed: 170

Creating Separate Page For Your WordPress Blog Posts

WordPress by default displays the blog content on the homepage. But, what if you want a separate page for your blog posts? Luckily, WordPress allows users to easily create a page particularly for blog posts. However, this process might seem challenging to most of the newbies. Reading this article... By Edward John   On 16 Dec 2014  Viewed: 209