Adding a button to header

Hi there,

You could do this using hooks, the Page Header add-on or the Sections add-on.

You would first add the HTML for the button:

<a class="custom-button" href="https://generatepress.com">GeneratePress</a>

Then you would have to style that button:

.custom-button,
.custom-button:visited {
      display: inline-block;
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

Adjust as needed :)

Awesome, Tom! And I even understand it...guess I'm learning :-)

Awesome! :)

How can I get the button centered on the whole header, no just the text area?

like on http://voyagesolarenergy.com

the button is centered under the text.

I want it centered under all of of the text + logo

(currently placed in after-header content hook)

Since the elements are set to display: inline-block, they'll do their best to fill in the spaces.

If you want it to clear below those two elements, you need to add a clear element above the button:

<div class="clear"></div>
button HTML here

Perfect :)

DIdn't know that code existed!

Glad I could help :)