This article is about creating WordPress shortcode. If you want to get started you need to have at least some PHP knowledge
This is my first post and from now and so on i will use the blog for simple tutorials to teach you about web development, web design. In this post i will show you how to make your own custom shortcodes.
Shortcodes are some kind of code in wordpress that allow you to display something in easier way without custom fields, editing the template or adding bunch of html. Today i will show you what how to develop your wordpress shortcodes. So, let’s say you want to show your five recent posts with shortocde like this [recentposts number=”5″].
1. You need to create function that will be your shortcode. In the function you need to specify the attributes of the shortocde in this case they are like this
PHP functions have names and attributes(not the same as below, this is php function attributes and below are shortcode attributes.). The function take two attributes $atts and $content.
|
1
|
function recent_posts_shortcode( $atts, $content = null )
|
Realized what is the function name? Now we continue to develop the function. First we create array for the shrotcode attributes and the array have one attribute called number. The default value of number is 3. You can set it or leave like ”.
|
1
2
3
4
5
|
$a = shortcode_atts( array(
‘number’ => ‘3’,
), $atts );
|
Then we need to create custom WordPress query. To query the recent posts ordered by date. We do it like this:
|
1
2
3
|
$query = new WP_Query(
array( ‘orderby’ => ‘date’, ‘posts_per_page’ => a[‘number’])
);
|
After we created the query, we should use it to call the posts.
|
1
2
3
4
5
6
7
8
9
10
11
|
$list = ‘<ul class=”recent-posts”>’;
while($query->have_posts()) : $query->the_post(); // WordPress loop with the query
$list .= ‘<li>’ . get_the_date() . ‘<a href=”‘ . get_permalink() . ‘”>’ . get_the_title() . ‘</a>’ . ‘<br />’ get_the_excerpt() . ‘</li>’;
endwhile;
wp_reset_query();
return $list . ‘</ul>’;
|
Now we need to add action to shortcodes and register your shortocde with the following:
|
1
|
add_shortcode(‘recentposts’, ‘recent_posts_shortcode’);
|
Congratulations! That’s all. You created your shortcode. If you don’t know what loops mean in php and wordpress. Please read here. Here is the full function that we developed.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function recent_posts_shortcode( $atts, $content = null ) {
$a = shortcode_atts( array(
‘number’ => ‘3’,
), $atts );
$query = new WP_Query(
array( ‘orderby’ => ‘date’, ‘posts_per_page’ => a[‘number’])
);
$list = ‘<ul class=”recent-posts”>’;
while($query->have_posts()) : $query->the_post();
$list .= ‘<li>’ . get_the_date() . ‘<a href=”‘ . get_permalink() . ‘”>’ . get_the_title() . ‘</a>’ . ‘<br />’ . get_the_excerpt() . ‘</li>’;
endwhile;
wp_reset_query();
return $list . ‘</ul>’;
}
add_shortcode(‘recentposts’, ‘recent_posts_shortcode’);
|
To call the shortocode from your content editor. Simply use the following:
|
1
|
[recentposts number=“5”]
|
*You can change the style with css. I used html lists to display the recent posts. Feel free to style them or use different html elements.
Fonte: How to create wordpress shortcode? – Darko Gjorgjijoski
Hom Digitalis 