WordPress Shortcode API Crash Course

I have decided to spice things up by doing video tutorials! For my first video tut, I decided to tackle the Shortcode API within WordPress.

Shortcodes are like little snippets that can bring some extreme power to any WordPress install. These can be created in either themes or plugins and can be as simple as injecting a sentence into the WordPress editor, or bring complex content creations.

In the very first video tutorial, we’ll dive into the Shortcode API and create a two column layout so we can bring more layout options for our content. Check out the video below to learn more!

WordPress Shortcodes API

http://youtu.be/rAUXZMEHCdM

WordPress Jetpack 2.0 packs a punch!

WordPress Jetpack 2.0 packs a punch!

It’s official

Automattic, the company behind WordPress, has officially released version 2 of their popular plugin, Jetpack. For those not in the know, “Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com.” This statement couldn’t be any more true in the latest version.

Highlights

Let’s take a look at some of the new features now available. These features range from content syndication to your social networks all the way to free image hosting via WordPress.com’s CDN (Content Delivery Network).

Publicize

Jetpack Publicize

For a while, I have been so unhappy with syndicating my content or clients content to their social networks such as Facebook and Twitter. Sure, there are plugins out there, there are API’s a developer can use, but nothing ever functioned as I needed them to or how I liked. Now with Publicize in Jetpack, WordPress will do that for you! So far, in my testings, it works just as I have always needed from the many alternatives in the wild. Actually, if you came to this post from either my Facebook or Twitter accounts, I used this very feature to do so!

One of my biggest gripes with the social media publication plugins out there is they offered too much, or they offered too little. Publicize gives you just the right amount of publication options in Facebook, which is where I’ve always had my issues. I can tell WordPress to post only to my personal Facebook account, or I can tell it to post to Facebook pages I am an admin for. You can also tell Publicize to allow all authors in the blog to have the same privileges, or you can do it on a user basis. One issue though, you can’t tell it to post to both your personal and a Facebook page. Which is probably a good thing as far as spamming your readers.

Over time I’d love to see something close to what Buffer does, which is allow you to schedule times to post your new posts or pages to your different networks. So I may want it to post to Twitter the second I publish my post, but have it syndicate to Facebook 10 minutes later.. I know that’s a feature a lot of my Social Media Marketers friends use.

For more detailed information on this feature check out the documentation at jetpack.me

Post By Email

Jetpack Post by EmailI’ll admit, this is a feature I probably will never use. I see no use, in my work flow, to make a blog post with email. I’m packed to the brim with mobile devices and the amazing crew at Automattic have done a stellar job with bringing excellent native apps for all popular platforms. I realize that not every one has made the leap to “smart phones” but yet their device still checks email, this is a great solution. No need to single out your users right? Ok enough of that, let’s talk about what’s packed in this.

Post By Email is enabled on a by user basis. This means that my username of JohnDoe has the ability to post by email, but JaneDoe doesn’t. To do so, you can enable the option in the Settings > Users section.

For many of us, email is just plain text… however, you can toss HTML in here and WordPress will display that in your Post By Email. But it doesn’t stop there! No, no! You can also add attachments which get posted along with using shortcodes too! Ok, things are looking pretty good here :) But most post have categories and tags, well, Post By Email will handle that too! There’s a ton of features that are supported in this option to make sure you are able to make a blog post and never have to worry if the outcome was correct when published.

For more detailed information on this feature check out the documentation at jetpack.me

Infinite Scroll

Jetpack Infinite ScrollYES! This is great. We now have (essentially) Infinite Scroll in WordPress. It’s not exactly in core, but this is close enough. One major thing point out is that it’s not just available and ready to go with every theme! Your theme needs to support it! If you’re a theme developer, you better make sure you offer this!

If you don’t know what infinite scroll is, no worries, I got you covered! Have you ever been on Twitter or Facebook, and when you scroll to the bottom, more content loads? That’s infinite scroll. This is an alternative to “paginating” content by making the theme responsive to the fact that we need more content. So with this, we essentially make an ajax call to the database to fetch the next 10 posts (or however many you have set up in your WordPress install). Setting this up is not for the light-hearted. You need to know your way through PHP and WordPress’ action and hooks to make your theme compatible. Thankfully all the documentation to add support for it is in the documentation, which you can find a link to below :)

I know I’ll be making use of this in all of my themes. Will you? For more detailed information on this feature check out the documentation at jetpack.me

Photon

Jetpack PhotonThis feature I absolutely love! Although, I activated it on my blog… and things broke… haven’t had time to debug quite yet, so that tells me there is some tweaking needed. BUT, with that aside, this is a feature developers have screamed for.

Photon is an image acceleration and editing services for sites on WordPress.com or Jetpack enabled websites. With this enabled, your images will be served from WordPress.com’s CDN (Content Delivery Network) which is great because that now means less load on your hosting provider and it’s freeeeeeee! :P

Not only that, but it’s the Photon API that is amazing. Back in the day, developers used what is known as TimThumb. It’s a PHP image resizing script. This would create new images on the fly based on what size the image is requested at. HOWEVER, this led to a massive security hole and a lot of websites got hacked and the issue still exists today for a lot of themes if the script wasn’t updated.

With the Photon API, we now have a secure API built FOR WordPress to generate, on the fly, images for our themes and plugins. AWWW YEAH! I had seen chatter about this in Trac and I thought it was being built for 3.5. Seems it got past me and was brought to Jetpack instead :) Which makes sense because other wise it’s impact on hosted sites will suffer. WordPress now provides the technology to auto generate your image sizes.

The options for the Photon API are pretty robust and easy to use really. I’ll be playing with this and experimenting with it further and plan to try and make full use in any theme possible. For more detailed information on this feature check out the documentation at jetpack.me

Still more to be seen!

These our just four of the many features with in Jetpack. The power behind this plugin is phenomenal and should never be over looked, in my opinion. I’ll be honest, for a while I didn’t care too much for the plugin in its initial release, but upon enabling it and playing with it, I’m blown away. Go download it now if you haven’t yet! As time moves on, we see more awesomeness brought to our WordPress sites from the amazing team at Automattic. Keep it up guys!

 

The Weekly Word #6

Posted for the week of October 12th-October 18th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

 

Quick Tip: Upgrade Your WordPress Site via SSH">Quick Tip: Upgrade Your WordPress Site via SSH

WordPress 3.5 Beta 2">WordPress 3.5 Beta 2

Get Beautifully Displayed Real-Time Analytics With Chartbeat">Get Beautifully Displayed Real-Time Analytics With Chartbeat

The Beginner’s Guide to WordPress Actions and Filters">The Beginner’s Guide to WordPress Actions and Filters

What You Should Put In Your WordPress Blog’s Sidebar (and Why)">What You Should Put In Your WordPress Blog’s Sidebar (and Why)

Treehouse Adds WordPress Courses To Curriculum">Treehouse Adds WordPress Courses To Curriculum

WordPress 3.5 at the Horizon">WordPress 3.5 at the Horizon

How I run a membership site">How I run a membership site

The Weekly Word #5

Posted for the week of October 5th-October 11th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

This edition of the Weekly Word was delayed and posted on Monday, October 15th. I was away for a week from Saturday the 6th to the 13th and was unable to make the weekly update until on time. Future articles will still continue to post every Friday.

Vid Luther: Why Your WordPress Site is Slow, and How to Fix It">Vid Luther: Why Your WordPress Site is Slow, and How to Fix It

Digging Into the Theme Customizer - 2 part series">Digging Into the Theme Customizer - 2 part series

Andy Stratton: Accomplish It With Core: Galleries, Sliders & More">Andy Stratton: Accomplish It With Core: Galleries, Sliders & More

A Primer on Ajax in the WordPress Frontend: Actually Doing It">A Primer on Ajax in the WordPress Frontend: Actually Doing It

 

The Weekly Word #4

Posted for the week of September 28st-October 4th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

Just a quick announcement, The Weekly Word article #5 will be delayed and posted on Monday, October 15th. I will be away for a week starting Saturday the 6th so I will be unable to make my weekly update until then. Future articles will still continue to post every Friday.

WordPress 3.5 Beta 1 (and a bonus!)">WordPress 3.5 Beta 1 (and a bonus!)

The Ultimate Site Finalization Checklist for Professional WordPress Websites">The Ultimate Site Finalization Checklist for Professional WordPress Websites

Jeff Waugh: TurboPress: The High Performance Guide to WordPress">Jeff Waugh: TurboPress: The High Performance Guide to WordPress

Your WordPress Disaster Recovery Plan">Your WordPress Disaster Recovery Plan

WordPress Theme Demand Still Strong">WordPress Theme Demand Still Strong

Grid Columns WordPress Plugin">Grid Columns WordPress Plugin

WordPress snippet: Search within a specific post type only">WordPress snippet: Search within a specific post type only

XML-RPC enabled by default in WordPress 3.5">XML-RPC enabled by default in WordPress 3.5

The Weekly Word #3

Posted for the week of September 21st-27th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

Maintain All Your WordPress Websites From A Central Location">Maintain All Your WordPress Websites From A Central Location

How to Handle a Hacked WordPress Install">How to Handle a Hacked WordPress Install

How to Get Paid What You’re Worth">How to Get Paid What You’re Worth

Posting via the Front End - 2 Part Series">Posting via the Front End - 2 Part Series

Easily Disable Comments with Disable Comments Plugin">Easily Disable Comments with Disable Comments Plugin

How to move very large MySQL Databases">How to move very large MySQL Databases

The Weekly Word #2

Posted for the week of September 14th-20th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

Free Terms of Service and Privacy Policy for Your WordPress Sites">Free Terms of Service and Privacy Policy for Your WordPress Sites

Making A Theme With Bones - 3 Part Series">Making A Theme With Bones - 3 Part Series

Make a WordPress Menu that Stands Out From the Crowd">Make a WordPress Menu that Stands Out From the Crowd

How Compatible Is Your Theme With WordPress?">How Compatible Is Your Theme With WordPress?

Taking A Closer Look at Twenty Twelve: WordPress’ Latest Flagship Theme">Taking A Closer Look at Twenty Twelve: WordPress’ Latest Flagship Theme

How to Analyze Your WordPress Installation’s Performance">How to Analyze Your WordPress Installation’s Performance

Integrating With WordPress’ UI - 2 Part Series">Integrating With WordPress’ UI - 2 Part Series

WordPress Is Probably Powering Your Favorite Candidate’s Website">WordPress Is Probably Powering Your Favorite Candidate’s Website

WP Engine Review: Managed WordPress Hosting Developers Will Love">WP Engine Review: Managed WordPress Hosting Developers Will Love

WordPress Helpers: The Missing Settings Page for WordPress">WordPress Helpers: The Missing Settings Page for WordPress

Developer plugin v1.1: Optimize Your Theme Development Environment">Developer plugin v1.1: Optimize Your Theme Development Environment

Design updates and improvements make their way to WordPress Trac">Design updates and improvements make their way to WordPress Trac

The Weekly Word #1

Posted for the week of September 7th-13th, 2012

This post is part of a weekly series of articles show casing recent news within the WordPress community. These weekly articles help sift through all the important stuff worth noting in the world of WordPress. If you want to take part and share some news you feel is important on WordPress, You can submit your URL’s by tweeting @colegeissinger with the hastag #WeeklyWord and we’ll add your news to our weekly list with your twitter handle as a contributor. ^_^

Quick Tip: Get the Current Screen’s Hooks">Quick Tip: Get the Current Screen’s Hooks

Writing Extensible Plugins With Actions and Filters">Writing Extensible Plugins With Actions and Filters

Notification List for New Books">Notification List for New Books

Put your credit cards away, because ZippyKid is now free for most of us">Put your credit cards away, because ZippyKid is now free for most of us

Why WordPress? [Infographic]">Why WordPress? [Infographic]

The Weekly Word


There is so much that happens weekly, if not daily, within the WordPress community, and it is difficult to digest all of what’s going on because there are so many avenues and websites one must follow to stay up to date. That’s where The Weekly Word comes in. I’ll be consolidating all the important stuff happening within the community into a weekly article that will go to “press” every Friday.

Get ready for the Weekly Word! First article goes to press Friday!

Expand Menu Dropdown if viewing parent page in WordPress

Today I was faced with auto expanding a sidebar drop down if we were viewing that parent category. In the past, at other design firms I have worked for, our solution was a complicated JavaScript URL sniffer that would match the current URL to the URL found in the menu. That never settled well with me. So I sought out to figure out a better way to do so.

Check out the demo at jsFiddle. I’ll have an actual Demo and option to download the Source in time, after I have found the time at least :P

Generate the HTML from wp_list_categories()

What I found is good ol’ WordPress already takes care of this for us. So let’s say we are using the _wp_listcategories function to list out all categories. In this very instance, I am building a Woocommerce site so my code looks like this:

<ul id="side-menu">
<!–?php wp_list_categories('taxonomy=product_cat&orderby=slug&order=ASC&exclude=23,22,21&title_li='); ?–>
<!–[END #side-menu]–>

To summarize what is going on here, I am requesting all categories in the custom taxonomy _productcat, this is set up from Woocommerce by default, and ordering all categories in that taxonomy to be sorted in alphabetical order by the slug, or URL. We are also excluding out three categories and leaving the title blank.

This will then return HTML like this:

&lt;ul id="side-menu"&gt;
<ul>
<li class="cat-item cat-item-33"><a title="View all posts filed under Category 1" href="http://www.domain-name-here.com/product-category/category-1/">Category 1</a></li>
<li class="cat-item cat-item-16 current-cat"><a title="View all posts filed under Category 2" href="http://www.domain-name-here.com/product-category/category-2">Category 2</a>
<ul class="children">
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 1" href="http://www.domain-name-here.com/product-category/category-2/sub-category-1">Sub-Category 1</a></li>
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 2" href="http://www.domain-name-here.com/product-category/category-2/sub-category-2">Sub-Category 1</a></li>
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 2" href="http://www.domain-name-here.com/product-category/category-2/sub-category-2">Sub-Category 2</a></li>
</ul>
</li>
</ul>

All the classes here are WordPress generated and 99% of these are not relevant to making this functionality work, but I included them here so you have a good idea of what our generated code will look like. Now the beauty of this function is that it auto adds two classes called “current-cat“ or “current-cat-parent“ to the category we are currently viewing as shown in Line 3 above. The second class listed will be applied to the parent category if we are viewing a sub-category. We’ll make use of this also in our jQuery. AWESOME! We can use these classes in our jQuery code that we use for expanding and contracting our sub-categories.

Add the jQuery

Now that we have our HTML generated we need to build the jQuery menu. This is pretty straight forward really.

jQuery(document).ready(function($) {
$('#side-menu > li > ul').hide().click(function(e) {
e.stopPropagation();
});

var current_cat = $(&#039;#side-menu &gt; li.current-cat, #side-menu &gt; li.current-cat-parent&#039;);

if(current_cat.length == 1) {
    current_cat.children(&#039;ul&#039;).slideDown();
}

$(&#039;#side-menu &gt; li &gt; ul.children&#039;).each(function() {
    $(this).parent().toggle(function() {
    $(this).find(&#039;ul&#039;).slideDown();
}, function() {
    $(this).find(&#039;ul&#039;).slideUp();
});    
});

});
Let’s explain the code above..

  1. First we wrap our code in the Document Ready wrapper. This will execute our script after the DOM has loaded. Since WordPress by default runs jQuery in no Conflict mode, I like to specify it first by calling the jQuery handle and then defining the dollar symbol in the function field so I can use the shorter version in my script.
  2. Next we select each sub-category UL and hide them. We also remove the default function of the a tag on these elements so they don’t try to redirect the page when we want to view the sub-categories.
  3. We then setup a variable called _currentcat which will holde our DOM selections. We’ll select two spots, when the class current-cat or current-cat-parent are present.
  4. Next we’ll check to see if any of our classes are present in the DOM by calling our current_cat variable and checking if it is present. If so, we then slideDown the child UL element.
  5. Now we’ll animate our sub-categories to expand down when clicked. We’ll first select each UL with a class of children and tell it to slideDown when clicked, and if we click it again we’ll slideUp to hide the sub-categories again.
    And there we have it! Of course you can add some CSS to give it styling, but it’s not required to make this feature run. You can check out the demo at jsFiddle and you can grab the CSS there for base styling if you wish. I’ll eventually update this to have a Demo and an option to download the Source. This is my first article that I needed this option and will have to investigate further to make this happen properly when I have the time :P

Leave your comments if you have any!