Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts

    Use CSS to display image on only one page

    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:

    Code:
    <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
    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    <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() - I find this preferable to is_home() since it is more generic.

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

    Code:
    .science_diet{display:none}
    body.home .science_diet{display:block}
    Last edited by SB65; 06-19-2012 at 05:31 PM.

  • Users who have thanked SB65 for this post:

    johndove523 (06-19-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    SB,

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

    Code:
    <?php if(is_page_56()){?>
    <whatever> 
    </div>
    <?php } ?>
    Thanks again.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Almost:

    Code:
    <?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 ) - if you Google what you're looking for you'll find a stack of other stuff as well.

  • Users who have thanked SB65 for this post:

    johndove523 (06-19-2012)

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    Thanks SB for your outstanding help today!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •