Time Saving WordPress Shortcode Tricks

One of my favorite features of WordPress is the shortcode trick.  The name says it all, but for those not familiar yet with the magic of shortcodes, they allow you to insert a particular function automatically into a WordPress page or post.  This function can be virtually anything.  From inserting recent posts to displaying a widget to affecting formatting, shortcodes can do it all.  Most premium themes are coming bundled with some shortcodes and it is quickly becoming the hallmark of a quality theme, at least those that are sold in marketplaces like ThemeForest.

From a functional standpoint, shortcodes are located in the theme files or plugin files.  When a particular shortcode is used in the post or page content, it references a longer snippet of code that creates the desired function.  So rather than trying to insert raw PHP into post content, I could write [myshortcode] and it would insert whatever longer snippet is referenced by that shortcode.  Nifty huh?

shortcodesIf you don’t have shortcodes but would like to play around with them, consider the Elegant Shortcodes plugin from Elegant Themes.  It is a standard WordPress plugin that adds the functionality of shortcodes that come with all of Elegant Themes premium themes.  They include buttons, info boxes, toggle boxes, tabs, a slideshow, an image slider, password protected content, columns, social media buttons, tooltips, tables, dropcaps, quotes and more.  Really anything you could need to spice up your site.

But enough about that one plugin.  Because I’ve found shortcodes so useful since they were introduced in version 2.5 that I thought I would push the limits of what they can do and look for some tips, tricks and hacks that extend their usefulness even further.  Disclaimer: I haven’t tried all of these in a live WordPress installation.  As always, backup your site before messing with it.

 1. Add shortcodes to theme files

Shortcodes are so easy to insert in posts and pages.  But what if you want to modify your theme and add a shortcode to it?  I’ve wanted to do this when I’ve wanted shortcode results to be displayed in a sidebar or somewhere else outside of the content area.  Adding a shortcode to the theme is simple.  Just insert this code, obviously replacing [shortcode] with your shortcode name.

<?php echo do_shortcode("[shortcode]"); ?>

Want to use a shortcode within the loop?  Try this:

echo do_shortcode('[shortcode]');

2. The “bloginfo” shortcode

The bloginfo function can display all sorts of handy information about your site which could save you time.  In order to use this function, you can built a very quick shortcode by inserting the following code into your functions.php file.  Thanks to CSS-Tricks for this one.

function digwp_bloginfo_shortcode( $atts ) {
   extract(shortcode_atts(array(
       'key' => '',
   ), $atts));
   return get_bloginfo($key);
}
add_shortcode('bloginfo', 'digwp_bloginfo_shortcode');

Then you use a shortcode with a parameter to tell the function which data you are looking to display.  Like this:

[bloginfo key='name']

You can also use a shortcode in HTML which can prevent you from having to write long URL’s over and over.  Like this:

<img src="[bloginfo key='template_url']/images/logo.png" alt="[bloginfo key='name'] logo" />

See the full list of info you can grab here, but you can choose from some of these beauties: name, description, wpurl, admin_emai and rss_url.

Note: make sure to switch to the HTML editor when adding a shortcode.  The WordPress WYSIWYG will strip the brackets from your shortcode if you enter them in the visual editor.

3. Allow shortcodes to be used in widget text

If you’re not into coding shortcodes directly into your theme files, but want them in your widget text, you can use this code to add a filter to the widget_text() function which overrides WordPress’ tendency to disallow shortcodes in widget text.

add_filter('widget_text', 'do_shortcode');

What is your favorite technique, trick or tip when working with shortcodes?  How have you used them to make your life easier?  Let us know in the comments below.

WordPress Design Trends for June 2013

WordPress evolves at a steady and predictable pace.  This is a nice feature of the core WordPress.org project.  Since version 1.5, the theme system has allowed designers and WordPress admins to create cutting edge designs that are portable across almost any WordPress site.  With a virtually instantly available design, administrators can change the overall look in a heartbeat.  As WordPress evolved, the theme engine allowed people to install a framework and customize it quickly and easily without affecting the core code.

Even though modifications became easy to do, the theme system created enormous competition for designs.  With the ability to download a theme that is ready to go out of the box, designers were forced to get creative.  Now it seems as though there is a WordPress theme shop next to every Starbucks (that is to say, on every corner, ubiquitous).

With a vibrant theme community, designers have to adapt quickly to changing trends.  And boy do they change quickly.  Here are some of my favorite design trends that have emerged in this first half of 2013.  If the first have is any indication, the second half of 2013 will be incredible.

Responsive Designs (vs. mobile)

responsive

When mobile devices were first starting to be built with enough oomph to handle modern web applications, designers had to think quickly and incorporate mobile designs in good WordPress themes.  Initially, each standard theme came packaged with a corresponding mobile theme.  This mobile theme was compatible with the ipad and blackberry devices.  Then the iPad came out and changed everything.  Designs were faced with a decision to add a third layout to their themes (some chose this path) or develop a new way to handle different screen resolutions elegantly.  In 2013, responsive designs really came into their own.

Responsive designs (in case you’ve been living under a rock, trying to get Joomla to work for the last year) is concept that allows a design to scale in all sizes.  Although scaling and moving elements may change how the site looks, it won’t distort, squeez, squish or otherwise befuddle your design.

Specialized mobile navigation

mobile nav

In concert with the advent of responsive designs, WordPress custom menus allow designers to create a menu that is only to be used for mobile browsers.  This doesn’t matter if you only have 3 menu items.  But scrolling through 10 menu items and their 50 sub-items can be frustrating on a mobile device.  So frustrating you can easily lose visitors.  Developing a mobile menu can resolve this frustration.  A restaurant I recently worked with has a full menu for standard browsing, but the mobile menu only offers information on their story, location and menu.  The three critical pieces of information for the mobile user.

Media-centric designs

media-centric design

With more households having high speed internet, and mobile device load time improving for that matter, design limitations have decreased.  I remember using AOL as my browser, with a 14.4kpbs modem to browse the web.  When I came across a website with lots of images, I had to either go run an errand, or look elsewhere.  Not anymore.  2013 designs are riddled with high-resolution images.  Not just as content, but as design elements.  New media-centric designs focus on the media, not the structure.  Examples include sites with entire backgrounds taken up by high-res images.  Without the featured images, there wouldn’t be much to the design, in fact.

Single-page designs

single page design

Single-page designs have really taken off this year.  A couple of things make this possible.  First, the web design community as a whole is moving back toward simplicity.  Simple sites mean more focus on content.  Second, the evolution of infinite scrolling technology has made single-page designs more realistic since all of your content can eventually be displayed without navigating.  This is most effective with two types of websites: 1) those with minimal content (business or splash type pages) and 2) those with socially generated content or a steady flow of content (read: Facebook, Pinterest, traditional blogs).  A cool design element that I’m keeping my eye on is called Parallax Scrolling, see an example.  Parallax connects the scrolling action to other design elements.  Scroll in the example and watch the navigation menu.  Check out OnePageLove.com, a gallery dedicated to single page designs.

Custom fonts

custom fonts

Custom fonts are not new in 2013, but they are quickly becoming the standard.  It used to be there was one choice for font, then a few, then limited to your browser’s capabilities.  Now, due to evolving browsers and the beauty of CSS3, virtually any font can be packaged with a WordPress theme.  This has opened the floodgates for designers that were previously limited to Times New Roman and -GASP- Comic Sans.  I personally never realized how much of an impact a font could have on the overall design feel.  Then Google Fonts muscled into web design and my eyes opened in a totally different way.  Thanks to Theme.fm for the above image.

What is your favorite WordPress design trend for 2013?

 

 

10 Years of WordPress

I feel like WordPress has been a part of my life for more than 10 years.  But this past May, WordPress reached a 10 year milestone.  What began with a conversation between Matt Mullenweg and Mike Little about forking their favorite blogging software evolved into the most powerful, ubiquitous website platform in the world.  Currently powering 18% of all websites, WordPress has risen beyond fame and into legend.

This original post by Matt was the marker of inception of what would become WordPress.  As futurist as he may be, I would speculate even Matt couldn’t predict what that project would become.  But oh, are we thankful for what happened in the subsequent months.

Mike Little, the co-creator of WordPress recently wrote about the 10 years that have passed since the first release.  He highlighted some of the huge websites that run WordPress, near 70 million websites now.  Around half of the top 100 websites are using WordPress.  The underlying theme here is one of appreciation.  People across the globe have sent words of grattitude to Matt and others at Automattic for providing such a tool, for free.  What is perhaps more important here, is the community they have developed.  This has been possible, in part, because of a dedication to open source software.

WordPress started because Matt and Mike wanted a better “logging software” and the best at the time, TextPattern, was not GPL.  Because of Matt’s dedication to an open and free web, (specifically: open source software with a General Public License), WordPress was born out of necessity.

Because WordPress is open source and freely available, it was adopted by millions.  But a community is more than just an active forum.  A community surrounding a piece of software is about shared ownership and investment.  We all contribute to the vibrancy of the WordPress community and that’s what makes it unstoppable.  If you are skeptical of the global impact of WordPress, head on over to http://en.wordpress.com/stats/ to see a live look at the geographical spread of action on the WordPress.com servers.

live wordpress

If that’s not convincing, take a look at the growth in WordPress.com pageviews.  At press time, over 380 million people view 4.1 billion pages per month via WordPress.com.  Now that’s impressive.

wordpress pageviews

As I’ve already mentioned, the functionality, ease of use, simplicity and professionalism found with WordPress as a blogging tool was half the reason for it’s success.  But the other half is due to the commitment to freely available software under a GPL.  In honor of the 10th anniversary of WordPress, the in-process WordPress book “Freedom, Community and the Business of Open Source” added chapter 3 “On forking WordPress, Forks in General, Early WordPress and the Community”.  In this chapter the genesis of WordPress is outlined, including the prophetic blog post from 2003.

In WordPress Matt’s succinct outline of the major impacts of each version from the beginning, he highlights one key factor that is not unique to the WordPress community, but so critical to it’s success:

In WordPress 1.2 the new Plugin API made it easy for developers to extend WordPress. In the same release gettext() internationalization opened WordPress up to every language (hat tip: Ryan Boren for spending hours wrapping strings with gettext). In WordPress 1.5 our Theme system made it possible for WordPress users to quickly change their site’s design: there was huge resistance to the theme system from the wider community at the time, but can you imagine WordPress without it? Versions 2.7, 2.8, and 2.9 saw improvements that let users install and update their plugins and themes with one click. WordPress has seen a redesign by happycog (2.3) and gone under extensive user testing and redesign (Crazyhorse, Liz Danzico and Jen Mylo, WordPress 2.5). In WordPress 3.0 we merged WordPress MU with WordPress — a huge job but 100% worth it. And in WordPress 3.5 we revamped the media uploader to make it easier for people to get their images, video, and media online.

What Matt pointed out here is so very important.  A vibrant developer community is the key to software success.  Although at the time there was resistance, the healthy discussion made WordPress stronger.

If one thing is clear through this, it is the strength of the WordPress community over the last 10 years has grown at a steady clip.  Without the community, there would be no WordPress.  Without the vision of a couple pretty bright guys, there would be no WordPress.  To all of you that have contributed to WordPress over the  years, from Matt to Moe to Mary, THANK YOU.