Themes which offer a plugin for using hooks like Genesis, Thesis and the rest, make it super easy to display content in any hook location your theme offers.
But you might not want to fill your hook fields in the plugin with PHP code because its not that easy to find and manage.
The solution is to add the code for your content to a custom function.
In this tutorial, we’ll take a look at the most basic custom functions you can use in any theme simply by changing to your theme specific hooks.
Basic Custom Function
This custom function will display an image in any hook location simply by changing the hook which in this case is:
This hook executes above the primary widget area in your sidebar.
Lets add an image to the code which displays when all pages load at the top of your main sidebar.
We’ll also add a new class so you can style your image using CSS code.
This code includes:
- a basic custom function: wpsites_banner_function
- A new div which generates a new class for styling: widget-logo
- An image url which you can grab once you’ve uploaded your image to your media library: /images/yourimagefilename.png
- And a hook which is a very cool way to display any type of content in a specific location which your theme offers: genesis_before_sidebar_widget_area
Taking Custom Functions Further
But wait! There is much more cooler things you can do with PHP code to display content like images.
What if we want to display the image above the main sidebar on a specific page only?
Like the home page using this tag:
We add a conditional tag so when the code is processed, it only displays the content based on the tag.
Conditional Tags & Custom Functions
Lets add the above conditional tag, is_home, to the custom function above so the image only displays on the home page in the hook location which in this case is:
This code snippet includes:
- This code includes a basic custom function
- A new div which generates a new class for styling
- An image url which you can grab once you’ve uploaded your image to your media library
- And a hook to display any type of content in a specific location.
- And a conditional tag to display the content (image) only on the home page.
Modifying This Code
You can easily change the theme specific hook and the WordPress conditional tag.
This way the code will work in any theme and display your content in any hook location based on any conditions.
You could use CSS code to achieve the same result but its not as powerful because you don’t get to use hooks and conditional tags.
Hi, thanks for your tutorial. Do you think i can use this hook to avoid the sidebar showing when i access with a mobile device? many thanks for your help
Brad Dalton says
No. You would use Media Queries for that which are located at the end of every style.css file.