Due to the fact that most of the sites I develop are created using Wordpress CMS and have to constantly deal with non-trivial tasks, I decided to share with you the experience of using various plug-ins. Both free and paid, and try to adhere to this format: one article - one plugin. I will try to consider only the development that really deserves attention, and in my first story I will tell you about OptionTree - a great, in my opinion, solution for creating a page with user settings for the site.

What are user settings?

Wordpress templates (themes) that we can use on our site very often allow us to customize some additional parameters, such as the color of the headers. All paid topics that I had to use significantly expand the functionality of the administrative panel with a separate interface. Below I give an example of such an extension, please see.


')
When a unique website is created (by uniqueness, I mean a website that uses a template designed specifically for the client with a unique design and functionality), it is often necessary to create an opportunity for administrators to change certain parameters. Almost always it is necessary to give the opportunity to change the logo file, some elements on the main page, social networking icons, the background color in the “basement” of the site, etc. This option for developers is provided by the OptionTree plugin, which can be downloaded for free from the official Wordpress site.

After installation...

By installing and activating the plugin, we, conditionally, get two parts: one for website developers, the other for users. The first part is available from the menu item “OptionTree” - “Settings”, which appears after the activation of the plug-in on the left in the administrative part of Wordpress. Feel free to click there and get a unique interface to form a set of custom fields that will be available to users in the second part of the plugin - “Appearance” - “Theme Options”.

Theme Options UI Builder

So, how to create settings? Under a separate setting, I will mean some field that will be available to the user, the site administrator for editing. UI Builder allows you to create sections or sections, let's call it better so that within these or other settings will be located. In the figure above, I gave an example of settings consisting of two sections: “Basic” and “Services”. Those. it is assumed that in the “General” section some general settings of the site will be placed, and in the “Services” section - specific to the services page. Let's see how the sections look to the user. Go to the "Appearance" - "Theme Options" and - hurray! Here it is the settings page!



On the left we see sections that can be switched, on the right - a set of settings inside the section. Sections are created using Theme Options UI Builder on the button “Add section”, and for the section you must enter its title and unique identifier. Let's create the Advanced section and add a few settings there.



All changes, of course, are recorded by clicking on the “Save Changes” button. Now we will add a setting for the user, well, for example, the color of the headers. Click “Add setting” and, see which set of fields is available for selection. It can be said huge! Select "Colorpicker" and enter a title and unique identifier. Be careful with identifiers, it is by a unique identifier that then in the template code we will be able to access the value of this field.



Let's see what is now available to the user for editing: a new section and a new setting have appeared, the “Header color” field, which the user can now edit in a convenient way. Look, I will not dwell on the full list of fields available for creation, it is, of course, in the documentation for the plugin and on the official website of the developers. If, however, some fields cause you interest - write, I will update this publication with a description of one or another type of proposed fields. In principle, the field name understands its meaning, but, I repeat, if something causes you difficulties, feel free to contact me, I will definitely explain.

Editing the template

Now we, as developers, need to make changes to the site template in order to get the value of a field that the user has entered or selected. For this is responsible some function, an example of the use of which for our choice of the color of the headings, I give below. Moreover, I note that the options for using this plug-in can be a huge variety, in the example I have given, the header style of the document will now be displayed inside the header.php file of the template, namely, their color, depending on the h_color field value.

<head> <style> h1,h2,h3,h4,h5,h6 { color: <?php echo ot_get_option( "h_color"); ?>; } </style> </head> 

Those. the function ot_get_option ($ option_id, $ default) is responsible for outputting the field value, the parameters of which are the field identifier that we, as developers, set ourselves; in our case, we output the value of the h_color field. The second parameter of the function is the output format, let's look at this in more detail. For example, we need to make an option that allows the user to create their own set of icons for social networks. For this we will use the List Item field (in the illustration below).



This field allows you to create a set of repeating fields, when the user can add the same parameters within the same setting. A little bit incomprehensible, I will try to explain and then show in the code how it works. In our case, we assign the social_icons identifier to the List Item field and inside this field (note that there is another “Add setting” button) we will add two fields: an icon file and a link. The type of the first field will be Upload, the type of the second - Text. The first field id will be icon_image, the second one will be icon_link.



What will the user get? Now he can add several social networking icons by clicking on the “Add new” button on the settings page. Moreover, note that the number of such settings is now unlimited and depends only on the user.



In order to display such a complex field in the template, it is necessary to use a slightly different output format, below - a piece of PHP code for such a case. I will try to explain with comments what is happening.

 <?php if ( function_exists( 'ot_get_option' ) ) { //    //    social_icons   $icons = ot_get_option( 'social_icons', array() ); if ( ! empty( $icons ) ) { //    , ..    foreach( $icons as $icon ) { echo '<a href="'.$icon['icon_link'].'"><img src="' . $icon['icon_image'] . '" alt="' . $icon['title'] . '" /></a>'; //     } } } ?> 

In custody

There are really a lot of types of fields that you can use, the plug-in developers did their best: it's the choice of date, the choice of color, you can create image galleries, switches, etc. By combining such fields and correctly displaying them in a template, the site developer will provide the user with a convenient interface for changing certain settings. I note that in one of the latest sites I had to create more than 50 different fields so that customers could change the colors of headlines on the site, texts on the main page, change the number of news items displayed on the page, edit contacts and a map of the passage and many others.