WordPress.org

Ready to get started?Download WordPress

Forums

adding a bander UNDER header. (13 posts)

  1. jroli
    Member
    Posted 1 year ago #

    hey guys, tried searching around and not seeing what im looking for. here's what im trying to do:

    I want to add a banner under my header and navigation menu. I am using WP theme "Pyramid". Here's kind of a good idea of an end result im looking for: http://thegospelcoalition.org/blogs/justintaylor/

    he has a banner for his blog, but under the normal header and nav menu. Is this an extension of the header in the header.php file, or is there a widget i can use to do this?

    here's my site currently: http://www.ecclecollective.com

    Thanks for any help

  2. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi jroli,

    Simply add an image in the header.php, after the navigation / menu yet right before `</header>

    Alternatively add
    `<!-- add variable banner -->
    <img src='<?php echo get_post_meta($post->ID, 'banner', true); ?>' />
    <!-- end variable banner -->

    This will add a variable image.
    You can set the image in the editing page by entering:

    field name: banner
    value: path to the image

    NOTE!!
    ALWAYS Make a backup of your site, before making any changes!!

    1. Use FTP to backup the files.
    2. Make sure to also backup your database.
    3. http://codex.wordpress.org/Backing_Up_Your_Database

      Use a childtheme to make the changes in
      Suggestion: use the 'one click childtheme plugin'.

  3. jroli
    Member
    Posted 1 year ago #

    Thanks for the info. Do you think you can break it down a little more for me? I'm a self-learner, so I need some things spelled out sometimes. I was able to add an image in the header.php file, and it showed up on the site, but it was on every page. Im using WP's multisite, and currently running two blogs. I want each to have their own banner.

    secondly, the location of the image i got to show up was actually a part of the header, and not under it, namely, under the dividing line that separates the header from the rest of the page. I saw the divider in the style.css file, assuming something goes there in order to place the image at the right spot?

    I'm also assuming there is some sort of design layout or table that frames the page (i.e. the header, sidebar, posts, footer). I only really want the banner centered over the posts, not necessarily centered over the entire width of the page. that might be more complicated. but you know what they say about assuming...

    thanks for your help again!

  4. jroli
    Member
    Posted 1 year ago #

    here's a quick mock-up of what im looking for.

    http://s14.postimage.org/zbnjve935/beforehecansee_banner_mock_up.jpg

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    @jroli sounds like you need the support of a professional. Have you considered posting at WordPress' jobs listing?

  6. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi jroli,

    The new info, changes things a bit.

    Change the file page.php as follows:

    <?php get_header(); ?>
    <!-- add variable banner -->
    <img src='<?php echo get_post_meta($post->ID, 'banner', true); ?>' />
    <!-- end variable banner -->
    	<?php 	get_template_part('loop', 'page'); ?>
    <?php get_footer(); ?>

    Save and upload.

    == == ==
    In the edit page:
    This will add a variable image.
    You can set the image in the editing page by entering:

    field name: banner
    value: path to the image

  7. jroli
    Member
    Posted 1 year ago #

    In the edit page:
    This will add a variable image.
    You can set the image in the editing page by entering:

    field name: banner
    value: path to the image

    I changed the page.php file as noted, & i uploaded the banner to my theme directory (images/testbanner.png). Now I'm not sure what you mean by "edit page". Do you mean the style.css file? If so, do I put the field name and path under the #header section? Each blog has its own CSS stylesheet editor, which will take precedence over the theme's stylesheets. This seems like the place to put code if I want to have a different banner for each blog, right? If that's the case, what exactly is the code? it says "banner" is an "unknown property", but my CSS is probably off.

    Thanks for your patience. I think we're close!

  8. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi,
    Edit any page / post:
    Dashboard > pages > e.g. mypage
    You'll see the edit page-screen
    == ==
    At the right-top of the screen click the TAB 'screenoptions'
    Tick the 'custom fields' -box
    == ==
    Scroll down the edit page to the 'custom fields' -box
    add:
    name: banner
    value: path to image
    NOTE!!
    Save / update both 1: the field AND 2: the post!

    If you cannot see the image you've entered in the field, the path is incorrect. Try again. the syntax is important.

  9. jroli
    Member
    Posted 1 year ago #

    Thanks, looks like everything is almost done. I managed to play around with positioning of the code in the page.php to set the image inside the content field, which still allows the sidebar to remain fixed and spaces everything nicely. The only problem is that I only have one page that I've created, and that's the "about" page. Where can I add a custom field to the home page, i.e. the first main page of the blog. I looked around in index.php, but if i put an image there, it shows up on every page, not just the blog I want. I have one site (ecclecollective.com), with two blogs (/beforehecansee and /whoislikegod). Whatever is done to the index.php affects all of it. I just need a banner on the first page of each blog, and on each additional page (which is only the "about" page, and I've got that to work).

    Secondly, even when I add a custom field to a post (not a page), the banner isn't showing up. I need the banner to be present everywhere on every page of the same blog, whether its /beforehecansee, /beforehecansee/about, or /beforehecansee/2013/03/01/in-the-in-between.

    I know if I had all three sites with their own directory, this wouldnt be an issue because I can just put the image in the index.php file and be done with it, but since this is WordPress's multisite, which shares one directory, I have to be a little more cunning to be able to have three different sites display three different things.

    Thanks again for your help. I'm learning a lot and appreciate your time.

  10. W.P. Ginfo
    Member
    Posted 1 year ago #

    You need to set the desired image for each page / post separately = total control.

    To add the variable banner to posts, add the code to single.php / post.php depending on the theme.

  11. jroli
    Member
    Posted 1 year ago #

    Added the code to single.php. That fixed the issue with the individual posts page, but I still cant locate how to add the custom field "banner" to the page that lists my most recent posts. The only page I have is the about page, and the pages for the primary site dont include the first page of this blog. Basically, that page doesn't exist as an actual page i've created. It's like the default page of the blog if it didn't have any other pages. Where do I edit that that page?

    Once I can figure this out, I'm pretty sure everything I wanted to do will be set! So close!

    Thanks again.

  12. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi jroli,

    Let me think about that. I'll get back to you.

  13. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi jroli,

    I'm sorry. I've tried to figure it out, but I cannot.

    All I came up with is putting the same image on all pages, or the solution you've implemented already.

    To put the same image on all pages including the homepage:

    Add the folowing code to the bottom of the header.php, below the start of the maincontent:

    <img src="images/example.png" style="display:block;float:left;" />

Topic Closed

This topic has been closed to new replies.

About this Topic