...

View Full Version : Use CSS to display image on only one page



johndove523
06-19-2012, 03:54 PM
Please see URL: http://caspca.org/wordpress/

At the bottom of the sidebar, there is a Science Diet logo (which I do not want wrapped in a widget). Right now, it's coded in the sidebar.php file like so:


<aside class="fourcol last">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Widgets') ) : ?><?php endif; ?>

<div class="science_diet"><img src="http://caspca.org/wordpress/wp-content/uploads/2012/04/ScienceDietLogo.jpg">
</div>

</aside><!--/sidebar-->

Of course, this displays site-wide, and I only want it to display on the home page. How can I style this to display on the homepage only using whatever part of
<body class="home page page-id-137 page-template page-template-template_home-php logged-in admin-bar customize-support" I need to use? (or a simpler/better way if you know of one).

Thank you,

John

SB65
06-19-2012, 04:28 PM
You could hide it with css, but it would be nicer to include it only on the home page, which you could do by editing your sidebar.php to:


<aside class="fourcol last">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Widgets') ) : ?><?php endif; ?>

<?php if(is_front_page()){?>
<div class="science_diet"><img src="http://caspca.org/wordpress/wp-content/uploads/2012/04/ScienceDietLogo.jpg">
</div>
<?php } ?>

</aside><!--/sidebar-->

This uses the WP conditional is_front_page() (http://codex.wordpress.org/Conditional_Tags) - I find this preferable to is_home() since it is more generic.

Just for reference, to hide it with css you'd need:


.science_diet{display:none}
body.home .science_diet{display:block}

johndove523
06-19-2012, 04:41 PM
SB65,

Thank you! Great solution! And thanks for the css option as well. Being a WP novice, any suggestions for good resources (perhaps better than Codex) to learn WP syntax such as that you provided? That's my main stumbling block in the early going. Taking a .php course, but WP has its own proprietary way of incorporating it.

Thanks again!

johndove523
06-19-2012, 05:05 PM
SB,

If I need to do this (same thing) on other select pages, would I use the page ID, e.g.,


<?php if(is_page_56()){?>
<whatever>
</div>
<?php } ?>

Thanks again.

SB65
06-19-2012, 07:04 PM
Almost:


<?php if(is_front_page() || is_page(56) ){?>
<whatever>
</div>
<?php } ?>

would be 'front page' or page 56.

The WP Codex is pretty good (although I spent over an hour this morning due to its lack of completeness/clarity on one function :rolleyes:) - if you Google what you're looking for you'll find a stack of other stuff as well.

johndove523
06-19-2012, 07:20 PM
Thanks SB for your outstanding help today!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum