WordPress.org

1. BangingMyHead
   Member
   Posted 1 year ago #
   

   I've searched every post I could find, but still haven't found a definitive answer on how to have one image (around 600 px height) on the front page and all the others default to a standard header image.

   My goal is to have a static front page image that links to the blog page when clicked. I am working in Twentyeleven, and a child theme. I know how to create the static front page. What I don't know is how to call the header images and if I have to define the different heights somewhere. I have tried an if/else, and I have tried creating header-home.php but I'm not sure how to doing either correctly.

   Can someone provide guidance please?

2. Pierrick
   Member
   Posted 1 year ago #
   

   Hey,

   You need to use conditional tags, more here

   http://codex.wordpress.org/Conditional_Tags

   P

3. BangingMyHead
   Member
   Posted 1 year ago #
   

   Thanks, but at my level (first time trying to do this stuff), that comment isn't much help :( I've read the info on conditional tags, but I don't know HOW to create the appropriate statements. I've tried to wrap my head around how to do this, but I've likely bungled it!
   In my header.php I added:

   <?php
   if ( is_front_page() ) :
   get_header('home');
   else :
   get_header();
   ?>

   I copied my header.php, renamed it header-home.php then changed:

   <h1 id="site-title"><span>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="frontpage" src="<?php echo get_stylesheet_directory_uri(); ?>/images/frontpage.jpg" alt="" /><?php bloginfo( 'name' ); ?></span></h1>

   My changes bombed. The header.php changes gave me
   Parse error: syntax error, unexpected $end pointing to the last line of code. And the header-home.php code tested in my header.php didn't do anything.

   If someone could provide a sample of appropriate code, I would really appreciate it.

4. munny1
   Member
   Posted 1 year ago #
   

   If I am reading your question right, you are saying that you got one image on your static page that links to your blog page able to work. However, you want to put some other images as headers. If so, then upload the header images you want to Appearance>Header. Could you drop by a link to your site. That would help out.

5. BangingMyHead
   Member
   Posted 1 year ago #
   

   Not quite. I currently have a static front page and have just a text widget in the middle footer that says "Enter Site" until I can get things squared away.

   Right now all pages have the same custom header. I would like to have only the front page display a different header with an image that is 1000 px x 600 px. I would also like to either have the whole thing be a clickable link to the blog. Of if that isn't recommended, I will float an clickable image on top.

   You can see my work in progress at nekoburrito.com/chris (I still have a lot of little things I am working to fix).

   Thanks!

6. munny1
   Member
   Posted 1 year ago #
   

   Right now all pages have the same custom header. I would like to have only the front page display a different header with an image that is 1000 px x 600 px

   For this question, I would suggest installing this plugin on your site. It works really well and allows you to do just what you asked, and more:
   http://wordpress.org/extend/plugins/dynamic-headers/

   I would also like to either have the whole thing be a clickable link to the blog. Of if that isn't recommended, I will float an clickable image on top.

   I do not think that you should do this. I suggest having a static home page and having a static page for your posts called "Blog". This way, you have a nice static home page and a navigation link with your posts called "Blog".

7. BangingMyHead
   Member
   Posted 1 year ago #
   

   Thanks for the info. It looked like the perfect solution, but unfortunately the plugin doesn't seem to work for me. I followed all directions on creating the directory, uploading images, selecting the image, and adding the code to the header.php. The image I am actually seeing is still the default image (even after refresh and clearing cache). The strange thing is that in Firefox, if I hover over the tab, it shows as referencing the image I selected with dynamic headers. However if I do inspect element, it shows me the path to the default image. Internet explorer get source says it is the image I am trying to get, but it still shows the wrong one.

   Anyone have any coding suggestions, not tied to a plug in?

8. BangingMyHead
   Member
   Posted 1 year ago #
   

   Oh, and I deactivated all other plugins to make sure there wasn't a conflict.

9. munny1
   Member
   Posted 1 year ago #
   

   I will see what I can come up with. I might be able to find a better plugin but as per your request:

   Anyone have any coding suggestions, not tied to a plug in?

   I will see if I can come up with some code. However, I believe that there are lot of great plugins to solve this. I will get right back to you as soon as I find something.

10. munny1
    Member
    Posted 1 year ago #
    

    Okay, I have a solution for the header. Create a new post. Add a custom field to it. Name the field (without quotes) "banner". Upload your header and use the link for the custom field value. Put this code on your header page, where the header code would normally be placed (MAKE SURE YOU BACK UP YOUR CODE):
    

    <div class="banner">
    <?php if(get_post_meta($post->ID, 'banner', true)) : ?>
    <img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
    <?php else : ?>
    <?php the_title(); ?>
    <?php endif; ?>
    <div>

    And, save! Any luck?

11. BangingMyHead
    Member
    Posted 1 year ago #
    

    Very limited success...
    The splash image did show up on the home page, but with the following problems:
    --You saw the big image (no nav or anything) then offset to the right and below it you had the blog page (including appropriate header and nav).
    --The blog page had an empty test post at the top -- the one I used to implement your technique.
    --I input a new post and it bumped the splash image off the front page and I am back to the standard logo.
    --I tried changing between static front page and blog front page but neither method had any effect after I added the new post.

    I'm assuming part of the problem is because this was tied to a post, rather than a method of changing the header for just the front page.

    Thanks for the effort, though.

    I think I could manage to fix this if I understood where in the header.php it calls the image. I'm guessing the h1 or h2 statements in the head section, but I don't see anything like an img src statement that I would know how to change. I haven't yet found any relevant tutorials or posts that explain this. Everything related to new header images tells you to create new header phps but they don't tell you WHAT to change or add in the new php template that differs from the old one, and implements the call for a different image.

    Can anyone explain this?

    Thanks

12. munny1
    Member
    Posted 1 year ago #
    

    Where it calls the image depends on your theme. Just look for the text "header image" to find it. However, the header image call will not help you in what you are trying to solve. Have you considered going to Appearance>Header and uploading more than one header. There is an option there to post a random header. That might work. It will post a random one of your uploaded headers on each page, which will change each reload.

13. munny1
    Member
    Posted 1 year ago #
    

    You may have to change the colors to suit your needs:
    In header.php, replace:
    <body>
    with
    <body <?php if (function_exists('body_class')) body_class(); ?>>
    Change your CSS to this:
    

    #header {
    	background-color:#73a0c5;
    	background-image:url(images/header.jpg;
    	background_repeat:no-repeat;
    	background-position:left top;
    }

    Add a line of CSS right below it:
    body.page-id-{page_id} #header url{background-image:url(images/header2.jpg;}
    Replace the words, "page_id" inside the {} in the last CSS to the page ID of your splash page. FInd your ID by going to your website and visiting the page. Make sure default permalinks is. The id will be in the URL as something like this: post=xxx. Just put in the page id (example):
    body.page-id-{123} #header url{background-image:url(images/header2.jpg;}
    Then change the background image URL in both header CSS's to be what you want. The first CSS will be the header for the rest of your pages. The second CSS will be the header for your Splash page, once the id is there.

14. BangingMyHead
    Member
    Posted 1 year ago #
    

    I figured out a simple work around solution! I created my wp blog one level down on my site, then put my splash image in my index.html for my top level. It is clickable and links to my blog. Since my only issue was making my front entry have a large splash image that essentially took up the whole page and was different from the header used on the blog, I think this will provide a functional solution.

    Thanks for all your help. I appreciate it!

15. munny1
    Member
    Posted 1 year ago #
    

    Glad you figured it out!

Topic Closed

This topic has been closed to new replies.