{"id":1631,"date":"2019-07-13T17:15:52","date_gmt":"2019-07-13T09:15:52","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1631"},"modified":"2020-05-12T11:00:36","modified_gmt":"2020-05-12T03:00:36","slug":"how-to-allow-arbitrary-widget-content-to-be-added-to-sections-of-your-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-allow-arbitrary-widget-content-to-be-added-to-sections-of-your-wordpress-theme\/","title":{"rendered":"How to allow arbitrary Widget content to be added to sections of your WordPress theme"},"content":{"rendered":"

When you use WordPress<\/a> to house your thoughts, you get the flexibility to update sections of your WordPress site through the WordPress dashboard<\/a>.<\/p>\n

For example, I can change the content within the sticky portion of my sidebar<\/a> as and when I need to. Such content can be provided through the various WordPress Widgets<\/a> that are available in my WordPress installation.<\/p>\n

So how can we mark sections of our WordPress themes<\/a> for displaying Widget content?<\/p>\n

With this in mind, let us look at how we can allow arbitrary Widget content to be added to sections of our WordPress theme via the WordPress dashboard.<\/p>\n

Creating sections for Widget content to appear in<\/h2>\n

For the purpose of this article, let's assume that we want to create a section in the sidebar that will stick till the browser reaches footer<\/a>. In addition to that, we also want to have the flexibility to add arbitrary content before that sticky portion.<\/p>\n

Given these points, we can include the following codes in our theme's functions.php<\/code><\/strong><\/a>:<\/p>\n

\r\nfunction my_widgets_init() {\r\n  register_sidebar( array(\r\n\t\t'name'          => 'Before sticky sidebar content',\r\n\t\t'id'            => 'before_sticky_sidebar_content',\r\n\t\t'before_widget' => '<section>',\r\n\t\t'after_widget'  => '<\/section>',\r\n\t\t'before_title'  => '<h3>',\r\n\t\t'after_title'   => '<\/h3>',\r\n\t) );\r\n  register_sidebar( array(\r\n\t\t'name'          => 'Sticky sidebar content',\r\n\t\t'id'            => 'sticky_sidebar_content',\r\n\t\t'before_widget' => '<section>',\r\n\t\t'after_widget'  => '<\/section>',\r\n\t\t'before_title'  => '<h3>',\r\n\t\t'after_title'   => '<\/h3>',\r\n\t) );\r\n\r\n}\r\nadd_action( 'widgets_init', 'my_widgets_init' );\r\n<\/pre>\n
So what is the above code trying to achieve?<\/p>\n
First, we define a function that will call the register_sidebar<\/code><\/a> function to mark sections for Widget content to appear in. For each function call, we pass in an associative array<\/a> that define the configurations for marking the section for Widgets and displaying of Widgets within that section.<\/p>\n
After we had defined the function, we call add_action<\/code><\/a> to hook my_widgets_init<\/code> function to the widgets_init<\/code><\/a> event.<\/p>\n
Once WordPress had taken the changes that we had made to our functions.php<\/code><\/strong> file, we should see our Before sticky sidebar content<\/strong> and Sticky sidebar content<\/strong> in Appearance -> Widgets<\/strong> of our WordPress dashboard:<\/p>\n
\"WordPress<\/p>\n
Displaying the Widgets added to the marked sections<\/h2>\n
Once you had indicated to WordPress the sections that you allow for arbitrary content to be added, you decide where to display them.<\/p>\n
In order to display the arbitrary content that was added to the sections that we had marked earlier, we can write codes similar to the following:<\/p>\n
\r\n<?php\r\n  if (is_active_sidebar('before_sticky_sidebar_content')) {\r\n?>\r\n  <section id="before-sticky-sidebar">\r\n<?php\r\n\t\tdynamic_sidebar('before_sticky_sidebar_content');\r\n?>\r\n  <\/section>\r\n<?php\r\n  } \/\/ end if (is_active_sidebar('before_sticky_sidebar_content'))\r\n  if (is_active_sidebar('sticky_sidebar_content')) {\r\n?>\r\n  <section id="sticky-sidebar">\r\n<?php\r\n\t\tdynamic_sidebar('sticky_sidebar_content');\r\n?>\r\n  <\/section>\r\n<?php\r\n  } \/\/ end if (is_active_sidebar('sticky_sidebar_content'))\r\n?>\r\n<\/pre>\n
In this case, we use the is_active_sidebar<\/code><\/a> function to check if there are any Widgets added to the section that we had marked. When there are Widgets added via the WordPress dashboard, we use the dynamic_sidebar<\/code><\/a> to display them. <\/p>\n
As an input to both functions, we use the id<\/code><\/strong> value that was supplied to the register_sidebar<\/code> function to identify the different sections for arbitrary content to appear. <\/p>\n
Adding Widgets to the sidebars<\/h2>\n
Once you had the coding in place, you can then add Widgets to your sidebars. <\/p>\n
In order to do so, go to the Widgets<\/strong> page of your WordPress dashboard. Once you are in the Widgets<\/strong> page, simply drag any Widget from the Available Widgets<\/strong> section to the sidebars that you had created. <\/p>\n
So how will the Widget be displayed?<\/p>\n
The content of the Widgets will be displayed in order from top to bottom. For example, in the following configuration, the Ad Inserter<\/strong> widget will be displayed before the two Custom HTML<\/strong> widgets:<\/p>\n
\"Example<\/p>\n
Reordering Widgets within a sidebar<\/h2>\n
Whenever you feel like reordering the Widgets within a sidebar, simply drag a Widget to the top or bottom of another Widget.<\/p>\n
Adding advertising HTML \/ JavaScript codes inside your sidebar<\/h2>\n
When I want to try out different ways for programmers\u2019 websites to earn money<\/a>, I can use the Custom HTML widget<\/a> to display some HTML \/ JavaScript codes in the sticky portion of my sidebar.<\/p>\n
In order to do so, I drag an instance of Custom HTML Widget to a sidebar and paste the HTML \/ JavaScript codes for displaying an advertisement.<\/p>\n
\"Google<\/p>\n
Since I do not want to give a title to the Widget, I left it as blank. When I am satisfied with the content, I click on Save<\/strong> to make the advertisement unit appear in my sidebar.<\/p>\n
Removing Widgets from a sidebar<\/h2>\n
When you want to remove a Widget from a sidebar, simply drag the Widget out of the sidebar. Another way to do so is to click into the Widget that you wish to remove and click on Delete<\/strong>.<\/p>\n\n