Shortcodes WordPress

Shortcodes WordPressIn this WordPress video tutorial, I’ll show you how to create Shortcodes in WordPress.

A Shortcode is a WordPress specific way to add cool functionality with little to no effort. In this tutorial I’ll create a Shortcode function that will automatically jump out to any RSS feed and grab as many articles titles as you want.

So, if you want to display the top five articles on the New York Times website you can just type in the following: [nttfeedme blog_title=”New York Times” feed=”http://feeds.nytimes.com/nyt/rss/HomePage” num=”5″]

  • nttfeedme : Is the name of the shortcode
  • blog_title : Is the title that will appear before the article list
  • feed : Is the feed you want to pull from
  • num : Is the number of articles to pull

You can download this code here RSS Feed Me Code. You can see this plugin in action here New Justin.

I created this tutorial because Bilky requested it. Yes, I have a HUGE following in Iraq and that is where he is from. I’m amazed by that!

This is basically what he wanted me to create.

Shortcodes WordPress Feed Grabber
All you need to do to add this tool to your WordPress site is to cut and paste the code that follows the video in your WordPress functions.php and style.css files. After the video I’ll display the code and explain what it does.

Code to Add to the Bottom of Functions.php

if (function_exists(‘fetch_feed’)) { // Check to see if the function fetch_feed exists

include_once(ABSPATH . WPINC . ‘/feed.php’); // Include the code needed to use fetch_feed

// Define the function and have all attributes sent to it save into an array named $atts
function ntt_feed_me_rss($atts, $content = null)

{

// Extract the attributes and save them into local variables named feed, num and blog_title
// If the attributes weren’t set I’m setting up default values
extract(shortcode_atts(array(

“feed” => ‘http://www.newthinktank.com/feed/’,

“num” => ‘5’,

“blog_title” => ‘New Think Tank’

), $atts));

// Retrieves the external feed that you define using the SimplePie Class of functions
$the_feed = fetch_feed($feed);

// Define the maximum number of feed articles to pull in
$the_limit = $the_feed->get_item_quantity($num);

// Get the feed articles starting with the first (defined as index 0) through the max
$the_items = $the_feed->get_items(0, $the_limit);

// If no items are found print an error message
if (!$the_items) {

echo “Feed Not Available”;

} else {

// Create the variable $feed_content that will hold all of the feed content
$feed_content = “<div class=’ntt_feed’>”;

$feed_content .= “<span class=’ntt_feed_title’>$blog_title</span><br />”;

// Cycle through all of the feed results
foreach ($the_items as $item) :

$feed_content .= ‘<div>’;

$feed_content .= ‘<a href=”‘;

// Grab the link to the article that is set in the feed
$feed_content .= $item->get_permalink();

$feed_content .= ‘”>’;

// Get the article from the feed and shorten it to 42 characters with the substr function
$feed_content .= substr($item->get_title(), 0, 42);

$feed_content .= ‘</a>’;

/* I commented this out but if you wanted to display the article content for the feed this is how it is done

$feed_content .= ‘<p>’;

$feed_content .= $item->get_content();

$feed_content .= ‘</p>’; */

$feed_content .= ‘</div><div class=”horz”>&nbsp;</div>’;

endforeach; // closes foreach loop

} // closes if than else block

$feed_content .= ‘</div>’;

return $feed_content;

} // Closes ntt_feed_me_rss() function

} // Closes if function_exists block

// This guy calls the function ntt_feed_me_rss whenever someone calls this shortcode
add_shortcode(‘nttfeedme’, ‘ntt_feed_me_rss’);

The Code for style.css

I added  some css code styling because Bilky asked for very specific styling. This may or may not work for you?

.ntt_feed {

font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;

color: black;

font-size:.8em;

line-height:1.5em;

width: 265px;

position: relative;

float: left;

}

 

.ntt_feed_title {

color: #3D2B1F;

font-size:1.8em;

line-height:1.5em;

font-weight: bold;

}

 

.ntt_feed div a{

color: black;

text-decoration:none;

}

 

.ntt_feed div a:link{

color: black;

text-decoration:none;

}

 

.ntt_feed div a:hover{

color: red;

background-color: #F2F3F4;

}

 

.ntt_feed div:hover{

color: red;

background-color: #F2F3F4;

}

 

div.horz {

height: 2px;

width: 265px;

line-height: 1px;

font-size: 1px;

}

11 Responses to “Shortcodes WordPress”

  1. uko says:

    When I am done inserting the codes, how to i create a new page were I can insert all the RSS?

    • admin says:

      I’m not sure if I understand your question? The short code would work on any post or page you create. You would create them by clicking Add New under Pages and Posts in the left side bar of WordPress

  2. uko says:

    I’ve been on this tutorial for the past 2 months. this is is error message i keep getting. how do i fix it.

    Parse error: syntax error, unexpected ‘:’, expecting ‘)’ in /home/afrogist/public_html/sunsetmega.com/wp-content/themes/twentyten/functions.php on line 522

    • admin says:

      Look around line 522 for a : and a missing ). A lot of WordPress theme errors come from having extra whitespace before Check for that issue as well. I hope that helps

  3. uko says:

    this is d error i m getting wen i inserted the code. Parse error: syntax error, unexpected ‘:’, expecting ‘)’ in /home/afrogist/public_html/sunsetmega.com/wp-content/themes/twentyten/functions.php on line 522

    How can I fix it.

  4. Chrilles says:

    I get the same error message. I think there is a copy/past issue with the ´and ‘ . But I am not a coder and have not been able to solve the issue. Any advice from admin 🙂

    • admin says:

      Yes, you have to replace the backquotes with normal quotes for the code to work. This was a security guard I used in the past. Sorry about that. Just do a find replace and you’ll be ready to go

  5. Rajendra says:

    How to Create Contact form plugin with help of short-codes the form is display any page or post.

  6. Rajendra says:

    How to Create Contact Form plugin with help of short-codes to display amy page or post.

  7. Tom says:

    Thanks for the great tutorial Derek. I was wondering if you have a similar tut on how to insert a shortcode button into the WordPress editor once you finished coding the shortcode in the background? So it would be more obvious for other users.

    Thanks

Leave a Reply

Your email address will not be published.

Google+