Create A Home Button In WordPress

I think it’s a good practice to have a home link button at the end of every page for readers to get back to the main page.

Create a graphic button or download the free icon on the net: 1 for main and 1 for hover. If there is only 1 image, just use to change color and save for hover image.

Edit the style.css of the theme and create a home id.

#idoghome { font-size:14px; float:right;background:url(/idogjs/css/home_48_hover.png) no-repeat right top; height:50px; padding:18px 0 0 55px; }
#idoghome:hover { background:url(/idogjs/css/home_50.png) no-repeat right top; }

Edit single.php and page.php and place the codes to add the hombutton link to where ever on the page you want it to be. I put it after the content and before the link to the pages of the post.

  <?php the_content(__(‘Read more’, ‘piano-black’)); ?><?php edit_post_link(__(‘EDIT’, ‘piano-black’), ‘<li>’, ‘</li>’ ); ?

<a id=”idoghome” title=”back to techs11″ href=”<?php echo home_url(); ?>”></a>
<div><?php wp_link_pages(); ?></div>

The result will look like this


If we’re using WP Mobile Pack plugin and we want to place this button at the end of the post, we need to add to “mobile_pack_base/style_structure.css” and “mobile_pack_base/index.php”

#idoghome { font-size:14px; text-align:center;background:url(img/home_48_hover.png) no-repeat right top; height:50px; padding:25px 0 0 55px; }
#idoghome:hover { background:url(img/home_50.png) no-repeat right top;}

<p style=”text-align:center;”><a id=”idoghome” title=”back to techs11″ href=”<?php echo home_url(); ?>”></a></p>
<?php get_sidebar(); ?>

This is how mobile page looks like


1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.