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

This article is the third 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 and Part II of this series.

After discussed the basics of integration, creating our first page and second terms expanded a little more knowledge of the UI elements, we in this part of talk about how to create tabs for options and help on our website, as well as create tabbed browsing as found in the themes management page and ending with the creation and manipulation of metaboxes.
In the last article we created the wrapper of our website as well as a set of buttons and links that should be used in the various actions. Let’s start by taking this code and continue our development.
Tabbed browsing is part of the WordPress admin CSS API, although many do not know and do not apply. In fact this navigation is becoming more and more into disuse appearing only now in the choice and WordPress themes management panel. I personally do not agree with this way that WordPress is below. Tabbed browsing greatly facilitates the organization of content and is even beneficial as it allows to have more options in a single page without having to be concerned about the graphic stain so much choice may cause.
We will see in this section how to create our tabbed browsing within our test page using the WordPress admin native CSS . Place then replace the header of our website within the test_ui_submenu_page_callback function:
function test_ui_submenu_page_callback() {
    $tab = isset( $_GET[‘tab’] ) ? $_GET[‘tab’] : ‘general’;
<div class=”wrap”>
    <?php screen_icon(); ?>
        UI Test Plugin
        <a href=”#” class=”add-new-h2″>One link</a>
        <a href=”#” class=”add-new-h2″>Another link</a>
    <h2 class=”nav-tab-wrapper”>
        <a href=”#” class=”nav-tab”>First Tab</a>
        <a href=”#” class=”nav-tab”>Monday Tab</a>
And here ‘s the code is a simple HTML snippet with classes that allow us to have access to the native interface tabs . Possibly also noticed a difference from the previous header that is the presence of screen_icon () function. This function replaces the techo code showing the page icon . It was not just so that we replace this code but mainly to maintain consistency in future versions of WordPress and above all to give chance to other plugins with specific functions can make changes to the header.
Briefly, the following code creates tabbed browsing , however this is not yet functional. You will need to make some changes to make this possible . Let’s add the following links in our code :
<h2 class=”nav-tab-wrapper”>
    <a href=”options-general.php?page=plugin-test-ui&tab=general” class=”nav-tab”>First Tab</a>
    <a href=”options-general.php?page=plugin-test-ui&tab=specific” class=”nav-tab”>Monday Tab</a>
Now we will use the variable $ _GET [ ‘ Table ‘] in the URL so that we can switch between tabs content , we need to know what the tab to be displayed . In this way the code above will get conditionally which tab to show:
$tab = isset( $_GET[‘tab’] ) ? $_GET[‘tab’] : ‘general’;
At this point we have everything ready , just divide the body of the page into two major conditions to display the contents of one or the other tab. Here follows the full function now with this condition :

// This function is the display of the page content
// In the future we will put all that is visible here
test_ui_submenu_page_callback function () {
    $ Tab = isset ($ _GET [ ‘Table’])? $ _GET [ ‘Table’]: ‘General’;
<Div class = “wrap”>
    <? Php screen_icon (); ?>
        UI Test Plugin
        <a href=”#” class=”add-new-h2″> A link </a>
        <a href=”#” class=”add-new-h2″> Another link </a>
    </ H2>
    <H2 class = “nav-tab-wrapper”>
        <Span> & nbsp; </ span>
        <A href = “options-general.php page = plugin-test-ui & tab = general?” Class = “nav-tab <? Php if ( ‘General’ tab == $) echo ‘nav-tab-active’;? > “> General </a>
        <A href = “options-general.php page = plugin-test-ui & tab = specific?” Class = “nav-tab <? Php if ( ‘specific’ == $ tab) echo ‘nav-tab-active’;? > “> Specific </a>
    </ H2>
    <! – The body of the page is here ->
    <! – We have created a form pointing to the options.php page ->
    <Form id = “form” action = “options.php” method = “post”>
        <Div class = “poststuff”>
            <? Php if ( ‘General’ tab == $):>
            <P> Here are the fields for your general options </ p>
            <? Php elseif ( ‘specific’ == $ tab):?>
            <P> Here are the fields for your specific options </ p>
            <? Php endif; ?>
            <Div style = “clear: both;”>
                <? Php submit_button (); ?>
            </ Div>
        </ Div>
    </ Form>
</ Div>
    <? Php
In this way we get the page as shown in the image above. In the following sections we will deal with the field forms of the elements and adding the help of eyelash on our page.
 Complete Guide to integration with the graphical environment of WordPress (Part III )
In this section we will see how we can show and arrange form fields in our page , dividing by sections and using the CSS classes of the administration to keep the graphic cohesion.


Please enter your comment!
Please enter your name here