sidebar wordpress. WordPress sidebars, WordPress sidebar creation. Default WordPress Widgets
Displays the first active widget panel (a sidebar is a panel that contains at least one widget). You can specify the ID or number of the panel, which one to display, if the site has more than one widget panel.
dynamic_sidebar() returns true or false, with the return result also displaying the widget bar. The return value can be used, for example, to determine whether code that replaces widgets should be processed when there are no widgets in the panel (see example #1).
returns
true if the widget panel was found. false if the panel does not exist or contains no widgets.
Usage
$index (string/number) The panel ID specified in the id parameter of the register_sidebar() function when the panel was registered. If a number is given, then the panel with ID sidebar-$index will be searched.Default: 1 (sidebar-1)
Examples
#1 Display the sidebar if it exists.
This example shows how to display the first non-empty sidebar (the sidebar id was not specified during registration) or if it is not found, process the specified code:
#2 Display the desired sidebar.
#3 Check for the presence of the panel and display it
In example 2, we did not check for the presence of a panel and widgets in it. In this example, we will check for the presence of a panel so as not to display unnecessary HTML tags (
- ) if the sidebar is empty:
- Global. Array. $wp_registered_sidebars Registered sidebars.
- Global. Array. $wp_registered_widgets
- Dynamic sidebar: a container for a set of widgets that the user can install through the admin panel -> Widgets section.
- Sidebar template: This is the sidebar that is displayed by the site template.
Multiple sidebars
When registering more than one widget panel with register_sidebar() , it is more convenient to specify an id for each panel.
We can not specify id, then the panel will receive a serial number. But in this case, when editing the theme, it will be difficult to understand which panel is which, because the numbers 1, 2, 3 do not mean anything. But if you set the name, it becomes much clearer:
// --- numbers// registration register_sidebar(); // output dynamic_sidebar(1); // --- Strings// registration register_sidebar(array("id" => "top_menu")); // output dynamic_sidebar("top_menu");
From the example, it is clear that it is more convenient with strings: looking into the topic and seeing dynamic_sidebar("top_menu"), it is immediately clear that the panel for the main menu is being called.
The id argument must not contain spaces, capital letters, Cyrillic letters. You can use a dash - and an underscore _ in it. It must also be unique. By specifying the id, we can also specify the name, description and translations for them:
Register_sidebar(array("id" => "top-menu", "name" => __("Top Menu", $text_domain), "description" => __("This sidebar is located above the age logo.", $text_domain))))
Notes
List of changes
| Since version 2.2.0 | Introduced. |
The code dynamic sidebar : wp-includes/widgets.php WP 5.3.2
$value) ( if (sanitize_title($value["name"]) == $index) ( $index = $key; break; ) ) ) $sidebars_widgets = wp_get_sidebars_widgets(); if (empty($wp_registered_sidebars[ $index ]) || empty($sidebars_widgets[ $index ]) || !is_array($sidebars_widgets[ $index ])) ( /** This action is documented in wp-includes/widget. php */ do_action("dynamic_sidebar_before", $index, false); /** This action is documented in wp-includes/widget.php */ do_action("dynamic_sidebar_after", $index, false); /** This filter is documented in wp-includes/widget.php */ return apply_filters("dynamic_sidebar_has_widgets", false, $index); ) /** * Fires before widgets are rendered in a dynamic sidebar. * * Note: The action also fires for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param int|string $index Index, name, or ID of the dynamic sidebar. * @param bool $has_widgets Whether the sidebar is populated with widgets. * default true. */ do_action("dynamic_sidebar_before", $index, true); $sidebar = $wp_registered_sidebars[ $index ]; $did_one = false; foreach ((array) $sidebars_widgets[ $index ] as $id) ( if (! isset($wp_registered_widgets[ $id ])) ( continue; ) $params = array_merge(array(array_merge($sidebar, array("widget_id" => $id, "widget_name" => $wp_registered_widgets[ $id ]["name"],)),), (array) $wp_registered_widgets[ $id ]["params"]); // Substitute HTML id and class attributes into before_widget $classname_ = ""; foreach ((array) $wp_registered_widgets[ $id ]["classname"] as $cn) ( if (is_string($cn)) ( $classname_ .= "_" . $cn; ) elseif (is_object($cn)) ( $classname_ .= "_" . get_class($cn); ) ) $classname_ = ltrim($classname_, "_"); $params["before_widget"] = sprintf($ params["before_widget"], $id, $classname_); /** * Filters the parameters passed to a widget"s display callback. * * Note: The filter is evaluated on both the front end and back end, * including for the Inactive Widgets sidebar on the Widgets screen.* * @since 2.5.0 * * @see register_sidebar() * * @param array $params ( * @typ e array $args ( * An array of widget display arguments. * * @type string $name Name of the sidebar the widget is assigned to. * @type string $id ID of the sidebar the widget is assigned to. * @type string $description The sidebar description. * @type string $class CSS class applied to the sidebar container. * @type string $before_widget HTML markup to prepend to each widget in the sidebar. * @type string $after_widget HTML markup to append to each widget in the sidebar. * @type string $before_title HTML markup to prepend to the widget title when displayed. * @type string $after_title HTML markup to append to the widget title when displayed. * @type string $widget_id ID of the widget. * @type string $widget_name Name of the widget. * ) * @type array $widget_args ( * An array of multi-widget arguments. * * @type int $number Number increment used for multiples of the same widget. * ) * ) */ $params = apply_filters("dynamic_sidebar_params", $params); $callback = $wp_registered_widgets[ $id ]["callback"]; /** * Fires before a widget"s display callback is called. * * Note: The action fires on both the front end and back end, including * for widgets in the Inactive Widgets sidebar on the Widgets screen. * * The action is not fired for empty sidebars. * * @since 3.0.0 * * @param array $widget_id ( * An associative array of widget arguments. * * @type string $name Name of the widget. * @type string $id Widget ID. * @type array|callable $callback When the hook is fired on the front end, $callback is an array * containing the widget object.Fired on the back end, $callback * is "wp_widget_control", see $_callback.* @type array $params An associative array of multi-widget arguments.* @type string $classname CSS class applied to the widget container.* @type string $description The widget description.* @type array $_callback When the hook is fired on the back end, $_callback is populated * with an array containing the widget object, see $callback. * ) */ do_action("d ynamic_sidebar", $wp_registered_widgets[ $id ]); if (is_callable($callback)) ( call_user_func_array($callback, $params); $did_one = true; ) ) /** * Fires after widgets are rendered in a dynamic sidebar. * * Note: The action also fires for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param int|string $index Index, name, or ID of the dynamic sidebar. * @param bool $has_widgets Whether the sidebar is populated with widgets. * default true. */ do_action("dynamic_sidebar_after", $index, true); /** * Filters whether a sidebar has widgets. * * Note: The filter is also evaluated for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param bool $did_one Whether at least one widget was rendered in the sidebar. * default false. * @param int|string $index Index, name, or ID of the dynamic sidebar. */ return apply_filters("dynamic_sidebar_has_widgets", $did_one, $index); )Hello friends! As promised, I made a topic about WordPress sidebars. This is a small guide to using and customizing sidebars on WordPress sites.
In this thread, I want to reveal a little secret to all template developers: sidebars have always been an important part of the WordPress system and have been greatly improved over the past few years.
Taking into account recent developments, I am going to show you the step by step process of creating and using sidebars for WordPress themes.
What is a WordPress sidebar?
In fact, the term ‘sidebar (sidebar)’ can mean two completely unrelated concepts in the WordPress system:
In most cases, simple templates have a dynamic sidebar that loads all placed widgets from the admin panel. This process can also take place according to another algorithm, but most often according to this scheme. Still, it's important to understand that a dynamic sidebar and a sidebar template are two different things. Everything is premium, I mainly work with the Sidebar template.
Usually, the term 'sidebar' is used in relation to the dynamic sidebar, which will be discussed in this article. However, I will touch on the sidebar template as well.
What has disappointed me the most in browsing many themes is that the developers do not take full advantage of the most powerful features of the WordPress system. Most themes only have one sidebar, two at best. But after all, these themes will create huge pages with a set of options that can be easily processed using widgets, and their content can be placed directly into the template. I prefer to use a lot of sidebars in a theme to create a flexible, feature rich site.
Registering, Adding and Creating a WordPress Sidebar
Many themes often fall short of quality standards, so if you're a template developer, let's make sure you take this issue seriously. Creating an appropriate dynamic WordPress sidebar is the most important part of the process, because what you set in it will be related to all other sidebar features.
To create one or more sidebars, you will have to register them via a file functions. php Your theme, each theme has its own file that contains all the template settings. To file functions. php You can add or remove theme settings.
The code below demonstrates how you can create a sidebar in WordPress using the function register_sidebar(). In this case, we will be creating a sidebar called 'primary' which will serve as an example to work with.
"primary", "name" => __("Primary"), "description" => __("Sidebar description (visible in admin panel)."), "before_widget" => "
", "before_title" => "", "after_title" => "
")); /* You can repeat the register_sidebar() function for other widgets, the id field must be unique (primary, secondary, moiwidget, etc. */ ) ?>add_action("widgets_init" , "registriruem_sidebari" ) ; function register_sidebari() ( /* Register the "primary" sidebar. */ register_sidebar( array( "id" => "primary" , "name" => __("Primary") , "description" => __( "Description of the sidebar (visible in the admin panel).") , "before_widget" => "" , "before_title" => " "after_title" => "" /* You can repeat the register_sidebar() function for other widgets, the id field must be unique (primary, secondary, moiwidget, etc. */ |
As you can see, registering a sidebar is a very simple task if you have information on how to do it.
Arguments for Creating a Dynamic Sidebar dynamic_sidebar()
Function register_sidebar() accepts only one parameter, it is called $args and contains a set of arguments specifying how the sidebar with its widgets should be rendered. Next, consider examples of how to use arguments manually.
ID
Argument id, is probably one of the most important arguments to write (check out the example of poorly written code below and see why you should definitely write it). WordPress will use id to assign widgets to a particular sidebar, and you'll need id to further fill the sidebar - sidebar.
Each id must be unique. WordPress, by default, will prescribe it for sidebar-$i(where $ i
//our widget id, which is assigned only once "id" => "primary",
Name
You can write any name that you think best represents your WordPress sidebar. Most often, sidebars are given names by which the user can determine which aspects of the topic they are touching on (for example, left or right sidebar). This argument can be internationalized (i.e. localized for other languages). So make sure you write the correct text domain when preparing your topic for translation. The argument, by default, is written as Sidebar $ i(where $ i is the ordinal number of the created sidebar).
//widget name, in the example I use Primary as the name of the widget id "name" => "Primary",
description
Argument description was first introduced in WordPress 2.9. This argument allows you to describe your widget, the description is displayed in the admin panel in the Widgets section. This argument, by default, is written on an empty string. It can also be internationalized (i.e. written in Cyrillic or other languages).
//description will be visible in the widgets section "description" => __("Widget for the left column on the site"),
before_widget
Argument before_widget this is the opening element of the widget assigned to the sidebar. It must also be a block level element HTML markup (e.g. tag < li > , < p > , < div > etc.). This argument has a couple of features that you can write for example in id="" or class="": attributes id="" are written like this: (%1$s) and attributes class="" So: (%2$s).
By default, WordPress will list them as a list item: < li id = "%1$s" > . I'm not a fan of creating sidebar widget list items. I always use < div > . I'm not a fan of creating sidebar widget list items. The last time I use it, because in the absence of a widget on the site, you will not see extra HTML tags, however, further we will consider how to get rid of them.
after_widget
Argument after_widget pretty easy to create. This is the closing element for the widget assigned to the sidebar. You just need to close the element specified for the argument before_widget. By default, WordPress will write it as < li > .
"after_widget" => "
[ crayon - 5e1ff7d787fb8042608178 inline = "true" ] "after_widget" => "" , |
before_title
Most widgets display a title if the user enters it. Argument before_title this is the opening element of the widget's title. By default, WordPress writes it as < h2 > . To use tags < h2 > not worth it, in this case tags will do < h3 > and < h4 > . For intuitiveness and readability of the code, do not make class names without hyphens, so that it would be more convenient for you to read the name yourself, it is very important if you have not worked with the site for some time.
after_title
Argument after_title this is the closing element specified in the argument before_title. By default, WordPress writes it as <
/
h2
>
.
You need to make sure that its value matches the value specified in the argument before_title.
"after_title" => ""
"after_title" => "" |
Displaying a dynamic sidebar dynamic_sidebar()
When the creation of the sidebar is completed, you can start displaying it inside the theme. WordPress has created a function for this called < a title = "Codex Wordpress function dynamic_sidebar()" href= "http://codex.wordpress.org/Function_Reference/dynamic_sidebar" target="_blank" > dynamic_sidebar()< / a > . This function always asks for a parameter $index, which can simultaneously be located both in the argument id, and in the argument name(specified during the creation of the sidebar). Although it is technically possible to use both, it is much safer to use the one you prescribed. id.
Using the code below in one of your templates, you can position the sidebar primary described just above. note that div With class and id You can change at your discretion and screw various css styles .
< div id = "id-vidgeta-primary" class = "moi-saidbar" > // call the display function of the site bar
< / div > |
Usually this code is located in the file sidebar - primary . php, which you'll learn about in a moment when we talk about sidebar templates. However dynamic_sidebar() can be called anywhere in your theme.
- We do and
Default content display
Some theme developers display their own content if the user has not pinned any widgets to a specific sidebar. To check for widgets in the sidebar, use the conditional tag is_active_sidebar() .
Just like a function dynamic_sidebar(), used to fill the sidebar, the function is_active_sidebar() always asks for a parameter $index, which should be ID sidebar you are checking.
With the code below we can test our sidebar primary for widgets. If there are widgets, we will display them; if not, we will display the content that we have specially prepared.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div > |
Not displaying sidebar without widgets
The previous section showed you how to position missing content when a certain sidebar is not active, but you also have the option to completely collapse (display nothing) a sidebar when the sidebar is not active.
We will again use the function is_active_sidebar() to check the sidebar primary for widgets.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div >
|
By the way, here you can think of some interesting things. For example, you can create a dynamic sidebar width for your content based on which sidebars are active and which are not. More on this in the next articles.
Sidebar Templates - Sidebar
We have touched on all aspects of creating and working with a dynamic sidebar, but it should be noted that there are other interesting features. So let's take a look at sidebar templates.
The sidebar template is used to host the dynamic sidebar code (see ‘Dynamic Sidebar Display’ above). On average, all WordPress themes have one template called sidebar. php. If your theme has one sidebar, this template is sufficient.
Sidebar templates are filled inside the theme using the function get_sidebar().The code below is what I usually use to populate a file sidebar. php.
[ crayon - 5e1ff7d788042260898923 inline = "true" ] |
get_sidebar() also always asks for a parameter $ name, which will allow you to fill in more specific patterns. For example, the code below requests a template file sidebar - primary . php.
[ crayon - 5e1ff7d788051693571425 inline = "true" ] |
In order to keep your theme in order and to separate the code, you need to create a specific template for each dynamic sidebar. I suggest that you first create two dynamic sidebars with unique id: primary and secondary. For better organization, create two files: sidebar - primary . php and sidebar-secondary. php.
You will need the code below to create both templates.
[ crayon - 5e1ff7d788066428860015 inline = "true" ]
|
Above is the traditional code I use to create templates. You can modify it slightly to best suit your personal requirements. You still need to make sure you use the function get_sidebar() when filling out the sidebar template.
Keep in mind that sidebar templates do not always display dynamic sidebars. They can technically contain encoded user content capable of reflecting anything. Also remember that you can place a dynamic sidebar in almost any file of your template to display on different pages of the site.
Bad sidebar code
There are a number of flaws that repeat from code to code, which are not acceptable on good sites. Not all of them are, of course, technically incorrect, but they can lead to malfunctions or are simply an extra load of code.
Issue 1: Messy code dumped in functions. php
If you are developing themes, you need to know that WordPress built-in hooks works with hooks. It is necessary not only to know them well, it is important to use them. The biggest problem I've found is that the code just gets dumped into functions. php. You should create a sidebar registration function and then attach it to widgets_init. You can see an example of how to do this above in the Register and Create a Dynamic Sidebar section.
As a side note: You should forget that you can just dump the code into functions. php. Always use the hooks function in WordPress, this will ensure that your functions are 100% complete.
Problem 2: no registered IDs
It is important to understand that if the id is not clearly spelled out, this will certainly entail certain consequences. When you use register_sidebar() or register_sidebars() without prescribing an individual id, WordPress automatically creates indicators id, counting the number of sidebars already created. And, it would seem, everything is wonderful. But this is a big mistake. After all, when a plugin or child theme creates a new sidebar, the sidebar is assigned id 1 (if it is the first in the stream), which causes the id of all other sidebars to change. When the user accesses the sidebar, he will see that all of his widgets are assigned to another sidebar.
Widgets are attached to the dynamic sidebar, according to its id. If a id changes, the widgets also move. That's why it's so important to properly prescribe id while creating the sidebar. Above, in the section ‘Registration and creating a dynamic sidebar’, you can see how to do it right.
Another benefit of clear writing id is that you know exactly what id intended to be used in other functions such as dynamic_sidebar() and is_active_sidebar function_exists() there is no need. As mentioned earlier in this article, dynamic sidebars have been around since 2007. You can use this type of check only for backward compatibility. However, most themes are not backwards compatible, and I don't recommend using it since the previous version.
One of the common types of checking for the existence of a function register_sidebar() presented below. Forget about this type of check and just create a sidebar.
if (function_exists("register_sidebar")) dynamic_sidebar include (TEMPLATEPATH . "/sidebar.php" ) ;
This is not the best way to display a sidebar in a theme. The WordPress system has a function get_sidebar(), with which you can easily do this. Always use it as shown in the example above in the 'Sidebar Templates' section. You should use this function because the hook
Sometimes there are themes where there is only 1 sidebar and they are used for the needs of the theme itself, and you cannot place new widgets there. Perhaps you need to modify an existing theme template and add an additional sidebar, let's say the theme has one on the left, but you need to add another one on the right.
Solving this problem is not at all difficult. It is enough to make small changes to the functions.php theme files and the template file of the page where you want to place the sidebar. How to find out which file is responsible for displaying pages
First you need to register a new sidebar. This is done in the functions.php file in the template folder. register_sidebar(array("name" =>"New sidebar", "id" => "secondary-widget-area", "before_widget" => "", "after_title" => "
",));
Done, a new sidebar has appeared in the widget control panel. It remains only to slightly customize its appearance in the style.css file (you can copy the look from the existing one)
What is what in code
Name– the name of the sidebar (sidebar), it will be displayed in the admin panel Widgets.
id- unique identificator. Needed when adding to the page.
before_widget- code or text to be inserted before each widget.
after_widget- code or text to be inserted after each widget.
before_title– code or text to be inserted before the widget title.
after_title– code or text to be inserted after the widget title.
Pay attention to the ID, the name of the sidebar, in this case it is "secondary-widget-area". It must be exactly the same as the name specified during registration in the functions.php file.
Sidebar is a special field on the site where widgets are embedded. In other words, it is a column with dynamic content. Almost all templates have such columns and their number can be different. Often used from 1 to 4 columns.
In order to make any template as unique as possible, or simply improve the appearance or stand out, you can change the position of the columns relative to the main text field in standard, free and paid templates for WordPress, which is what we will do in this article.
Changing the location of the sidebar and body text
So, let's say that the template we use has one column for widgets, that is, one sidebar, and one main column where the text of our articles and pages is placed:
Let the column with widgets be located on the right, and we need to move it to the left to the very edge. Accordingly, the column with the main text content will move to the right to the very edge.
To do all this, you need to change the styles a little. Text content often has the #content style, while widget content often has the #sidebar style. All that is needed is to change the properties of the first one from float: left; on float: right; and in a different sequence for the second.
Change the location of the sidebar in the Twenty Twelwe theme
Consider all of the above on the example of a standard responsive theme for WordPress.
Sidebar - part of almost any site, usually placed to the left, to the right of the content area, or in front of the footer (footer). WordPress sidebars are no exception. The only difference is that in WordPress, a sidebar is an area where widgets are automatically displayed. You can create an unlimited number of sidebars in WordPress, but for example, I will create two sidebars, to the left and right of the main content area.
Registering WordPress Sidebars
In order for the sidebars to be displayed in the admin panel first, we need to register them. In other words, add the code to the functions.php file:
/** * Register sidebars. */ function fwbs_widgets_init() ( register_sidebar(array("name" => __("Right column", "fwbs"), "id" => "sidebar-1", "description" => __("Right sidebar ", "fwbs"), "before_widget" => " ", "before_title" => "
", "after_title" => "
",)); register_sidebar(array("name" => __("Left column", "fwbs"), "id" => "sidebar-2", "description" => __("Left column in site footer ", "fwbs"), "before_widget" => " ", "before_title" => "", "after_title" => "
",)); ) add_action("widgets_init", "fwbs_widgets_init");Parsing the above code to create WordPress sidebars
It's not as complicated as it seems at first glance.
- "name" => __("Right column", "fwbs") - the name of the widget area, you can write any name, just carefully between the brackets, look at the screen you can see where it is displayed;
- "id" => "sidebar-1" - ID is a unique identifier assigned to the sidebar, all sidebars must have their own, different from other IDs;
- "description" => __("Right side column", "fwbs") - description, similar to the name of the widget area;
- "before_widget" => "
- "after_widget" => "" - the HTML tag that closes the sidebar zone. As we know, all HTML tags, with some exceptions, must be paired (opening and closing);
- "before_title" => "
" - the widget title will be wrapped in an H4 tag with the class
, you can change the significance of the header H1, H2, H3, H4, H5, H6 and assign your own classes;
- "after_title" => ""- closingpair tag for the title of the widget.
Now we go to the admin panel, to the "widgets" section and look at the result. Here is a picture of what I got:
With this code, I registered two WordPress widget zones, now I need to display them on the screen.
Displaying WordPress Sidebars
To display sidebars anywhere in the template, it is logical to write the following code in the right place:
A few explanations on the code:
- - PHP code that gives a command, if there are widgets in the sidebar under id=sidebar-1, then it should be displayed on the screen, if there are no widgets, the sidebar is not displayed;
- - PHP code that calls the sidebar under id=sidebar-1 in the place where you wrote it in the template code.
But as you can see, in WordPress templates, the sidebar output code is placed in separate sidebar.php files, and then the content is output from the sidebar.php file in the right place in the template. As we know that WordPress renders content dynamically and the site template consists of several parts, one of its parts is the sidebar.php file Let me do that.
Creating the sidebar.php file
Create a file like sidebar-right.php , give it a title, and paste the above code into it. All together it will look like this:
As you can see from the example, I supplemented the code with additional HTML markup. Now, to display the widget area, it remains to write the following in the right place:
For the left side column, the file sidebar-left.php is created accordingly and output in the right place of the template like this:
As they say, find one difference in the code.
That's it, the sidebars have been created, now the only thing left is to create markup for them in the template and write CSS styles.
