Complete Guide to integration with the graphical environment of WordPress (Part II )

This article is the second part of the series on the development of plugins and themes with the focus on integration with the native environment of the WordPress administration , the use of graphical components such as Broken parts , tables, frames and other native CSS , including API settings , nonces among other tools that WordPress already offers. Review Part I of this series.

After we discussed the basics of integration , creating our first page , in this second part we will talk about each of the UI elements that we can use on our pages WordPress .
In the first part we have created a plugin parapodemros create our page and test the settings and graphics. We define the header and a link to the new page that is below the actions of the plugin, and we put some things in our new page. All this was so :
Plugin Name: School WP UI Test
Version: 1.0
Author: WP
Author URI:
// Insert the link below the actions of the plugin
add_filter ( ‘ plugin_action_links ‘ ‘ my_plugin_settings_link ‘ , 10, 2 ) ;
function my_plugin_settings_link ( $ links , $ file ) {
    if ( $ file == plugin -test- ui / plugin -test- ui.php ‘ )
        $ Links [ ‘ settings’ ] = sprintf ( ‘ % s <a href=”%s”> </a> ‘ ADMIN_URL ( ‘ options- general.php ? Page = plugin -test- ui ‘ ) , __ (‘ Settings ‘, ‘ plug -test- ui
 ) );
    return $links;
// Add an action in the menu administration
add_action ( ‘ admin_menu ‘ ‘ test_ui_submenu_page ‘);
test_ui_submenu_page function () {
    // Add a submenu on to the page of the plugin where we make
Control adores
    add_submenu_page ( ‘ options- general.php ‘ , __ ( ‘ UI Test ‘ plugin -test- ui ‘ ) , __ (‘ UI Test ‘ plugin -test- ui ‘ ) , ‘ manage_options ‘ plugin -test -ui ‘ ‘ test_ui_submenu_page_callback ‘);
// This function makes display do content from page
// No future we will put all this is visible on here
function test_ui_submenu_page_callback() {
    echo ‘<div class=”wrap”>’;
    echo ‘<h3>Test UI</h3>’;
    echo ‘</div>’;
Let us take the example above and we will try to understand what elements are necessary for our page is consistent with all other WordPress . First of all , all pages should begin and end with a div with the class wrap :
< Div class = “wrap “>
   <! – Thing here ->
< / Div >
This class defines the screen space to be used as container and without it, most WordPress elements do not show the native CSS.

Then we will create a title and it is necessary to remove the tag < h3 > that place and earlier ( only done before in order to better analyze in detail the titles in this
The titles are all created in h2 but if we want to position an icon or other action buttons next , we have to follow several rules. As our page is a page of options , we will use the native icon options. Let’s do it:
<div id=”icon-options-general” class=”icon32″>
<h2>Plugin The Test UI</h2>
Using a div with the id icon -options – general, get an icon for this format. There are other ids that we can use, for each of the icons to choose from: icon -index , icon -edit , icon- upload, icon- edit- pages, icon -edit -comments , icon -themes , icon- plugins, icon -users and icon -tools.
Now, after adding the icon we created two fictitious links next to the title. For this, it uses the class add- new- h2 for each of the links that will be within the ta h2:
UI Test Plugin
    <a href=”#” class=”add-new-h2″>Um link</a>
    <a href=”#” class=”add-new-h2″>Outro link</a>
With this we get a visual of the consistent page header, similar to what we have seen in other pages .
As in all settings pages, you’ll need to create a form to accommodate all inputs, text areas and other controllers so that they are saved in the WordPress options. NThis only part we will worry about the creation of graphics, without us even worry about the Settings API WordPress.
<! – We have created a form pointing to the options.php page ->
<Form id = “form” action = “options.php” method = “post” >
   <! – Here are the inputs ->
< / Form>
This is the main structure of creating forms. We will deal with the rest later when we get the chance. Whatever comes next will be in it.
Buttons and links in WordPress can be easily controlled through classes. We have normal or secondary buttons and the main or primary buttons. They should be used in two types of functionality. The main when there is the need to have a button or, if there are buttons for the default action . The side buttons should be used on other occasions .
Complete Guide to integration with the graphical environment of WordPress (Part II )
There is also a case of action that should be seen as an exception here: the case of removing or send to waste. This should not normally be a button but a link in red.
<! – We have created a form pointing to the options.php page ->
<Form id = ” form ” action = ” options.php ” method = “post” >
    <! – Here are the inputs ->
    <P class = ” submitbox “>
        <Input class = ” button- primary button ” type = “submit” name = ” button1 ” value = “Main Action ” />
        <Input class = ” button- secondary button ” type = “button” name = ” Button2 ” value = “Secondary Action ” />
        <a href=”#” class=”submitdelete”> Remove anything </a>
    < / P>
< / Form>
In the code above we set the primary and secondary buttons directly writing HTML of your input , however, imagine that the community decides for one or more reasons make button- primary classes and button- secondary obsolete and create new , you have to be constantly aware this kind of detail, however it is a very boring job . That’s why there are two functions that make this work for us : get_submit_button () and submit_button ( ) . Thus , rewriting our code we have the following :
<p class=”submitbox”>
    <?php submit_button( __( ‘Action Principal’ ), ‘primary’, ‘botao1’, false ); ?>
    <?php submit_button( __( ‘Action secondary’ ), ‘secondary’, ‘botao2’, false ); ?>
    <?php submit_button( __( ‘Remover anything’ ), ‘delete’, ‘botao3’, false ); ?>
Create warnings in WordPress is very simple, however should not be programmed directly on the administration pages but shown only when it is really necessary and only on the pages to which they relate. If a warning is of global nature, such as a general error or something that should be resolved as soon as possible or inhibits one or more features to work properly, it must be shown always.
The process of creating and control of these warnings is very simple. You should, for performance reasons , store in a database option whenever it detects an abnormality that requires notice and, once it resolves , remove this option . The function will detect if this option exists and , if it exists, displays warnings.


Please enter your comment!
Please enter your name here