[Theme: Buttercream] How can I add a jpg button between the header and body?

If you want to add an element, you’d generally need to modify the header.php file — which should only be done in a Child Theme. That way all your changes won’t be lost upon updating the theme.

If you only want to add space – you may only need to make a change to the CSS.

A link to your page and more specifics would make it easier to help you.

Hey, Thanks for the fast reply.
This is what I wanted to accomplish – https://imgur.com/H2Tu5

A graphic button that links to some page.

Then the Child Theme header.php modification would be the way to go. You’d also need to add some styling code to the CSS file in the child theme. Do you have the code for the button?

No code ?? It’s just going to be a .jpg file, I guess.
I don’t have the experience needed for CSS and coding buttons.

If i could just make that space like shown in the image – i can insert whatever i need there (maybe ill change it in the future) – but right now a linked jpg would be great.

Do you have a child theme set up? Once you do that, put a copy of the header.php file in the child theme and add the image code just below this line.

<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

You’ll have to fill in the relevant info for your site:

<a href="url to page you are linking to" <img src="file path to your image" alt="put alt text here" width="xx" height="xx" class="aligncenter buttonimg" /></a>

It should be right above this line of code:

</hgroup>

The above adds a class to that image so you can style it with CSS if you want:

img.buttonimg {
   styles go here;
}

Having said all that, I’m wondering if what you really want is to add or move the menu to that location on the page?

nop, the menu is good where it is, I just want a button after the header, before the posts – that will lead to a page.
I tried adding that code exactly where you stated – but nothing new appears on the updated website.

I edited header.php, lets presume i wont be updating the theme.

presume i wont be updating the theme.

And when the theme is no longer compatible with WP? Or there is a security issue? That’s not a good way to go.

I know, as soon as i figure out (hopefully with your help), how to set up this button, i will restart and do it in child theme.

I did exactly as you state above, but nothing appears on the webpage, do you have any speculations on why?

Did you put in the appropriate file path for the image and the link? And upload the image?

Make sure you are clearing any caches.

Without seeing your site, no real way for me to guess any further.

Sorry ?? Appreciate the help.
This is the website – https://bit.ly/VlcekA

The file path is correct and the code is filled as instructed.

Oh sorry, I think what I posted above might have been messed up — try this:

<a href="https://badroommate.net/post-item"><img src="https://www.psdgraphics.com/wp-content/uploads/2012/02/blank-button-template.jpg"  class="aligncenter buttonimg" height="25" width="105" alt="Submit your content!" /></a>

Its working now, What did you change from the last ‘messed up’ line?

a couple of other questions –

*do you think there’s a way to put a separator (like under the button) , but above it ?

*This is cosmetic, Is there a way to make the button not appear on the post page? or would i have to get rid of the header in the post php file?

That code was kind of garbled up – dunno why – but the pieces of it were not right :). Code gremlin?!

Try this in your style.css for the separator:

.site-description {
    border-bottom: 1px solid #xxxxxx;
    padding-bottom: 15px;
}

Add the color you want and adjust the px as desired.

You can hide that on a specific page or template using the page id in the CSS – look in the body tag for page specific classes — for example:

body.single-post img.buttonimg {
   display: none;
}

.site-description {
    border-bottom: 0;
    padding-bottom: 0;
}

See if that works – though you may need to change the class used in that example.

The seperator works great.

about leaving that button out of single.php and page.php
they both have
get_header(); ?>

but that’s it, I just want the button not to show up.

Can I make another header.php (lets say header_no_button.php) but without the line we added earlier for the button, and use that in single.php and page.php?

Yep, that should work too. Though you’d need to change the CSS so it doesn’t add that line to both headers… Get it set up and I can look at that part of it if need be. But really, don’t do all this work without the child theme — it’s much, much harder to go back and make one after you’ve made changes :).