Multiple Hero Buttons

[kevin davies]

Bill,

Me again, two questions in one day!

Is it possible to add multiple hero buttons to a top hero section on a per page basis. So for example, add two more buttons horizontally alongside the existing one and centre them all?

Thank,
Kevin

[Bill Robbins]

Hello Kevin,

You could do that with a bit of editing. Here’s what you’ll need to do.

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose hero-options.php and find this spot (starts on line 134)

   
   <div class="hero-button-holder">
   	<a class="button hero" href="<?php echo get_post_meta($post->ID, "hero_button_url", TRUE); ?>"><?php echo get_post_meta($post->ID, "hero_button_text", TRUE); ?></a>
   </div>
   

3. Change that to be like this:

   (Be sure to copy that code from the support site directly and not the notification email).

4. Save your changes.
5. Next go to the page where you’d like to have two buttons and edit it. Look in the top right hand corner for the “Screen Options” tab and click on it. Check the box next to custom fields and then close the screen options.
6. Scroll down below the main content box until you find the custom fields section. This is where we’ll enter the information for the new button.
7. In the spot on the left, the one called “Name” enter this:

   
   hero_button_text_2
   

   and in the spot on the right, called “Value” enter the text you’d like your button to say. Then click the “Add Custom Field Button.”

   To add the URL, enter this in the name:

   
   hero_button_url_2
   

   and then in the “Value” enter the URL you’d like your new button to link to. Then add that custom field.

   Once a new custom filed has been manually added, you’ll be able to select it from the drop-down menu in the future instead of having to type them.

8. Update your page.

That should give you a new button spot for your hero section. If you have any questions or trouble, let me know.

Thanks,
Bill

[kevin davies]

Bill that looks great but I would like to have three buttons and also have them open in a new page if possible….

Sorry for the strange requests! ;o)

Thanks,
kevin

[Bill Robbins]

Ok. That’s possible too. Instead of the snippet above, use this one:

The idea is the same. Just now there is a possibility of a third button using these custom fields: hero_button_url_3 and hero_button_text_3 to fill in the information for the third button. They are all set to open in new tabs/windows too.

Have fun,
Bill

[kevin davies]

ouch it really doesn’t like that, I get a parse error for the site. Any thoughts. I have been able to revert back to two buttons to remove the error but it just didn’t like the change.

Appreciate your patience Bill.

Kevin

[Bill Robbins]

Trying that from my phone wasn’t a good option. Try replacing the whole hero-options.php file with this:

I just gave that a quick test on my laptop and it seems to work. Let me know if you get stuck Kevin.

[kevin davies]

That’s great thanks Bill, the buttons have now appeared yet two of them seem to be merged together? There is a sperator line between buttons one and two but buttons two and three are merged. Also, is it possible to make them all a fixed width with the text centred?

Appreciate your help as always.

kevin

[Bill Robbins]

Kevin,

It’s likely possible to change the spacing around the buttons. Give this a try first and see if it does the trick.

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .hero-button-holder a.button {
   	display: inline-block;
   	margin-left: 5px;
   	margin-right: 5px;
   }
   

3. Update your settings.

That should give each button 5 pixels of margin on both the left and the right. If that doesn’t do the trick let me know and if possible, send over a URL to where you’re using multiple buttons so I can take a closer look for you.

Thanks,
Bill

[Author]

Posts