Google Maps is one of the most widely used services on the internet. In the first decade of the 21st century, it and its counterparts like Mapquest and Bing maps have completely revolutionized how people find destinations. Before these came on the scene, people used to call each other up and ask for directions and write things like “2nd right after the gas station” on *paper*. How did we live like this? 😀
While there are definitely a lot of great and easy-to-use WordPress plugins out there (maybe, too many in a saturated WordPress plugin market), I’m a fan of not installing a plugin for every little thing if it is something that could be accomplished by adding a relatively small amount of code to a page. In what follows, we’re going to create a Google Maps shortcode to quickly integrate Google Maps into your website without the need for a plugin. That way you can just drop it into your editor and be on your merry way.
First, in order to get Google Maps to work in your WordPress site you’re going to want to include the JavaScript for Google Maps. If you wanted to, you could place the following in the <head> section of your header.php file…
<script src="" type="text/javascript"></script>
However, if you are using the “proper way” that you’re supposed to load scripts in WordPress using the wp_enqueue_script function you could add the following to your functions.php file or a class if you are wrapping your WordPress functionality up in classes…
function enqueue_custom_scripts() {
wp_register_script('googlemaps', ('https://maps.google.com/maps/api/js?sensor=false'), false, null, true);
wp_enqueue_script('googlemaps');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
Here we hook our script registration to the wp_enqueue_scripts action hook.
For our shortcode we’re going to want a bunch of different options that we can set in the attributes of our shortcode. As can be found in the Google Maps Developer Documentation, there are a bunch of different elements of a Google map that we can customize.
Read More »
In what follows, we’re going to take a look at how to create a Facebook Like Box in WordPress. If you create a Facebook Like box on the Facebook developer’s page, Facebook will give you some code to paste into your website. Something like the following…
<iframe src="//facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fplatform&width=292&height=590&show_faces=true&colorscheme=light&stream=true&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
This is an example of the iframe generated code, though there are a number of different types of code they’ll give you to choose from (HTML5, XFBML, etc).
You could certainly take the approach to paste this code directly into the PHP files in your WordPress theme where you want to show your Facebook Like box, but we’re going to do this in the form of a WordPress shortcode. That way we can pass in variable content to our Facebook Like box and we don’t have to update the raw code anytime we want to make a change.
Create a function in the location in your theme where you normally register your shortcodes. A lot of times this is the functions.php file but in the author’s humble opinion I believe that there are ways to keep your code more organized. Whether you are using functions.php or a class, add the following function to your code wherever it seems good to you…
function facebookBoxShortcode($atts, $content = null)
{
extract(shortcode_atts(array("id" => '', "path" => '', "showfaces" => 'true', "colorscheme" => 'light', "bordercolor" => 'white'), $atts));
$scheme = '';
$faces = '';
if ($colorscheme == "dark")
$scheme = "dark";
else
$scheme = "light";
if ($showfaces == "false")
$faces = "false";
else
$faces = "true";
return '<iframe id="'.$id.'" class="facebookBox" src="//facebook.com/plugins/likebox.php?href='.$path.'&colorscheme='.$scheme.'&show_faces='.$faces.'&border_color='.$bordercolor.'&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>';
}
Then immediately after this you’ll want to register your shortcode…
add_shortcode('facebookbox', 'facebookBoxShortcode');
If you are registering your shortcode in a class — which I think is a good idea — then you’d use the following slightly different code instead…
add_shortcode('facebookbox', array($this, 'facebookBoxShortcode'));
What we are doing in our function is allowing for a number of different variables to be passed into our shortcode.
- id: This is where we can set the “name” of your Facebook box. It is used as an identifier if you want to have multiple different Facebook boxes on the same page. It can have any single word string value but each should be unique because (as you can see in the code), it maps to a CSS ID selector.
- path: This where you’d want to se the URL of the Facebook page you want people to “Like”. The default we have set is https://facebook.com/platform, but you’d want to change this to your own page.
- colorscheme: This setting could have the string value of either “dark” or “light”
- showfaces:
- bordercolor: Set the color of the border here. The default value is “white.”
We are now all set. Once you have your variables all configured the way that you want them, to use our newly implemented shortcode you could just add the following to your page or post…
[facebookbox id="myFacebookBox" path="https://facebook.com/yourpage here" showfaces="true" colorscheme="light" bordercolor="white"]
If you wanted to use this code outside of the WordPress Loop, such as your sidebar.php or footer.php files, you could use the following….
echo do_shortcode(‘[facebookbox id="myFacebookBox" path="https://facebook.com/yourpage here" showfaces="true" colorscheme="light" bordercolor="white"]‘);
May many Facebook “Likes” follow you wherever you go for all the days of your life.
Shortcode Sunday! The time when we provide a semi-useful WordPress shortcode to kick your week off on a good note! This shortcode will allow you to display your most popular posts in the last 20 days or 30 days or 60 days or any number of days that you want to specify. The way that it determines what is “popular” is by the number of comments that the post has received. You will also be able to specify a limit to the number of popular posts you want to show.
So go ahead and add this function to wherever it is you are registering your shortcodes in WordPress…
function popularPostsShortcode($atts, $content = null) {
extract(shortcode_atts(array("limit" => '4', "days" => '60'), $atts));
global $wpdb;
$sql = $wpdb->prepare("SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN DATE_SUB(NOW(), INTERVAL $days DAY) AND NOW() ORDER BY comment_count DESC LIMIT 0, $limit");
$posts = $wpdb->get_results($sql);
$list = '<div>';
foreach ($posts as $post) {
setup_postdata($post);
$id = $post->ID;
$title = $post->post_title;
$count = $post->comment_count;
if ($count != 0) {
$list .= '<a href="'.get_permalink($id).'" title="'.$title.'">'.$title.'</a> ('.$count.' comments)';
}
}
$list .= '</div>';
return $list;
}
Then all you have to do is register this shortcode after declaring the function…
add_shortcode('popularposts', 'popularPostsShortcode');
or if you are using it inside a class (as I highly recommend) you would register it in the following manner…
add_shortcode('popularposts', array($this, 'popularPostsShortcode'));
And if you want to use it in a page or post somewhere you’d just have to call it like so.
Limit refers to the maximum number of posts you want to show and days refers to the number of days prior to the current day that you want to get popular posts for. So this shortcode would get the top 5 most commented on posts in the last 60 days.
Enjoy 🙂
