Convert shortcode into html form

1 comment

1. First off, your shortcodes are not formatted correctly for WordPress.

   You need to have a tag for your shortcode and then define the attributes separately.

   Instead of [list-style="one"][/list-style] it needs to be something like [list class="one"][/list]

   The following code will add two shortcodes to your WordPress install.
   [list] and [li]

   // shortcode for the list
   function LIST_shortcode( $atts, $content ) {
   
       // get the options defined for this shortcode
       extract( shortcode_atts( array(
           'class'     => '',
           'id'        => '',
           'type'      => 'ul'
       ), $atts ) );
   
       // output a list and do_shortcode for <li> elements
       return '<' . $type . ' class="' . $class . '" id="' . $id . '">' . do_shortcode( $content ) . '</' . $type . '>';
   }
   add_shortcode( 'list', 'LIST_shortcode' );
   
   // shortcode for the list items
   function LI_shortcode( $atts, $content ) {
   
       // get the options defined for this shortcode
       extract( shortcode_atts( array(
           'class'     => '',
           'id'        => '',
       ), $atts ) );
   
       // return list element
       return '<li class="' . $class . '" id="' . $id . '">' . do_shortcode( $content ) . '</li>';
   }
   add_shortcode( 'li', 'LI_shortcode' );
   

   You would then use these like so:

   [list class="one"][li]A[/li][li]B[/li][li]C[/li][li]D[/li][/list]

   My code also allows you to also..

   Define an ID attribute: [list id="someid"]

   Define the list type: [list type="ol"]

   For this code to work, add it to your theme’s functions.php file or create a plugin out of it.

Comments are closed.