How to create “Shortcode” for a custom field

First of all you need to add below code to the function.php of your WordPress theme.

add_shortcode('field', 'shortcode_field');
        function shortcode_field($atts){
        extract(shortcode_atts(array(
        'post_id' => NULL,
        ), $atts));
          if(!isset($atts[0])) return;
        $field = esc_attr($atts[0]);
        global $post;
        $post_id = (NULL === $post_id) ? $post->ID : $post_id;
        return get_post_meta($post_id, $field, true);
}

Now use the below Shortcode inside pages or posts to display custom field value.
Make sure the ID of the Shortcode field below should be same as the name of the custom field.

[field “my-block”]

Coloring Bullets & Numbers – CSS3

ul{
    list-style: none
  }

li{
    position: relative
  }

li::before{
    content: '';
    background: orange;
    position: absolute;
    top: 18px;
    left:0;
    width: 7px;
    height: 7px;    
    border-radius: 100%;
    -o-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%    
  }


Example:

  • List Item 01
  • List Item 02
  • List Item 03

ol {
    list-style: none;
    counter-reset: li
}
ol li {
    counter-increment: li
}
ol li:before {
    content: counter(li);
    color: orange
}


Example:

  1. List Item 01
  2. List Item 02
  3. List Item 03