Home Home Designing WordPress Posts UI For Post Formats

Designing WordPress Posts UI For Post Formats

wordpress-post-formats-ui

This post is a part 1 of Creating a WordPress Admin Theme post series.

One of the awesome feature of WordPress is Post formats. Post formats made us less dependent on custom post types. But they are many things missing in wordpress post formats. We have the ability to choose the post format but don’t have the ability to provide meta data for the post format. In this article I will provide a way to redesign the admin UI for wordpress posts so that you can provide post meta data according to the post format.

If you are new to WordPress and want to learn about Post formats. Then read this article.

There are many UI designs for wordpress post formats are available throughout the internet. For my wordpress themes I use my own admin UI designs.

I use two kinds of design. First one is JavaScript dependent And the second one is without JavaScript.

Post Formats Admin UI Design Without JavaScript

In this UI design we will be using Custom Meta Box to hold meta data for post formats.

Here is a simple implementation

<?php
    /* Called by save_post action to save meta data in database. */
    function save_my_custom_meta_box($post_id, $post)/*$post contains info about the post and $post_id is assigned to the id of the post*/
    {
        /* Verify the nonce before proceeding. For security */
       if (!isset($_POST["qnimate-post-format-nonce"]) || !wp_verify_nonce($_POST["qnimate-post-format-nonce"], basename(__FILE__)))
          return $post_id;
     
      /* Check if the current user has permission to edit the post. For security */
      if(!current_user_can("edit_post", $post_id))
            return $post_id;




        /* Store the user enter value in a variable */
        $user_entered_link_value = "";
        if(isset($_POST["link"]))
        {
            $user_entered_link_value = $_POST["link"];

        }
        else
        {
            $user_entered_link_value = "";
        }
        /* Find the previously entered value. Empty string is returned if not present. */
        $previous_link_value = get_post_meta($post_id, "link", true);
        /* Add new value to database if old value is not found. */
        if($previous_link_value == "" and $user_entered_link_value != "")
        {
            add_post_meta($post_id, "link", $user_entered_link_value, true);
        }
        /* Update if new value is different then old value */
        else if($previous_link_value != $user_entered_link_value and $user_entered_link_value != "")
        {
            update_post_meta($post_id, "link", $user_entered_link_value);
        }
        /* If user entered value is empty string and data is already then delete it*/
        else if($previous_link_value != "" and $user_entered_link_value == "")
        {
            delete_post_meta($post_id, "link", $previous_link_value);
        }


        /* similarly we do for audio field */
        $user_entered_audio_value = "";
        if(isset($_POST["audio"]))
        {
            $user_entered_audio_value = $_POST["audio"];

        }
        else
        {
            $user_entered_audio_value = "";
        }
        $previous_audio_value = get_post_meta($post_id, "audio", true);
        if($previous_audio_value == "" and $user_entered_audio_value != "")
        {
            add_post_meta($post_id, "audio", $user_entered_audio_value, true);
        }
        else if($previous_audio_value != $user_entered_audio_value and $user_entered_audio_value != "")
        {
            update_post_meta($post_id, "audio", $user_entered_audio_value);
        }
        else if($previous_audio_value != "" and $user_entered_audio_value == "")
        {
            delete_post_meta($post_id, "audio", $previous_audio_value);
        }

        /* similarly we do for quote */
        $user_entered_quote_value = "";
        if(isset($_POST["quote"]))
        {
            $user_entered_quote_value = $_POST["quote"];

        }
        else
        {
            $user_entered_quote_value = "";
        }
        $previous_quote_value = get_post_meta($post_id, "quote", true);
        if($previous_quote_value == "" and $user_entered_quote_value != "")
        {
            add_post_meta($post_id, "quote", $user_entered_quote_value, true);
        }
        else if($previous_quote_value != $user_entered_quote_value and $user_entered_quote_value != "")
        {
            update_post_meta($post_id, "quote", $user_entered_quote_value);
        }
        else if($previous_quote_value != "" and $user_entered_quote_value == "")
        {
            delete_post_meta($post_id, "quote", $previous_quote_value);
        }

        /* similarly we do for video field */
        $user_entered_video_value = "";
        if(isset($_POST["video"]))
        {
            $user_entered_video_value = $_POST["video"];

        }
        else
        {
            $user_entered_video_value = "";
        }
        $previous_video_value = get_post_meta($post_id, "video", true);
        if($previous_video_value == "" and $user_entered_video_value != "")
        {
            add_post_meta($post_id, "video", $user_entered_video_value, true);
        }
        else if($previous_video_value != $user_entered_video_value and $user_entered_video_value != "")
        {
            update_post_meta($post_id, "video", $user_entered_video_value);
        }
        else if($previous_video_value != "" and $user_entered_video_value == "")
        {
            delete_post_meta($post_id, "video", $previous_video_value);
        }

        /* similarly do for textarea chat */
        $user_entered_chat_value = "";
        if(isset($_POST["chat"]))
        {
            $user_entered_chat_value = $_POST["chat"];

        }
        else
        {
            $user_entered_chat_value = "";
        }
        $previous_chat_value = get_post_meta($post_id, "chat", true);
        if($previous_chat_value == "" and $user_entered_chat_value != "")
        {
            add_post_meta($post_id, "chat", $user_entered_chat_value, true);
        }
        else if($previous_chat_value != $user_entered_chat_value and $user_entered_chat_value != "")
        {
            update_post_meta($post_id, "chat", $user_entered_chat_value);
        }
        else if($previous_chat_value != "" and $user_entered_chat_value == "")
        {
            delete_post_meta($post_id, "chat", $previous_chat_value);
        }

        /* Similarly do for status field */
        $user_entered_status_value = "";
        if(isset($_POST["status"]))
        {
            $user_entered_status_value = $_POST["status"];

        }
        else
        {
            $user_entered_status_value = "";
        }
        $previous_status_value = get_post_meta($post_id, "status", true);
        if($previous_status_value == "" and $user_entered_status_value != "")
        {
            add_post_meta($post_id, "status", $user_entered_status_value, true);
        }
        else if($previous_status_value != $user_entered_status_value and $user_entered_status_value != "")
        {
            update_post_meta($post_id, "status", $user_entered_status_value);
        }
        else if($previous_status_value != "" and $user_entered_status_value == "")
        {
            delete_post_meta($post_id, "status", $previous_status_value);
        }
    }

    /*Callback*/
    function meta_box_markup($object)/*$object conatins the information about the post*/
    {
        /*nonce for security purpose. more on it at http://codex.wordpress.org/WordPress_Nonces */
        wp_nonce_field(basename(__FILE__), 'qnimate-post-format-nonce');
        ?>
            <!-- Markup inside the custom meta box -->
            <div>
                <label for="link">Enter URL for link post format</label>
                <!-- Retrieve the email from database. If not yet set then empty string is returned. -->
                <input name="link" type="text" value="<?php echo get_post_meta($object->ID, "link", true); ?>">
                <br>

                <label for="audio">Enter audio URL for audio post format</label>
                <input name="audio" type="text" value="<?php echo get_post_meta($object->ID, "audio", true); ?>">

                <br>

                <label for="quote">Enter quote for quote post format</label>
                <input name="quote" type="text" value="<?php echo get_post_meta($object->ID, "quote", true); ?>">

                <br>

                <label for="video">Enter video URL for video post format</label>
                <input name="video" type="text" value="<?php echo get_post_meta($object->ID, "video", true); ?>">

                <br>

                <label for="chat">Enter chat transcript for chat post format</label>
                <textarea name="chat" value=""><?php echo get_post_meta($object->ID, "chat", true); ?></textarea>
               
                <br>

                <label for="status">Enter status for link post format</label>
                <input name="status" type="text" value="<?php echo get_post_meta($object->ID, "status", true); ?>">
            </div>

        <?php
    }

    function my_custom_meta_box()
    {
        /*
        Parameters for add_meta_box() are $id, $title, $callback, $page, $context, $priority, $callback_args
        -> $id is a unqiue id given to every meta box
        -> $title is the title displayed in custom meta box
        -> $callback is a function that outputs markup inside the custom meta box
        -> $page respresents the admin page on which the mata box will be displayed on. It can be page, post, custom post type
        -> $context respresents the postiton of the meta box. It can be normal, advanced or side.
        -> $priority is the position of the box insde the context. It can be high, core, default or low
        -> $cannback_args is used to pass arguements to the callback function.
        */
        add_meta_box("qnimate-meta-box", "Post Formats Information", "meta_box_markup", "post", "normal", "default", null);
    }

    /* This action is responsibe for creating and displaying meta boxes */
    add_action("add_meta_boxes", "my_custom_meta_box");

    /* Used to store the meta data in database */
    add_action("save_post", "save_my_custom_meta_box");

    // enable post formats for your theme
    add_theme_support("post-formats", array("aside","link","audio","quote","gallery","image","video","chat","status"));

    // enable featured image for your theme
    add_theme_support("post-thumbnails");


?>

This is the UI we get from the above code
post-formats-without-js

Now we can retrieve post format type and its meta data in theme using this snippet

<?php
    /* check the post format type */
    if(has_post_format("status"))
    {
        //get_the_ID()
        echo "Status is:" . get_post_meta(get_the_ID(), "status", true);
    }
?>

Post Formats Admin UI Design Using JavaScript

I use a WordPress plugin called CF POST FORMATS to customize my UI for post formats. This plugin uses jquery to alter the appearance of admin post UI.

This plugin hacks the UI this way:

  • Its hides the post title field using CSS
  • Display custom title field and tabbed area using the wordpress action edit_form_after_title
  • Tabs are switched using jquery. Whenever a tab is switched, its respective post format meta box radio button is virtually clicked using jquery trigger() function.
  • During tab switch for image, the featured image meta box is shifted from sidebar to the tabbed area using jquery.
  • Markup inside the tabs and saving the tabs meta data works the same way as non-js example I showed.

Its not at all necessary to how the plugin hacks for using this plugin. Its source code is well commented and easy to understand therefore you can add your code to extent its functionality to support multiple post formats and more meta data related to a post format.

This is the UI we get from the plugin
post-formats-js

Now we can retrieve post format type and its meta data in theme using this snippet

<?php
    /* check the post format type */
    if(has_post_format("audio"))
    {
        /*retrieving keys are _format_video_embed, _format_audio_embed, _format_link_url, */
        echo "Audio embedded code is:" . get_post_meta(get_the_ID(), "_format_audio_embed", true);
    }
?>

Conclusion

I have provided two ways to customize the admin UI for post formats. You can use the non-js code I provided in your functions.php file to implement the feature. Or else you can use the plugin.

You can also create your admin UI for post formats according to your needs.

Many wordpress websites are build to not depend on javascript. Therefore in that case the first method is very much suitable.

Narayan Prusty
UNIX File System Permissions TutorialFacebook Open Graph Meta Tags Tutorial

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image4 years ago WordPress
Share this
Related Articles