Create customizable shortcode by post type in WordPress

Learn in this tutorial how to display WordPress CPT entries in grid format using a shortcode with parameters without the need for plugins.

One of the most recurring requests from OsomCode subscribers is how to insert a loop of Custom Post Type entries anywhere on the web.

And if it can be in grid format even better. 😉

You already saw this in a recent tutorial.

But today you are going to combine it with another popular request: to be able to change the parameter that identifies the CPT of the entries you are going to display.

This way, you can create loops of entries of any CPT with a single shortocode by specifying its parameter

Interesting, isn’t it?

This would be the final result for an input type:

Do you want to see another one? Read on. 😉

Steps to display a loop of CPT entries using a shortcode

1. Generate the shortcode with parameters to display the CPT entries

Add the following code at the end of functions.php or in your functionality plugin:

With this code you create a loop with the inputs of the CPT.

The elements you show are (in order):

• Featured image (linked to the entry)
• Title (linked to the entry)
• Excerpt

And you can modify:

• The sorting criteria (in this case by date)
• Descending order (in this case DESC, but you can change it to ASC)
• Number of entries to display (in this case 6).

Also, you encapsulate it inside a shortcode with add_shortcode and add the parameter 'cpt', so you can tell it what kind of input you want it to display.

You’re almost there.

2. Apply grid layout to the input loop

Add the following snippet to the end of the style.css file:

With this you get to display the entries in grid format. You can play with the minmax value (250px) to change the number of columns displayed

Now there is only one step left.

3. Insert the shortcode with the parameter where you want it to go

The advantage of shortcodes is that you can insert them anywhere on the website.

You only have to type “[your_shortcode]” where you want it to be displayed

In this case, as you have to indicate the parameter of the CPT from which you want the entries to be displayed, the shortcode would be something like this: [loop cpt='course'].

And you would have this result:

Do you want to insert entries from another CPT? Then just change the parameter cpt='course'

For example, to display the entries of the portfolio CPT, you would use this shortcode: [loop cpt='portfolio']

In short, you only have to change the parameter of the shortcode that identifies the CPT for the slug with which you register the Custom Post Type.

Important

• If you are using the classic editor, use the HTML tab to enter the shortcode.
• In case you are already using the new block editor (Gutenberg) you can add it to the normal paragraph block, the HTML block or the shortcode block. All of them will render the content correctly.

Conclusions

If you want to display a loop of CPT entries in a grid format without having to add them by hand or use a plugin, now you know how to do it using a shortcode and a paragraph.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉