This tutorial is based on this forum question:
How can i add a call to action like the Executive Pro Theme?
Here’s the Executive Pro themes call to action widget taken directly from the demo site:
And here’s what the code in this post generates:
And here’s the PHP & CSS code:
Code Installation – Beginners Guide
- Copy the PHP code from the view raw link in the Gist labelled functions.php and paste it at the end of your child themes functions.php file using a code editor like Notepad++
- Copy the CSS code from the Gist labelled style.css and paste it at the end of your style.css file before the start of the Media Queries section.
Notes
- Media Queries not included however you can grab these directly from the Executive Pro themes style sheet and change the classes to match what the PHP generates above.
- Tested on the Genesis Sample child theme.
- If your theme includes a front-page.php or home.php file, you hard code the widget into that file and remove the hook. The PHP code which registers the widget needs to stay in your functions file.
- You can change the width of the call to action to full width in some themes ( Tested on Genesis Sample Only ) simply by changing the genesis hook from genesis_before_content_sidebar_wrap to genesis_after_header.
Add Background Image To Widget
You could also add a background image to your widget. Here’s an example:
And here’s the CSS code. Note the path, file name and extension in your child themes images folder must match whats in the CSS:
.call-to-action {
background-image: url('images/bg.png');
}.call-to-action is the CSS class included in the PHP code which generates the widget as you can see in the Gist above.
Leave a Reply
You must be logged in to post a comment.