WordPress – Custom Shortcodes

WordPress - General Functions Shortcodes CSS PHP

Snippet Overview

WordPress – Custom Shortcodes

In some case you may want to create your own custom shortcodes for styling specific information or content on a page. Creating WordPress shortcodes is a simple two step process. First you will want to add the function that creates your unique shortcode and then you will want to add some new classes to your stylesheet to customize how that shortcode looks on the front end. Below is an example of a basic shortcode. To enable it just paste the functions below into your themes functions.php file and then use the corresponding shortcode on any Page, Post or Custom Post Type within your site.

Lets break it down. The $content in the function is what specifies where your content will appear. The paragraph open and close tags are what specify how that content is styled. This could just as easily be a div or a span. The actual name of the shortcode is what appears just after add_shortcode(. If you wanted to create a new shortcode you would just have to change everywhere in the function that the word “intro” appears in the code below to the name of your new shortcode.

Basic Intro Shortcode

// Custom Intro Shortcode

function custom_intro_shortcode( $atts, $content = null ) {
	return '<p class="intro">' . $content . '</p>';
}
add_shortcode( 'intro', 'custom_intro_shortcode' );

Wrap your content in the following shortcode:

[intro] Paste content here... [/intro]
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply