{"id":2252,"date":"2012-08-19T10:30:57","date_gmt":"2012-08-19T17:30:57","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=2252"},"modified":"2012-08-19T10:30:57","modified_gmt":"2012-08-19T17:30:57","slug":"create-a-home-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/create-a-home-button-in-wordpress.html","title":{"rendered":"Create A Home Button In WordPress"},"content":{"rendered":"

I think it’s a good <\/em>practice to have a home link button at the end of every page for readers to get back to the main page.<\/em><\/p>\n

<\/em>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 Paint.net to change color and save for hover image.
\n<\/em><\/p>\n

<\/em>Edit the style.css of the theme and create a home id.<\/em><\/p>\n

\n

#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; }
\n#idoghome:hover { background:url(\/idogjs\/css\/home_50.png) no-repeat right top; }<\/p>\n<\/blockquote>\n

<\/em>\"\"<\/a><\/p>\n

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.
\n<\/em><\/p>\n

\n

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

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

\"\"<\/a><\/p>\n

The result will look like this<\/em><\/p>\n

\"\"<\/a><\/p>\n

USING MOBIL PLUGIN WEBSITE<\/em><\/strong><\/p>\n

<\/em><\/strong>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”<\/em><\/p>\n

\n

#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; }
\n#idoghome:hover { background:url(img\/home_50.png) no-repeat right top;}<\/p>\n<\/blockquote>\n

<\/em>\"\"<\/a><\/p>\n

\n

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

\"\"<\/a><\/p>\n

This is how mobile page looks like<\/em><\/p>\n

<\/em>\"\"<\/a><\/p>\n

Cheers,<\/em><\/p>\n