Add After Post Widget To Themes Template Files With No Hooks

Creating custom widget areas when using a theme which don’t offer hooks isn’t difficult. You’ll need to add code to your parent themes single.php file which is not best practice.

If you can, copy the single.php template file from your parent theme and place it in a child theme.

In this tutorial, we’ll add an after post widget area on all single posts using the Twenty Thirteen default theme for WordPress.

You can use this tutorial and code snippets to add a new widget to any theme which doesn’t provide hooks.

To do this we need to do 2 things:

  1. Register a widget which displays the custom widget area which you’ll see when you go to Appearance > Widgets from your wordPress dashboard.
  2. Paste the code in your child themes single.php file to display the widgets content after the content on all single posts.

Note: Please don’t use this code if you’re using the Genesis theme framework or another premium theme which uses custom hooks.

Here’s the code and tutorial for creating a widget area after single posts in Genesis child themes which you can modify if your theme uses different hooks.

Register After Post Widget

Paste this code at the end of your child themes functions.php file

Here’s what you’ll see now when you go to your widgets page:

New Widget Area

Output Widget in Single Posts Template

Paste this code in your child themes single.php file where you want to output your widgets content.

Here’s a screen shot of what the single.php file looks like before you copy the code into your Twenty Thirteen child theme.

Before Code Pasted- Click Image To Enlarge

Single Posts Template

After Code Pasted- Click Image To Enlarge

Display Widget Single Post

Styling After Post Widget

Simply add or delete any of these CSS properties to customize the appearance and styling of your widgets content.

Paste the code at the end of your child themes style.css file.

Conclusion

I know there’s different methods you can use to register a new widget and display it in your child themes template. This is one way to add a widget area below all your single posts.

The above method doesn’t use conditional tags, WordPress hooks or any theme specific hooks.

Don’t forget the Twenty Twelve theme is full width unless you add content to the sidebar widget areas. You may need to modify the padding and other values so whatever you place in your new custom widget area looks good.


Comments

2 responses to “Add After Post Widget To Themes Template Files With No Hooks”

  1. AJ Clarke Avatar
    AJ Clarke

    Nice tutorial – easy to follow for devs of any level.

    Also…Candy Social Widget – woot!

  2. Colin Crawford Avatar
    Colin Crawford

    Thanks Brad, I read it and saved it for future use as I thought it would be useful at a later date. I have added a widget area before but I thought it was complicated and your method was so much easier.

    Anyway, I wanted to add a custom sidebar later today to a page and this code came in handy but I needed to add some extra code like before-widget, after-widget, before-title and after-title.

    Cheers

    Colin

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.