How To Add A Button Anywhere In Your Theme

This tutorial shows you how to display a button in any theme.

Here’s the question this post answers from the forums:

How do I create a custom text button and place it under the Home Top #1 area in the Enterprise child theme? I imagine that a text button should not be a difficult code… but I’m not a programmer, however, can cut’n paste. I need to display this button float right.

There’s at least 3 ways to do this:

1. Hard code it directly into the front-page.php file
2. Hook it in from functions.php
3. Add it to a text widget after your Home Top widget

1. Hard Code Button In Template File

For Genesis users, simply add this code directly into the file in the position you want it to display:

For non Genesis users, change the hook in the above code or use this code below directly in your file.

2. Hook Button From functions.php

Simply copy this PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file using a code editor.

How To Modify The Code

• The code includes a conditional tag so it only displays on the front page which you can change is_front_page()
• The code includes the genesis_before_loop hook which you can change to any WordPress or theme specific hook.
• The code includes the button class so it uses the CSS in your style.css file. You can also change this class and add your own button CSS to your child themes style.css file.

3. Add Button HTML to Text Widget

If your theme already includes widgets or you want to add a widget, you can then add the button HTML wrapped in a custom class, directly to a text widget.

This method will display your button within the div of the widget you add it to.

Sample CSS

Simply paste this CSS at the end of your child themes style.css file and modify to your own styling preferences.

.custom-button {
    float: right;
    padding: 20px;
}

Related Tutorials

• CSS Button Generators
• 2 Ways To Add Icons To Buttons In Your Theme