Creating a WordPress Div Tag Shortcode

Posted on January 28th, 2018 by M H in Tutorials | 2 Comments

Creating a WordPress div tag Shortcode

Creating a shortcode for a div tag is very useful especially if you have some that you constantly use. It’s also good for combining a couple together however, in this tutorial we’ll just be creating a div that displays the content withing it.

1.) Let’s start by adding our function and shortcode

function mhweb_div_shortcode($atts = [], $content = null, $tag = '')
{

    //code goes here

}

function mhweb_div_shortcode_init()
{
add_shortcode('mhweb_div_shortcode', 'mhweb_div_shortcode');
}
add_action('init', 'mhweb_div_shortcode_init');

2.) Now we’ll add our attributes, you can add your own

    // normalize attributes
    $atts = array_change_key_case((array)$atts, CASE_LOWER);

    // add our attributes
    $mhweb_atts = shortcode_atts([
       'class' => '',
    ], $atts, $tag);

3.) Now our outputs this is were you create your div tag’s

    // start output
    $mhweb = '';

    // enclosing tags
    if (!is_null($content)) {
       // secure output by executing the_content filter hook on $content
       $o .= ' <div class="'. esc_html__($mhweb_atts['class'], 'mhweb') . '" > '.$content.' </div>';
    }

    // end of our div
    $mhweb .= '</div>';

    // return output
    return $mhweb;

You’re finished! Your code should look like this:

//mhweb_div_shortcode
function mhweb_div_shortcode($atts = [], $content = null, $tag = '')
{

    // normalize attributes
    $atts = array_change_key_case((array)$atts, CASE_LOWER);

    // add our attributes
    $mhweb_atts = shortcode_atts([
       'class' => '',
    ], $atts, $tag);

    // start output
    $mhweb = '';

    // enclosing tags
    if (!is_null($content)) {
       // secure output by executing the_content filter hook on $content
       $mhweb .= ' <div class="'. esc_html__($mhweb_atts['class'], 'mhweb') . '" >'.$content.' </div>';

    }

    // end of our div
    $mhweb .= '</div>';

    // return output
    return $mhweb;

}

function mhweb_div_shortcode_init()
{
add_shortcode('mhweb_div_shortcode', 'mhweb_div_shortcode');
}
add_action('init', 'mhweb_div_shortcode_init');

About author:

M H

I’m a freelance web designer from the UK, Scotland. Also available for freelance hire!

View all posts

2 Comments

  1. Jan Zac says:

    Hello ,

    I saw your tweets and thought I will check your website. Have to say it looks very good!
    I’m also interested in this topic and have recently started my journey as young entrepreneur.

    I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
    Can you recommend something what works best for you?

    Would appreciate, if you can have a quick look at my website and give me an advice what I should improve.
    (Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal.)

    I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

    Hope to hear from you soon.

    P.S.
    Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

    Regards
    Jan Zac

    • M H says:

      Hi there,

      Wasn’t too sure if this was spam but I’ve approved it and I’ll reply. I removed your URL and added it to your name, you get the choice to add it before submitting your comment.

      Social media is probably the best for promoting but the main thing is your website’s SEO. Install YOAST if you haven’t already and they suggest a website called RYTE. They give you amazing information on how you can improve your website’s SEO which will help build your ranking. I would stop using google AdWords if it’s just costing you money, as it can get expensive as you said.

      Your website’s link is already added on here now that you’ve commented which should show up as an incoming link, but yeah your right it’s good for SEO.

      MHWEB

Leave a Reply

Your email address will not be published. All comments are reviewed.

Fast, Secure Payments. Download Themes & Plugins instantly!

Manage your orders and downloads