Custom Post Types UI on its own is a great, easy way to add post types to a WordPress website. Displaying custom post types, however, requires knowledge of WordPress post templates and WP_Query PHP class. We wanted to create a way for you to add post types with Custom Post Types UI and display those types without ever touching code. That’s where the powerful CPTUI Extended Shortcode Builder steps in.

CPTUI Extended Shortcode Builder is one of the features in the new CPTUI Extended. CPTUI Extended Shortcode Builder allows you to add shortcodes in post content to display custom post type content. Let’s go over the new feature, how to add shortcodes, and how you can create custom shortcodes to display CPTUI post types on your site any way you like.

Post Editor

CPTUI Extended Shortcode Builder adds a new CPTUI button/icon to the WordPress Post editor. Clicking the CPTUI shortcode button opens a modal to build a CPTUI Extended shortcode.

shortcode-editor

 

Shortcode Modal

The shortcode builder modal contains inputs that correspond to shortcode attributes. Entering or selecting options will supply the shortcode with attribute data that will be used during the display of your post type.

shortcode modal

Shortcodes are created per post type. In the shortcode builder, select a post type and then a shortcode from the Shortcode select. There is a default shortcode out of the box that will work with almost any post type. The options are Title (title above the shortcode output), the amount of items to display, a featured image, and a taxonomy to filter the post query by.

shortcode

Shortcode Display

WordPress will parse the CPTUI shortcode and displayed your post types in the post. We have included a minimal CSS file to format the display of the items in a list. Each shortcode is wrapped in a div with a class for the shortcode. This makes it easy for you to style items to match your theme. Below is the default look in the Twenty Fifteen theme. Below that is an example of simple CSS tweaks.

default css
Default CSS
custom css
Custom CSS

Custom Shortcodes

We didn’t want you to have only a few set of shortcodes, so we built in an API for you to create your own custom shortcodes and shortcode templates. The API opens up the universe for you to create and display your custom post types. Let’s go over some code examples and show you how to add your own shortcodes!

Shortcodes are per post type. You want to design your shortcodes with that in mind. The fields/attributes should be specific to the post type. For example, if you have a product CPT, you could have shortcode builder options like pricing, sizing, or if the product is for men or women. You could even create something that has no options and simply displays three related products. You will be creating the template that displays the post types, so it’s up to you to include the desired fields.

Shortcode Registration

Registering a shortcode is as simple as passing a callback to cptui_register_shortcode(). This function will locate your callback and process an array of data. The data is what will be used to populate the selected shortcode in the modal. Registering shortcodes should be hooked to "cptuiext_loaded" to ensure CPTUI is ready.

function my_custom_cptui_shortcode() {
    cptui_register_shortcode( 'my_custom_shortcode' );
    cptui_register_shortcode( 'my_custom_page_shortcode' );
    cptui_register_shortcode( 'my_custom_single_post_shortcode' );
}
add_action( 'cptuiext_loaded', 'my_custom_cptui_shortcode' );

Shortcode Callback

The shortcode callback returns an array of data. This data is unique to your shortcode. Make sure IDs are unique. Make practice of prefixing your shortcode id and fields id.

  • id – shortcode id make this unique
  • name – name in modal drop down
  • template – name of the shortcode template
  • template_location – path to template folder
  • style – registered style
  • script – registered script
  • post_type – post type to attach shortcode
  • description – displays above the shortcode fields box
  • fields – array of CMB2 fields

Shortcode Fields

The fields are CMB2 fields. If you haven’t heard of CMB2, then read about CMB2 here. Also, check out the CMB2 docs to learn about each field type you can add. There are awesome CMB2 fields out of the box, and you can even create your own, so, anything you wish to display in the shortcode modal is almost limitless! Note that when looking at the CMB2 docs, it has a wrapper $cmb->add_field() around the array. In CPTUI Extended, you don’t need this; just use the inner array explained below. Make sure you properly prefix the fields IDs as well.

// This is how you add a CMB2 field per the CMB2 docs
$cmb->add_field( array(
    'name'    => 'Test File',
    'desc'    => 'Upload an image or enter an URL.',
    'id'      => 'my_custom_test_image',
    'type'    => 'file',
    // Optionally hide the text input for the url:
    'options' => array(
        'url' => false,
    ),
) );

// We don't need $cmb->add_field() for shortcode builder. Use the inner array
array(
    'name'    => 'Test File',
    'desc'    => 'Upload an image or enter an URL.',
    'id'      => 'my_custom_test_image',
    'type'    => 'file',
    // Optionally hide the text input for the url:
    'options' => array(
        'url' => false,
    ),
)

Shortcode callback example:

function my_custom_shortcode() {

    $shortcode = array(
        'id' => 'my_custom_shortcode', // make this unique
        'name' => 'My Custom', // name in modal drop down
        'template' => 'posts', // name of the shortcode template
        'template_location' => 'plugin-dir/my-templates', // path to template folder
        'style' => 'my_shortcode_css', // registered style
        'script' => 'my_shortcode_js', // registered script
        'post_type' => 'post', // post type to attach shortcode
        'description' => ' ', // displays above the shortcode fields box
        'fields' => array( // the fields to show
            array(
                'name' => 'Title',
                'id'   => 'title',
                'description' => 'Title to display above CPTs',
                'type' => 'text',
            ),
            array(
                'name' => 'Amount',
                'id'   => 'amount',
                'description' => 'How many posts to show?',
                'type' => 'text',
            ),
            array(
                'name' => 'Featured Image',
                'description' => 'Would you like a featured image',
                'id'   => 'featured_image',
                'type' => 'checkbox',
            ),
            array(
                'name'    => 'Taxonomy',
                'id'      => 'taxonomy',
                'type'    => 'multicheck',
                'options' => array(
                    'none' => 'None',
                )
            ),
        ),
    );

    return $shortcode;

}

Shortcode Scripts & Styles

In the callback, you can supply a style or script argument, and when your shortcode loads it will add the registered CSS or JavaScript. You register your styles and scripts just like any theme or plugin with wp_register_style and wp_register_script. Note that all shortcodes are wrapped in a div with a class of the ID of the shortcode.

function my_custom_shortcode_enqueue() {
    wp_register_style( 'my_shortcode_css', 'plugin-dir/css/style.css' );
    wp_register_script( 'my_shortcode_js', 'plugin-dir/js/shortcode.js' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_shortcode_enqueue' );

Shortcode Templates

CPTUI Extended Shortcode Builder templates are just like a WordPress theme template. They are PHP files. You can include HTML, PHP, and any other web technology in your shortcode templates.

In the default templates, we use a simple post loop utilizing WP_Query. Shortcode Builder passes an $attributes variable to your template that contains an array of the parsed shortcode/fields data. Look over this gist of the posts.php template to get an idea of a simple template. You can create templates for anything you would normally do in themes and plugins. You could create templates that utilize web technologies such as React, Angular, and the WordPress Rest API.

The location of your templates can be placed in a theme or in a plugin or in multiple locations. You supply the template name and location in each shortcode callback.

Video Overview

Here is a video that walks through Shortcode Builder and the process of creating custom shortcodes.

 

Future Features

These are the Shortcode Builder features in version 1.0.0, but we’ve already got a roadmap of new features as well as enhancements. If you have any questions about Shortcode Builder, comment below! We’d love to help you out.

ONE MORE THING! If you’ve purchased CPTUI Extended, here is an example plugin to help you get started creating your own custom shortcodes. Make sure you have Custom Post Types UI and CPTUI Extended activated. Then install and activate the example plugin. It will add two new shortcodes, a Twitter widget, and a list of posts orders by most comments to the posts CPT. Get it here: cptui-extended-custom-shortcode

8 thoughts on “CPTUI Extended Shortcode Builder

  1. Hi,

    i’ve a short question/idea: Is ist possible (for you) to add ‘order’ and ‘orderby’ to the shortcode generator?

    Best regards

    Christoph

    1. Hi Christoph,

      That’s a feature we have been talking about and is on our roadmap for an upcoming release. I don’t have an exact timetable, but it won’t be too long.

  2. Is there a facility to create a filter as a UI?
    For example – just list all the taxonomies and have a tick box next to each to filter which ones you want to filter through?
    I would like this feature on a research website for users to filter through the hundreds of data files we have.

    Would appreciate any help.

    Kind regards
    sandra

  3. my client already had the CPT and created a single post type and has custom fields that arent showing up in the shortcode builder (just purchased the CPT UI EXTENDED) and what steps do I need to take with this data already input via CPT and ensure it shows up properly on the page when viewed???

    Thanks in advanced lovely plugin

    KInetic

    1. Hi, Steven. Thank you for using CPT UI Extended. Please use our Contact page to submit a support ticket. There, you can interact with a developer who can support you directly. Thank you.

Have a comment? Leave a reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.