Continue reading, or jump ahead using these links:<\/p>\n
- \n
- Setting up the Child Theme<\/a><\/li>\n
- Registering the Widget Areas<\/a><\/li>\n<\/ul>\n
Setting up the Child Theme<\/h2>\n
I’m going to be using a child of the twenty seventeen theme: if you’re working with your own theme you can edit that directly instead of creating a child theme. But if you’re using a third party theme, you must create a child theme. This is because when you update the theme, any changes you make to it will be lost.<\/p>\n
So, in your wp-content\/themes<\/em> folder, create a new folder with the name of your theme. I’m calling mine wpmu-template-widgets<\/em>. Within that, add a style.css<\/em> file and add this to it:<\/p>\n
\u00a0<\/b>
Loading gist 4cd6c3f9786c5acfa0c2c411f46c19d7<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
Remember, if you’re working with your own theme you can skip this step. And if you’re using a different parent theme, you’ll have to edit the stylesheet to reflect that. If you’re not sure, check out our post on creating child themes<\/a>.<\/p>\n
Registering the Widget Areas<\/h2>\n
Before we can add the widget areas to our template files, we need to register them in the theme’s functions file. Open your functions file if your theme already has one, or if it’s a new child theme, create a file called functions.php<\/em>.<\/p>\n
Let’s start by adding the empty function to register the widgets, and hooking it to the
widgets_init<\/code> hook. Add this to your functions file:<\/p>\n\u00a0<\/b>
Loading gist 98316cf5c79d638375f337b9dede497b<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
Within that function, we’re going to register four widget areas: one each of the single post and category archive templates, and two for the custom page template.<\/p>\n
Start by registering the first widget:<\/p>\n
\u00a0<\/b>
Loading gist 06d367e3a5ac0de27c8a0077b2f09b24<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
This uses the
register_sidebar()<\/code><\/a> function, with an array of parameters as follows:<\/p>\n- \n
- The name of the widget area, which will appear in the Widgets admin screen and the Customizer. I’ve made this translatable.<\/li>\n
- A unique ID for the widget area.<\/li>\n
- Markup for before the widget, which uses placeholders for internationalization.<\/li>\n
- Markup for after the widget.<\/li>\n
- Markup for before and after the widget title, which is enclosed in a
h3<\/code> element.<\/li>\n<\/ul>\nSo that’s the first one. Now, still inside your function, add the other three:<\/p>\n
Loading gist 49447b9b17d9ea9cb6983fab767a2819<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
So we now have four widgets:<\/p>\n
- \n
- One after the content on single posts.<\/li>\n
- One before the content on a category archive.<\/li>\n
- One before and one after the content on our widgetized page template.<\/li>\n<\/ul>\n
If you want to move your widget areas (e.g. putting the category archive one after the content or the single post one before the content), you should rename them appropriately. This is so that you know what’s going on when you come to edit your code in future, and your users know where the widget areas will be output when they add widgets to them via the Widgets admin screen. Remember that if you do alter this, you’ll need to place the code to output the widgets in the correct place in your template files in the next step, which might be different from where I’m putting mine.<\/p>\n
Now if you open your Widgets admin page, you’ll see your widget areas, ready for widgets:<\/p>\n
\n![\"Newly](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/widgets-in-admin.png\")
Newly registered widget areas in the Widgets admin screen.<\/figcaption><\/figure>\n<\/div>\n But if you add widgets to your new widget areas, they won’t show up in your site’s front end. They still need to be coded into the template files.<\/p>\n
Adding Your Widget Areas to Template Files<\/h3>\n
Now we add the code to output the widget areas. If you’re working with your own theme you may just need to edit your existing theme template files. If you’re working with a child theme (or your theme doesn’t already have the relevant template files), you’ll need to create new files.<\/p>\n
Let’s start with the widgetized page template file, as your theme won’t have that either way.<\/p>\n
In your theme folder, create a new file. I’m calling mine page_widgetized.php<\/em>. Open that file and add this to it:<\/p>\n
Loading gist 816979b910a010a367dc5f280ab3eb0d<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
This tells WordPress that it’s a custom page template. If you want to know more about them, check out our detailed guide<\/a>.<\/p>\n
Note: Don’t use <\/em>page-widgetized as your filename. This is because <\/em>page- is a reserved suffix in WordPress<\/em><\/a>. Use an underscore instead of a dash, or just avoid using <\/em>page at the beginning altogether if you prefer.<\/em><\/p>\n
Now below that commented out text, copy everything from your theme’s (or the parent theme’s)\u00a0page.php<\/em> file. An alternative is to make a copy of the file and add the commented out text, it’s up to you.<\/p>\n
You’ll now be able to select this template when editing a page in your site:<\/p>\n
\n![\"page](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/page-template-selector.png\")
The page template selector on the WordPress page editing screen.<\/figcaption><\/figure>\n<\/div>\n Select it for one of your pages so you can try out the widgets. Here’s my page:<\/p>\n
\n![\"page](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/widgetized-page-with-no-widgets-addded.png\")
Page with no widgets displaying yet.<\/figcaption><\/figure>\n<\/div>\n It doesn’t look very exciting right now as I haven’t added the widget areas to the template file. Let’s do that.<\/p>\n
In your template file, add this code immediately above the page content, for the above-content widget area:<\/p>\n
Loading gist 99ceb8bb46e5ab0f2a770358b23656db<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
This checks if the widget area has been populated, using the unique ID that you created for the widget area when you registered it in your functions file. If it has been populated, it outputs the contents of the widget area.<\/p>\n
Now add the widget area below the content. After your content (and inside any enclosing element), add this:<\/p>\n
Loading gist 1164fca30d8c4274bcb88e56229af995<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
Save your page template file.<\/p>\n
Here’s the full code of my page template file, so you can see where the widget areas before and after the loop:<\/p>\n
Loading gist 6745d7914124048fa0065cf65845c63d<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
Now to test it out. I’ve added a widget to each of the new widget areas:<\/p>\n
\n![\"Widgets](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/widgets-added-in-admin.png\")
The widgets admin screens with a widget added to two new widget areas.<\/figcaption><\/figure>\n<\/div>\n And here’s how they look on my page:<\/p>\n
\n![\"A](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/widgetized-page-template-front-end.png\")
A page with widgets before and after the content.<\/figcaption><\/figure>\n<\/div>\n So that’s the custom page template set up. Now you need to edit the other two page template files (or create them if necessary). Follow these steps:<\/p>\n
- \n
- If you’re working with a child theme, create a file called category.php<\/em>. Copy the contents of the category.php<\/em> file from your parent theme (if it has one) or the archive.php<\/em> file (or index.php<\/em> if it doesn’t have that).<\/li>\n
- If you’re not working with a child theme, but your theme doesn’t have a\u00a0category.php<\/em> file, make one by copying the archive.php<\/em> file (or if you don’t have one of those, the index.php<\/em> file).<\/li>\n
- Add the widget area above the content in your category archive file – again, immediately before the loop.<\/li>\n<\/ul>\n
Here’s the code for the widget area:<\/p>\n
Loading gist aba83b8ea27b8496f329d2ed22aca0fe<\/a>Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n
Now repeat this for the single template:<\/p>\n
- \n
- Create a single-post.php<\/em> file if your theme doesn’t have one (or you’re using a child theme). Copy the contents from your parent theme’s single-post.php<\/em> file into it, or from the next template file up in the template hierarchy<\/a> (single.php<\/em>,\u00a0singular.php<\/em> or index.php<\/em>).<\/li>\n
- Again, add the widget area – this time after the content.<\/li>\n<\/ul>\n
Here’s the code:<\/p>\n
- Again, add the widget area – this time after the content.<\/li>\n<\/ul>\n
- If you’re not working with a child theme, but your theme doesn’t have a\u00a0category.php<\/em> file, make one by copying the archive.php<\/em> file (or if you don’t have one of those, the index.php<\/em> file).<\/li>\n
- If you’re working with a child theme, create a file called category.php<\/em>. Copy the contents of the category.php<\/em> file from your parent theme (if it has one) or the archive.php<\/em> file (or index.php<\/em> if it doesn’t have that).<\/li>\n
- Registering the Widget Areas<\/a><\/li>\n<\/ul>\n
![\"widget](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/single-after-content-widget-area.png\")
<\/div>\n