When you browse the code in the default WordPress theme, you have no idea what any of it does and you are running out of time. You need a crash course in the worst way. You need the Naked WordPress Theme.

Learn how to theme WordPress with the Naked WordPress theme

The Naked WordPress theme was created by Joshua Beckman to be “The solution for designers who don’t know WordPress”.

This is not your ordinary bare bones theme, stripped of everything but the essentials. Naked WordPress assumes that you know nothing about WordPress and includes comments on all aspects of the theme. Every single piece of the template files is commented so that you can understand what it does. Armed with that knowledge you can safely rearrange and customize your theme. You’ll be able to remove pieces without worrying about deleting something essential.

Here’s a quick example of just how useful the Naked WordPress theme is for beginners. If you’re brand new to WordPress, you probably have no idea what wp_head() does. Naked WordPress clues you in to how important it is so that you don’t screw things up:

1
2
3
4
5
6

<?php wp_head(); 
// This fxn allows plugins, and WordPress itself, to insert themselves/scripts/css/files 
// (right here) into the head of your website. 
// Removing this fxn call will disable all kinds of plugins and WordPress default insertions. 
// Move it if you like, but I would keep it around.
?>

With this kind of commenting built into the theme, there’s no need to look things up in the codex when you’re building in a hurry. The functions are neatly summarized and commented inline to save you time.

Naked WordPress features:

• Responsive styling
• Custom menus
• Custom sidebar and widgets
• Blog, with all the WordPress goodies we know and love (comments, categories, tags, etc.)
• Pages, Home page

Of course, reading up on the codex and learning all the ins and outs of WordPress theming is highly recommended if you want to be able to expertly navigate it and create your own themes. However, if you’re more interested in designing the theme than building it, then the Naked Theme will help to keep things moving while you’re still learning WordPress. It functions as both a starter theme and a crash course all in one.

Download the Naked WordPress theme for free from its homepage and follow the project on github. If it helps you build something, consider showing a little love to the developer by way of a donation.

photo credit: emanuela franchini via photopin cc

Related posts:

1. The Rankings: 90 Most Popular Premium WordPress Theme Designers The most popular WordPress design shops are ranked from 1...
2. WordPress Theme Team Releases Free Underscores Starter Theme Using the Underscores starter theme just got a little easier....
3. 7 Free, Modern Starter Frameworks for WordPress Designers Get a rundown of the 7 best free WordPress frameworks...

It’s pretty much a win-win for everyone. If you’re happy with the free theme, then carry on with it. It you want more functionality (or support in many case), then you’ll need to upgrade to a paid option.

At the very least, free themes let you check out a designer’s work from the inside with zero pressure involved. And so all in all, free themes from professional theme developers are a good thing.

But where do you find all those great themes? Many times they’re buried all over the web in the cracks and crevices of the developers’ websites themselves. Often, you don’t even know if a theme is free or not until you click and click and click and then finally get to a page that says, “Yes, this theme is free.”

But fret no more. We’ve got you covered in this post. We’ve gone out to the most popular theme developers in the WordPress world and searched out their free offerings. You’ll find them below.

Happy theming.

1. WooThemes – Swatch

DOWNLOAD | DEMO

2. WooThemes – Skeptical

DOWNLOAD | DEMO

3. WooThemes – The Morning After

DOWNLOAD | DEMO

4. WooThemes – Bueno

DOWNLOAD | DEMO

5. WooThemes – Rockstar

DOWNLOAD | DEMO

6. WooThemes – Mainstream

DOWNLOAD | DEMO

7. WooThemes – Meta Morphosis

DOWNLOAD | DEMO

8. WooThemes – Irresistible

DOWNLOAD | DEMO

9. WooThemes – Blogtheme

DOWNLOAD | DEMO

10. WooThemes – Typebased

DOWNLOAD | DEMO

11. WooThemes – Snapshot

DOWNLOAD | DEMO

12. WooThemes – Premium News

DOWNLOAD | DEMO

13. Colorlabs – Lensa

DOWNLOAD | DEMO

14. Colorlabs – Photogram

DOWNLOAD | DEMO

15. Colorlabs – Leatherly

DOWNLOAD | DEMO

16. Colorlabs – TumblePress

DOWNLOAD | DEMO

17. Colorlabs – RPG.cod

DOWNLOAD | DEMO

18. Colorlabs – Wellblog

DOWNLOAD | DEMO

19. Templatic – Video

DOWNLOAD | DEMO

20. WPZoom – Meeta

DOWNLOAD | DEMO

21. WPZoom — BonPress

DOWNLOAD | DEMO

22. WPZoom – Photoria

DOWNLOAD | DEMO

23. WPZoom – Academica

DOWNLOAD | DEMO

24. PageLines – PageLines Theme

DOWNLOAD | DEMO

25. PageLines – Platform

DOWNLOAD | DEMO

26. iThemes – December

DOWNLOAD | DEMO

27. iThemes – Quick Vid

DOWNLOAD | DEMO

28. Theme Junkie – Table

DOWNLOAD | DEMO

29. Theme Junkie – Channel

DOWNLOAD | DEMO

30. Theme Junkie – Fashion Press

DOWNLOAD | DEMO

31. ThemeFuse – Gadgetry

DOWNLOAD | DEMO

32. Gabfire Themes — Snapwire

DOWNLOAD | DEMO

33. WPShower – Paragrams

DOWNLOAD | DEMO

34. WPShower – Expositio

DOWNLOAD | DEMO

35. WPShower – Imbalance

DOWNLOAD | DEMO

36. WPShower – Imbalance 2

DOWNLOAD | DEMO

37. WPShower – Sight

DOWNLOAD | DEMO

38. WPShower – Suburbia

DOWNLOAD | DEMO

39. WPShower – Blogum

DOWNLOAD | DEMO

40. WPShower – Portfolium

DOWNLOAD | DEMO

41. Graph Paper Press – Snaps

DOWNLOAD | DEMO

42. Graph Paper Press – Retouch

DOWNLOAD | DEMO

43. Graph Paper Press – Mixfolio

DOWNLOAD | DEMO

44. Graph Paper Press – Mansion

DOWNLOAD | DEMO

45. Graph Paper Press – Work-A-Holic

DOWNLOAD | DEMO

46. Graph Paper Press – Fullscreen

DOWNLOAD | DEMO

47. Graph Paper Press – F8 Static

DOWNLOAD | DEMO

48. Graph Paper Press – F8 Lite

DOWNLOAD | DEMO

49. Graph Paper Press – Modularity Light

DOWNLOAD | DEMO

50. Graph Paper Press – Monochrome Pro

DOWNLOAD | DEMO

51. Graph Paper Press – Berlin

DOWNLOAD | DEMO

52. Graph Paper Press – Gridline

DOWNLOAD | DEMO

53. Themify – iTheme2

DOWNLOAD | DEMO

54. Themify – Koi

DOWNLOAD | DEMO

55. OrganicThemes – Verbage

DOWNLOAD | DEMO

56. OrganicThemes – Structure

DOWNLOAD | DEMO

57. InkThemes – InfoWay

DOWNLOAD | DEMO

58. InkThemes – Poloray

DOWNLOAD | DEMO

59. InkThemes – Local Business

DOWNLOAD | DEMO

60. InkThemes – Blackbird

DOWNLOAD | DEMO

61. InkThemes – Figero

DOWNLOAD | DEMO

62. InkThemes – Squirrel

DOWNLOAD | DEMO

63. InkThemes – Andrina Lite

DOWNLOAD | DEMO

64. InkThemes – Cloriato Lite

DOWNLOAD | DEMO

65. InkThemes – Dzonia

DOWNLOAD | DEMO

66. InkThemes – Themia Lite

DOWNLOAD | DEMO

67. InkThemes – Colorway

DOWNLOAD | DEMO

68. InkThemes – ToomMorel Lite

DOWNLOAD | DEMO

69. Bavotasan – Gridiculous

DOWNLOAD | DEMO

70. Bavotasan – Snowblind

DOWNLOAD | DEMO

71. Bavotasan – Feed Me, Seymour

DOWNLOAD | DEMO

72. Bavotasan – Magazine Basic

DOWNLOAD | DEMO

73. Theme Hybrid – Ascetica

DOWNLOAD | DEMO

74. Gorilla Themes – Mountain Creek

DOWNLOAD | DEMO

75. Obox – Selecta

DOWNLOAD | DEMO

76. Obox – Casual

DOWNLOAD | DEMO

77. ThemeShift – Decente

DOWNLOAD | DEMO

78. ThemeShift – Destyle

DOWNLOAD | DEMO

79. Up Themes – Gallery

DOWNLOAD | DEMO

80. CyberChimps – CyberChimps Theme

DOWNLOAD | DEMO

81. CyberChimps – Neuro

DOWNLOAD | DEMO

82. CyberChimps – Business Lite

DOWNLOAD | DEMO

83. CyberChimps – Response

DOWNLOAD | DEMO

84. CyberChimps – iRibbon

DOWNLOAD | DEMO

85. CyberChimps – iFeature

DOWNLOAD | DEMO

86. CyberChimps – Responsive

DOWNLOAD | DEMO

87. Themes Kingdom – Tint

DOWNLOAD | DEMO

88. Themes Kingdom – Widely

DOWNLOAD | DEMO

89. Themes Kingdom – Danko

DOWNLOAD | DEMO

90. NattyWP – GreenFreshart

DOWNLOAD | DEMO

91. DevPress – Zenith

DOWNLOAD | DEMO

92. DevPress – Cornrows

DOWNLOAD | DEMO

93. DevPress – Cinnamon

DOWNLOAD | DEMO

94. DevPress – Murmur

DOWNLOAD | DEMO

95. DevPress – Sonorous

DOWNLOAD | DEMO

96. DevPress – Quiescent

DOWNLOAD | DEMO

97. DevPress – Cascade

DOWNLOAD | DEMO

98. DevPress – Fanwood

DOWNLOAD | DEMO

99. DevPress – Good

DOWNLOAD | DEMO

100. DevPress – Dotos

DOWNLOAD | DEMO

101. Theme Furnace – Clear Response

DOWNLOAD | DEMO

102. VandelayDesign – Versatile Church

DOWNLOAD | DEMO

103. VandelayDesign – Classic Photography

DOWNLOAD | DEMO

104. VandelayDesign – Zion Church

DOWNLOAD | DEMO

105. VandelayDesign – Auto Focus

DOWNLOAD | DEMO

106. VandelayDesign – Simple Style Photography

DOWNLOAD | DEMO

107. VandelayDesign – Blogfolio

DOWNLOAD | DEMO

108. VandelayDesign – Oversized Photography Theme

DOWNLOAD | DEMO

109. VandelayDesign – High Resolution Photography

DOWNLOAD | DEMO

110. VandelayDesign – Minimal Non-Profit

DOWNLOAD | DEMO

111. VandelayDesign – Green Grunge Church

DOWNLOAD | DEMO

112. Gavick – Meet GavernWP

DOWNLOAD | DEMO

113. Theme Horse – Clean Retina

DOWNLOAD | DEMO

114. Theme Horse – Attitude

DOWNLOAD | DEMO

115. Alien WP – Oxygen

DOWNLOAD | DEMO

116. Alien WP – Hatch

DOWNLOAD | DEMO

117. Alien WP – Origin

DOWNLOAD | DEMO

118. Bluchic – Adelle Theme

DOWNLOAD | DEMO

119. DerPrinz – Branford Magazine Free

DOWNLOAD | DEMO

120. Kreative Themes – BrightSky

DOWNLOAD | DEMO

Photo: Vector gold frame on a easel from BigStock

Related posts:

1. Download a Free Responsive WordPress Theme from Graph Paper Press Graph Paper Press has now added responsive WordPress themes to...
2. 30 Free Business WordPress Themes Need a theme to highlight your business? We’ve got 30...
3. The Rankings: 90 Most Popular Premium WordPress Theme Designers The most popular WordPress design shops are ranked from 1...

However, searching for WordPress themes on Google is not the best solution, and this is where premium theme providers come into play. In this article, I shall be taking a closer look at some of the leading premium theme makers for WordPress. 

Why Use a Premium Theme

The benefits of using premium themes over free ones are many. Often, even the best free themes are found lacking in features as compared to premium ones. Not only do premium themes have cleaner code and better features, they also come with proper support and documentation to help you out just in case something does not work.

Naturally, if you are serious about blogging and your budget allows for it, you should consider a premium theme for your blog.

However, when it comes to picking a premium theme, the choices can be overwhelming. There are several theme makers out there — both good and bad. So, how does one decide which provider to trust? This is precisely what I shall attempt to answer in this article.

The Big Names

Before talking about the major theme providers, let us first get a bird’s eye view of each, shall we?

Note: Click the image for a larger preview.

Breaking it Down…

1. WooThemes

WooThemes is, arguably, the leading theme provider when it comes to premium WordPress themes. Some years back, WooThemes also used to offer themes for CMSs such as Expression Engine, though of late they have been focusing primarily on WordPress.

Apart from themes, WooThemes also offers a good selection of plugins and their in-house eCommerce tool named WooCommerce. However, WooThemes began as, and is still known as, a premium theme maker before anything else.

And what exactly does their collection consist of? As of now, there are almost 84 themes in their collection, and the number increases nearly every month. Out of the entire catalog, 16 themes are free. The themes cater to a wide genre of websites, such as portfolio, corporate, magazine and even tumblogs.

The general pricing for individual themes is approximately $70 (there is a 30-day money back guarantee). Though if you are opting for WooThemes, a Club Membership makes much more sense and also gives you access to all the themes.

WooThemes offers extensive documentation, support videos and also has its own help desk for your queries.

Pricing:

• Standard Membership: $20 per month ($125 startup fee)
• Developer Membership: $25 per month ($200 startup fee)

2. Elegant Themes

Elegant Themes is another extremely popular provider. It may also be the most budget-friendly. Just like WooThemes, Elegant Themes also has a plugins section, though once again, the themes collection outweighs the plugins.

As of now, the collection stands at 81 themes (none free, by the way), and Elegant Themes claims to have over 176,000 customers.

There is not an option to select just one theme, though you will not really miss that option either — the Club Membership fees is just $39 per year for a Personal License.

Elegant Themes offers extensive and direct contact-based support to its users, but unlike WooThemes, they do not have the detailed videos, separate pre-sales FAQ, etc. Plus, in my opinion, a good number of their themes look identical in terms of features, settings and appearance — it may be just me, but Elegant Themes seems to lack the diversity that exists in the offerings by WooThemes.

Pricing:

• Personal Membership: $39 per year
• Developer Membership: $89 per year
• Lifetime Access: $249 one-time (no annual fee)

3. StudioPress

StudioPress is well known for its Genesis Framework. In fact, StudioPress offers both free and premium themes, though you will need to purchase the Genesis Framework for the free child themes as well.

The collection of themes is huge, and it is backed by another plethora of themes released by the community. Genesis Framework is well known for its customization tweaks, and Studio Press’ collection of themes will not disappoint you either.

The Genesis Framework itself costs $59.95, and if you intend to buy a single theme from the collection, you can get the theme, plus the framework, for around $70 to $80. There is only one Club Membership model, named Pro Plus.

In terms of support, there is a separate help section for theme buyers, and pre-sales questions can be sent using the contact form on the website. There are also tutorials for customers as well as certain code snippets.

Pricing:

• Pro-Plus All Theme Package: $349.95 (does not include community-made themes)

4. WPZOOM

WPZOOM has a slightly smaller collection of themes as compared to the likes of WooThemes or Elegant Themes. As of now, WPZOOM offers over 40 themes (including some free ones).

In spite of having fewer themes, WPZOOM seems to be growing well and has established a reputation for itself in the premium themes’ market. The support options are plenty, including pre-sales FAQ, documentation, tutorials and forums. WPZOOM also has its own Customization Team that can help you get the most out of your themes.

Their pricing scheme is one of the most clearly defined out there: you can opt for a single theme, which will cost you $69 per theme, including a bonus theme, (or $149 for the Developer version, including PSD and 2 bonus themes). The Club Membership models are as follows:

Pricing:

• Standard Membership: $9 per month ($199 signup fees)
• Developer Membership: $19 per month ($299 signup fees)

5. Graph Paper Press

Graph Paper Press creates WordPress themes and eCommerce plugins especially meant for photographers and creative artists. Currently, GPP offers nearly 40 themes (including some good free ones, such as MixFolio).

Apart from WordPress themes and plugins, Graph Paper Press also offers WordPress hosting for its users — the $35 per month plan offers nightly backups, several premium themes, and many other features.

In terms of the theme collection, as mentioned above, the primary target audience includes photographers and other artists. Naturally, the themes belong mainly to the “portfolio” genre.

The pricing is rather simple: you can either purchase a single theme for $75 (with one year of support and tutorial access). Alternatively, you can go for the Club Memberships (all themes and plugins plus video tutorials), which are as follows:

Pricing:

• Annual Plan: $125 per year
• Forever Plan: $299 one-time

6. Organic Themes

The sixth theme provider on our list, Organic Themes, currently has over 47,000 customers. Obviously, it is a well known name, which is perhaps most famous for its Structure theme.

You can purchase individual themes for $69, or opt for the membership for $249. Detailed documentation, resources and tutorials are available for customers.

Sadly, the pricing model is too confusing: there is no direct page explaining the details of club membership (such as what you get, what you do not get), and if you click on the Club Membership link, it simply takes you to checkout.

Pricing:

• Developer Pack: $249

7. Obox Design

Just like many other providers on this list, Obox Design also offers both themes and plugins. The collection of themes, though not actually mind-blowing, has many good designs (including some free ones). Interestingly, a good section of Obox’s themes caters especially to video bloggers.

Support is offered via forums and documentation. The pricing is simple: you can either go for the single pack, which costs $60 and has 2 themes, or the Developer Pack which costs $120 and has 3 themes. Alternatively, you can decide to purchase a membership for $140.

Pricing:

• Club Membership: $140 for entire collection ($15 recurring per month)

8. ColorLabs & Company

ColorLabs has various themes catering to a wide spectrum of niches, such as eCommerce, real estate, classifieds, job listing sites and even social networks. Beyond that, ColorLabs also offers free themes and plugins.

ColorLabs also offers detailed one-on-one first-time installation support, as well as tutorials and documentation.

The pricing for individual themes varies, with framework themes costing $69 whereas standard themes can be priced either $49 or $59. There are three club memberships available: Enterprise Bundle for 13+ eCommerce themes, Mega Bundle for 29+ multipurpose themes, and Framework Bundle for 10+ backbone and child themes.

Pricing:

• Enterprise Bundle: $79 (renewal: $59 per year)
• Mega Bundle: $99 (renewal: $79 per year)
• Framework Bundle: $89 (renewal: $69 per year)

9. Theme Furnace

Owned by Kooc Media Ltd, Theme Furnace is a relatively newer player in the premium theme providers’ market.

Considering the fact that Theme Furnace is not as old as others in this list, the number of themes in the collection is slightly fewer. There are around 10 themes as of now, including a couple for free ones.

The pricing for individual themes is $49, whereas the Developer Club Membership costs $99 per year.

Pricing:

• Developer Club Membership: $99 per year

10. DevPress

DevPress primarily offers themes built using the Hybrid Core framework. Almost all the themes are responsive and light-weight. The number of themes in the collection is not high, though — as of now, there are 12 themes in total.

Support is offered only using the forums and not through email, though pre-sales questions can be sent via email.

Pricing:

• Club Membership: $40 per year

11. WPMU DEV

WPMU DEV offers much more than just themes: a membership entitles you to over 160 themes. I guess that should be enough to impress anyone, right? Well, if not, you also get over 140 plugins and unlimited, live and manual support.

A single theme costs $19, and the membership costs $39.50 for new members per month. In terms of usage, WPMU DEV’s themes serve a wide audience: you have magazine themes, blogging themes, corporate and portfolio themes, and even photoblogging themes!

In terms of support, you can get one-on-one replies as and when needed, in addition to detailed tutorials, manuals, docs and videos.

Pricing:

• Full Membership: $39.50 per month

Need Some More?

Before winding it up, how about taking a look at some other names that, though not the leading ones out there, still deserve a mention?

	No. of Themes	Pricing	Affiliate Program	Docs/Manuals	Forums
UpThemes	21+	$39 per year for Standard Membership	Yes	Yes	Yes
Blog Oh! Blog	15	$150 per theme for Developer License	Yes	Yes	No
YOOtheme	30+	€249 for Developer License	No	Yes	Yes
ThemeZilla	20+	Variable (sold via ThemeForest)	No	Yes	Yes
Gabfire Themes	22	$59 Standard License (single theme)	Yes	Yes	Yes
Theme Junkie	30	$149 for Lifetime Membership	Yes	Yes	Yes
The Theme Foundry	12	$200 per year for Pro Membership	No	Yes	Yes
Chimera Themes	15+	$67 per year for Developer Club membership	Yes	Yes	Yes
FlexiThemes	16	$69.90 per year for Club Membership	Yes	Yes	Yes
Gorilla Themes	20+	$49.95 per theme	Yes	Yes	Yes
Aloha Themes	20+	$47 per theme	Yes	Yes	Yes
iDesignEco	20	$49 one-time+$9.99 monthly for Club Membership	Yes	Yes	Yes
Templatic	45+	$299 one-time+$9 monthly for Club Membership	Yes	Yes	Yes

Conclusion

There you have it — a comparison of some of the top premium theme providers!

One thing that really bewildered me while researching this article was the fact that many theme makers did not offer email support. Plus, most of them did not even have a ticketing system in place, and forums were the only medium of offering support (refer to the first table above for details).

Agreed, not everyone has the support staff to provide detailed help via Twitter or live chat, but in my (humble) opinion, your customers deserve more than just a forum! A ticketing system or email support is almost a must-have nowadays — at least that’s what I learned from my tenure in the web hosting industry. Even basic shared hosting customers who are paying $2.95 per month are entitled to email support.

The second interesting point is related to refund policies. WooThemes, StudioPress and a few others offer a generous 30-day refund policy. However, many providers, such as WPZOOM, do not offer refunds due to “the tangible nature of goods being sold.”

Lastly, most of the premium theme providers offer membership clubs for buyers. If you are looking for just one theme for your blog or website, a membership might not appeal to you. However, if you need access to multiple themes, you can opt for a club membership. Apart from gaining access to the entire collection, you also get PSD files for each theme (note that certain theme providers have separate club memberships — in this case, PSD files are available only to developer club members), plus regular updates as well as all future themes. In terms of pricing, you have to first pay a signup fee (one-time), and thereafter a monthly/annual amount. Thus, for WooThemes, you will have to shell out $200 signup fee, followed by $25 per month for Developer Membership (this gives you access to all the themes in the collection, along with PSDs).

What if you cancel mid-way? Most theme providers do not refund the signup fee, though if you have paid the monthly amount for the entire year, and cancel after 6 months, you will be refunded the monthly fee for the remaining six months. For example, if you paid $150 signup fee plus $120 (at $10 per month) for twelve months, and decided to opt out after 4 months, you will be refunded $80 (a total deduction of $150, plus the fee for four months during which you were a club member).

Another useful pricing model is the Lifetime Membership, which requires you to pay a fixed amount up front and gets you lifetime membership benefits. As noted above, Elegant Themes follows this Lifetime Membership model and the pricing is $249 one-time.

Which is your favorite provider when it comes to premium themes? Share your experiences with us in the comments below!

Image Credit: niallkennedy

Discover more related articles:

• Comprehensive Review of 7 of the Most Popular WordPress Premium Theme Frameworks

Related posts:

1. 10 Small WordPress Theme Providers That Pack a Big Punch Check out some of the lesser-known, yet high quality shops...
2. Comprehensive Review of 7 of the Most Popular WordPress Premium Theme Frameworks Feature-by-Feature review of 7 of the most popular WordPress Premium...
3. A free premium theme for every plugin author! As if over $2000 worth of prizes, WPMU fame and...

Introduction

Simply put, tumblogging refers to sharing short and precise posts on one’s blog, generally in the form of multimedia content such as photos and videos. If you wish to blog, but do not have the time or energy to write long posts, tumblogging might be right for you! Furthermore, if you are looking to create a personal blog to share random content that you come across, a tumblog is a good choice. After all, you wouldn’t want to share the odd quote that you read in today’s newspaper on your company’s website, would you?

Beyond that, there is not much of a rigid rule to define tumblogs. Most tumblogs at Tumblr do not have a sidebar, though tumblogs created using WordPress generally have a sidebar nowadays. The only “visible” feature is that all tumblogs distinguish between different “types” or formats of posts: audio, video, chat, quote, image, and so on.

Is WordPress A Good Choice For Tumblogs?

TL;DR: Yes.

We know that the 3.x family of WordPress offers support for custom post formats and types. Naturally, with post formats such as audio, video, gallery and quote, it becomes very easy to create a tumblog using WordPress.

When the first draft of the Twenty Thirteen theme came out, it became clear that the new flagship theme (likely to come bundled with WordPress 3.6 next month) is yet another step towards making WordPress better suited for tumblogs. While it is true that most default WP themes have had support for post formats, Twenty Thirteen is the first in its family that eliminates the default homepage sidebar and relies primarily on post formats for displaying the content. Thus, the WordPress development team is not oblivious to the rising popularity of tumblogging.

Using Post Formats in WP For A Tumblog

Here is how the WordPress Codex describes a post format:

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.

Basically, a post format is what makes your WordPress blog look like a tumblog. WordPress supports various formats, namely, Aside, Gallery, Link, Image, Quote, Status, Video, Audio and Chat.

Adding a post format for a post is fairly easy: just select one from the Editor itself, and you’re done!

Furthermore, WordPress 3.6 will come with even better support for post formats. You can discover the details here.

How About Themes?

A discussion about WordPress is rarely complete without a mention of themes, is it? WPMU has a handy roundup of some of the best tumblogging themes for WP users (oh yes, all free ones!).

That said, just in case you need some more, how about ten more free themes that were not included in the previous roundup?

1. Tetris

Released by WP Explorer, Tetris is a tumblogging WP theme featuring a masonry style homepage. You will need a couple of additional plugins to use this theme, though: Options Framework and Soliloquy. The theme supports seven post formats, has a homepage slider, offers social media icons and is responsive. You will need a free account at WP Explorer in order to download the theme.

Download | Demo

2. Hum

Hum is a child theme of Twenty Eleven. Naturally, it inherits features such as support for post formats, custom background, custom logo, etc. from its parent theme.

Download | Demo

3. Satu

Satu is a single column tumblogging WordPress theme with support for eight post formats. It is responsive, localization ready and offers support for breadcrumbs. Oh, and it is also based on the Hybrid Core framework.

Download | Demo

4. Stitch

Stitch is a colorful WordPress theme. It is responsive and supports multiple post formats. While I will surely not call Stitch minimal, its colorful appearance might indeed appeal to many users. Furthermore, Stitch does not present itself as a tumbloggers’ theme. However, a fixed sidebar and main focus on content, amplified by support for post types and formats clearly makes Stitch a worthy tumblogging theme.

Download | Demo

5. Shortnotes

Shortnotes is a responsive tumblogging theme released by Site5. It is localization ready, offers built-in pagination and also supports Google Fonts. The theme is indeed gorgeous, and I would’ve used it for my own tumblog as well, but when it comes to working out of the box, Shortnotes does not perform really well. In fact, in order to “properly” display a video, you will need to use the custom fields box provided by the theme (if you opt for the standard “drop-link-and-watch-it-work” procedure, your videos will appear out of place).

Download | Demo

6. Publish

Publish is a clean and minimal theme that works entirely out of the box. It supports post formats and can, thus, be used for tumblogging as well.

Download | Demo

7. TumblePress

TumblePress is a responsive theme with support for multiple post formats. It comes with many custom widgets, custom author box as well as custom shortcodes. The theme is localization ready and also offers custom page templates for contact form and sitemap.

Download | Demo

8. Ubert

Ubert supports multiple post formats, and also comes with its own audio player to help you share your favorite tracks on your tumblog.

Download | Demo

9. Quade

Just like Ubert, Quade also supports multiple post formats. In fact, both Quade and Ubert have almost the same amount of functionality (both come from the same stable too).

Download | Demo

10. Garuda Di Dadaku

Garuda Di Dadaku (yeah, unique name, isn’t it?) is a child theme of Twenty Ten. It is not much of a tumblogging theme, though — it has widget areas in the footer, and features too huge a header. However, Garuda Di Dadaku inherits support for post formats from Twenty Ten and as a result, you can use it for your tumblog as well.

Download | Demo

Special Case: WooTumblog Plugin

For quite some time, WooTumblog plugin has served as a popular solution to help you create a tumblog using WordPress. Even to this day, there are certain themes that rely on WooTumblog plugin, such as Casual by Obox Design.

Once activated, you get a separate menu under Posts–>Tumblog Options. You can specify width for image and video previews as well as employ custom RSS feeds. Beyond that, you can easily decide whether to rely on taxonomy for creating a tumblog or post formats.

However, as far as I can tell, the latest versions of WordPress come with native support for post formats and WooTumblog, as a plugin, has lost its utility. While the update frequency is still decent and comparatively better than many other plugins out there, and the functionality of WooTumblog too cannot be doubted, its requirement level has decreased significantly.

Once you have a theme and layout ready for your website, you can easily make use of post formats in WordPress to create a tumblog, without having the need to install WooTumblog plugin. However, WooTumblog plugin can come in handy if you are using a theme that does not offer native support for post formats.

Apart from WooTumblog, there are many other plugins that can help you link your WordPress blog with Tumblr, or model your WP site along the lines of a tumblog. Sarah Gooding has a collection of such plugins here.

Conclusion

Creating a tumblog using WordPress is fairly easy, as all you need is a proper theme that supports post formats (almost every theme released by Automattic or core devs behind WordPress supports post formats).

Are you using WordPress to power your tumblog? Share your experiences with us in the comments below!

*Featured Image Credit

Related posts:

1. Post Formats, Tumblog, and Content Separation by Jeffrey Pearce Jeffrey Pearce is a developer who focuses on PHP and...
2. Pink Touch 2: A Free WordPress Theme with 9 Beautiful Post Formats New high quality theme from WordPress.com now available for free...
3. Twenty Eleven Post Formats – What Are They and Why Should I Care? This week I’m going to be hanging around inside WordPress...

In this article, we shall be taking a look at some of the best free and premium WordPress themes specifically meant for charity groups, churches, and other non-profit organizations. Along the way, we’ll outline some of those special needs these organizations have, and give you a rundown on how each theme stacks up to those needs.

Charities, Churches, and Non-Profits

TL;DR — There are summary tables at the end of the article, comparing the features of each theme. 

WP themes for charities, churches and non-profit organizations have become quite popular — there are some theme makers that create themes meant especially for non-profits!

In this roundup, I have included themes for three separate, though loosely connected, types of websites: charity organizations, non-profit organizations as well as churches or religious bodies. The reason? Themes that cater to either of these organizations generally have a common set of features: fund raisers, custom post types for upcoming events, widgets for donations and sponsors, and so on. Of course, there are certain differences as well, such as special audio post formats for sermons (in case of church themes).

Three Types in One

Before we check out the themes, let me clarify the classification in this article.

First up, you have themes that are meant specially for churches and other religious bodies. Such themes generally make use of custom post types and other tweaks to display information such as sermon times, sermon videos, and so on.

The second category of themes includes those that support a cause. Often, they have a separate section for donations, and by making use of custom widgets, post types and even shortcodes, they help you raise donations for your cause. You can show a sign seeking donations, as well as display the amount generated in the sidebar using a widgets.

The third type of charity themes includes, broadly speaking, all such themes that are meant for non-profits, and may or may not have special features for running donation programs, campaigns, etc. Such themes often follow the corporate/portfolio model: a custom homepage with text areas to help you display information about your organization, as well as separate sections for blog and other useful regions.

Free and Premium

In this roundup, I have included both premium and free themes. I will first begin with premium themes, and once done with the individual features of each theme, we shall put ‘em all together in a table. Thereafter, I shall focus on free themes.

I have attempted to follow a rather minimal and straightforward approach in this roundup. For each theme, be it free or premium, I have listed the major features or USP (unique selling proposition). Common features such as “support for custom menus” or “custom logo upload” have been omitted.

Another thing worth noting is the point related to “Major usage.” Unlike others, “charity themes” is a rather broad genre. You can club religious organizations under charities, alongside humanitarian aid groups as well as environment groups. In some cases, even certain political groups can be termed as non-profits.

Thus, wherever possible, I have attempted to grade or classify each theme under a given usage niche: environment, religious organizations, political groups, etc.

Certain themes, that cater to charity groups as a whole and do not differentiate between environmental groups or religious groups, have been labeled as “Non-profit, charity organizations.”

Premium Themes

1. Green Earth

• Major usage: Environmental organizations
• Responsive design
• Localization ready
• Four separate sliders
• Drag and Drop page builder
• Custom font uploader
• Custom shortcodes
• Pricing: $50 for Regular License

Demo | Purchase

2. The Cause

• Major usage: Non-profit, political causes
• Custom page templates
• 6 custom post types
• WooCommerce ready
• Google Fonts
• Includes custom plugin for sliders
• Pricing: $55 for Regular License

Demo | Purchase

3. WordPress Aid

• Major usage: Fund raisers, charity
• Parallax main slider
• Translation ready
• Custom footer slider for sponsors, etc.
• Custom page templates
• Pricing: $45 for Regular License (10% of proceeds go to UN Fund for AIDS, Tuberculosis and Malaria eradication)

Demo | Purchase

4. Relief

• Major usage: Non-profit, charity organizations
• Responsive design
• 5 color schemes
• Events Management
• Google Fonts
• Localization ready
• Pricing: $40 for Regular License

Demo | Purchase

5. WP-Church

• Major usage: Churches, religious organizations
• Custom audio player and widgets
• 6 color schemes
• Google Maps integration
• Events Calendar
• Pricing: $45 for Regular License

Demo | Purchase

6. Ray of Light

• Major usage: Churches, religious organizations
• Custom homepage with slider
• Custom shortcodes
• Custom widgets
• Localization ready
• Pricing: $40 for Regular License

Demo | Purchase

7. Give

• Major usage: Charity organizations, non-profit
• Responsive design
• Retina-ready
• Custom widgets
• Localization ready
• Pricing: $40 for Regular License

Demo | Purchase

8. WordPress Politico

• Major usage: Political organizations
• Localization ready
• Custom homepage with slider
• Custom page templates
• Pricing: $40 for Regular License

Demo | Purchase

9. Mission

• Major usage: Charity organizations, non-profit
• Responsive design
• Custom post types for Causes, Staff and Events
• Localization ready
• Custom widgets
• Custom page templates
• Contact form included
• Pricing: $45 for Regular License

Demo | Purchase

10. InCare

• Major usage: Environmental organizations
• Responsive design
• Shortcode generator
• Google Maps integration
• Localization ready
• Custom page templates
• Contact form included
• Pricing: $45 for Regular License

Demo | Purchase

11. Non-Profit Theme

• Major usage: Non-profit, Environmental organizations
• Responsive design
• WooCommerce ready
• Google Fonts
• Custom page templates
• Pricing: $69

Demo | Purchase

12. Charity Theme

• Major usage: Charity organizations
• Custom ad zones (header and footer)
• Custom widgets
• Localization ready
• Pricing: $39 for Standard License

Demo | Purchase

13. Hopefull

• Major usage: Non-profit, motivational/Psychology organizations
• Custom hompage slider (uses custom post types)
• Custom widget for Donations
• 5 color schemes
• Pricing: $50

Demo | Purchase

14. Progress

• Major usage: Non-profit, charity organizations
• Responsive design
• Custom widgets
• Localization ready
• Donations section
• Pricing: $49

Demo | Purchase

15. Foundation

• Major usage: Non-profit organizations, fund raisers
• Responsive design
• Custom widgets for Donations, Videos and Sponsors
• eCommerce ready (WooCommerce and JigoShop)
• Pricing: $49

Demo | Purchase

Putting ‘em Together…

And now, before moving on to the free themes, how about we take a final look at all the premium ones?

Free Themes

Now that we have covered the premium themes, let us take a look at 5 free themes as well. When it comes to releasing free themes for WP-powered charity and non-profit websites, Vandelay Design seems to be doing a commendable job. They have numerous free themes meant for churches and other non-profit organizations.

1. Green Grunge

• Major usage: Churches, religious organizations
• Green textured background with grunge border
• Custome homepage template with slider
• Media player for sermons and audio files
• Events calendar

Demo | Download

2. Zion Church

• Major usage: Churches, religious organizations
• Audio and Video support
• Adaptive layout
• 4 color schemes
• Custom homepage with slider
• Events Calendar

Demo | Download

3. Danko

• Major usage: Non-profit organizations, fund raisers
• Custom widgets for advertising, Twitter stream, etc.
• Custom page templates
• Contact form included
• Shortcode generator
• PayPal integration for fund raiser mechanism

Demo | Download (registration required)

4. Stylish Church

• Major usage: Churches, religious organizations
• Custom homepage with slider
• Custom post type for audio posts
• 4 color schemes
• Events Calendar

Demo | Download

5. Simple Non-Profit

• Major usage: Non-profit organizations
• 7 color schemes
• Custom homepage with slider
• Events Calendar
• Custom post type for News/Press Releases, etc.

Demo | Download

Putting ‘em Together…

Here you go — your 5 free themes, head-to-head:

Which of the above themes is your favorite? Have your say in the comments below!

Featured Image Credit: HowardLake

Photo: Arrows on grow from BigStock

Related posts:

1. Niche Showcase: 10 WordPress Themes for Churches Yet another great WordPress niche to find yourself in -...
2. Download the Free Danko WordPress Theme for Charities Check out this beautiful free WordPress theme, designed for charities...
3. Themescroller – An Awesome New Way to Browse WordPress Themes Here's a brand new way to quickly browse WordPress themes...

• one can start from scratch, writing the entire code “by hand”. This is the most time-consuming and, to the best of our knowledge, relatively rarely used method,
• one can take a ready-made WordPress theme (either free or premium) and tweak it until the desired result is reached,
• or one can use what is called a theme framework to save a significant amount of time which would otherwise be spent on writing and testing the same code base over again.

Theme framework is a fancy word for a starter theme that is based on a solid code foundation that comes with built-in generic features such as starter template files, useful scripts, meaningful css, etc. Building up your WordPress theme or website from a framework is probably the most efficient way of streamlining the development process and ensuring that the end result is stable and resilient.

The latter is true because high-quality frameworks boast optimized and fully standards-compliant PHP, HTML, CSS, and Javascript. Add to it the fact that most of the frameworks mentioned in the below list have either extensive documentation or developed support communities, or both – and it becomes clear why so many developers prefer using theme frameworks in their everyday work.

And there’s a cherry on top of it all: all theme frameworks presented here are absolutely free to use and come under a GPL/BSD license!

But Nothing’s Perfect

Nothing’s perfect, and frameworks have certain cons of their own, the most important one being that once a particular framework is chosen, the developer is confined within its capabilities, and adding certain advanced custom features may become less productive than building everything from scratch.

Another aspect worth noting is the initial time investment required to get to know the ins and outs of the chosen framework (e.g. how functions are added and removed, how layouts are constructed, etc.) – and various platforms can approach the same functionality from very different perspectives! However, the time spent on learning to use a theme framework can be recouped within two to three projects, and provide significant efficiency gains in the long run.

A Rundown of the Frameworks

Below I provide an overview of some of the best free starter frameworks, focusing on features, capabilities, security, and support. The majority of them are, quite expectedly, pretty lightweight, minimalistic, and open-source, which is why the primary goal of this article is to highlight the distinguishing characteristics which could help you to decide which particular platform to use in your work.

I’ve also included a comparison table at the end for a more convenient overview.

1. Whiteboard

Visit Whiteboard website →

This is one of the oldest WordPress frameworks, which has been prolonging the life of designers around the world since 2008. It boasts a clean, well-structured, as well as standards compliant code base, and offers more dynamic classes and IDs than most other free and commercial frameworks. Whiteboard includes the Less CSS adaptive grid system which allows creating mobile-ready websites in a snap.

Whiteboard features:

• Widest choice of dynamic classes and IDs
• HTML5 and CSS3 with seamless degradation
• Lightweight and well-structured code
• Supports menu, background, and header management, several widget areas, etc
• Easy to remove unneeded parts
• Built-in Less framework for full mobile support
• Compliant with WordPress development standards
• Compatible with older ( – Cross-browser compatible
• Search engine optimized
• Supports multi-lingual capabilities
• Open source

Whiteboard weaker points:

• Available documentation is quite shallow

Especially recommended for:

Experienced ones who like to feel independent.

2. Underscores

Visit Underscores website →

Based on the popular Toolbox theme, the Underscores, or _s framework is the product of 1000+ hours of testing plus the collective experience of the Automattic team – the guys behind the WordPress software itself. Underscores comes with a multitude of neat features such as sample theme options panel, custom template tags, several pre-formatted layouts, custom header implementation, and useful add-ons called “tweaks” that can be activated easily through the functions.php file.

Underscores features:

• Backed by the experience of the WordPress creators
• Minimalist and well-commented templates
• Standards-compliant HTML5 and CSS3 code
• Easy to add and remove capabilities
• Custom header implementation
• Custom template tags to optimize your code and prevent duplication
• Sample theme options panel
• Custom add-on functions, or “tweaks”
• 5 ready-made CSS-based layouts
• Mobile-friendly, with smartphone-optimized drop-down menus
• Open source
• Theme creator and showcase at Underscores.me

Underscores weaker points:

• Not recommended to use as a parent theme

Especially recommended for:

Fans of Automattic who like to showcase  their creations

3. Bones

Visit Bones website →

This sleek and resilient starter theme is built upon the HTML5 Boilerplate engine which is used by Google, Microsoft, NASA, and many other big fellows. Bones is distinguished by the “mobile-first” approach, which means that devices with smaller screens such as smartphones and tablets are being served only the required minimum, and the content flow is scaled up with the increase in screen size. This can make a huge difference for the mobile users with slower connection speeds, helping you to retain and engage the ever-growing share of the mobile traffic. The theme author offers a great tutorial on TutsPlus on how to get started with Bones.

Bones features:

• Standards-compliant HTML5 and CSS3
• Extremely detailed, clean, and well-commented code
• Mobile-first approach
• Graceful fallbacks for older browsers
• Easy to add and remove features
• WordPress header optimized for speed and performance
• Supports custom post types
• Custom dashboard functions included
• Tuts+ tutorial on working with the theme
• Open source

Bones weaker points:

• Not meant for creating child themes
• Limited support from the authors

Especially recommended for:

Less WordPress-savvy folks with per-project needs.

4. HTML5Reset

Visit HML5Reset website →

A clean and simple “no-frills” starter theme, HTML5Reset offers a style-free framework packed with usefulness to help boost the initial phases of the website/theme development process. Apart from the standard HTML5 and CSS3 goodies, it also features jQuery, Modernizr, and built-in Analytics. What you get as a result is a stable, cross-browser-compatible foundation code for your project needs.

HTML5Reset features:

• Very clean and detailed code, focus on CSS optimization
• Standards-compliant HTML5 and CSS3
• Includes Modernizr the library
• Cross-browser compatible with easy browser-specific classes
• Complies with hNews microformat
• Widget-ready

HTML5Reset weaker points:

• Relatively raw and less-maintained
• Limited documentation and support

Especially recommended for:

Disciples of minimalism who like to build from the ground up.

5. Gantry

Visit Gantry website →

Gantry is a freebie by the RocketTheme dev team which consolidates their extensive theme-building experience into a simple yet powerful starter framework. Apart from the other frameworks listed here, Gantry is compatible with Joomla in addition to WordPress, which extends its usefulness beyond the confines of a single CMS.

This is probably one of the most feature-rich free frameworks, boasting a configurable admin interface, dozens of widgets, built-in extendable AJAX, and many more, making it an extremely flexible instrument, ideal for those who want to “push it to the max.”

Last but not least, the RocketTheme website offers a very detailed set of documents and tutorials on Gantry.

Gantry features:

• Fully responsive based on the 960 Grid system
• Available for both WordPress and Joomla
• Well-structured code optimized for speed and performance
• 38 possible layout combinations
• Multiple built-in custom widgets
• Search engine optimized
• Additional typographical features
• Browser-level JS and CSS control
• 1-click automatic updates
• RTL language support
• Extensive documentation on the developer’s website
• Free child theme available

Gantry weaker points:

• Support forum accessible only to RocketTheme premium subscribers

Especially recommended for:

Daring amateurs who wish to build websites with extended functionality.

6. Hybrid Core and Hybrid

Visit Hybrid website →

The Hybrid Core can be proud of much more than just its Starcraft-style name: it is a modular theme development framework consisting of chunks of php code (controlling e.g. layouts, galleries, images, breadcrumbs, pagers, theme settings panels, etc) which allow the developer to pick and quickly incorporate only the desired features. The creators of Hybrid Core have also prepared an advanced starter theme based on the framework, called the Hybrid.

It may not be as feature-rich as some of the other theme frameworks, yet it does have a multitude of styled child themes in case you wish to start moving in a particular direction right away.

Hybrid features:

• Modular structure for maximum flexibility
• Supports breadcrumbs, galleries, pagers, drop-down menus, etc
• Custom theme settings UI
• Widget-ready, includes 15 custom widgets
• Easy layout creation and per-post layout control
• Search engine optimized
• Translation-ready
• Offers a wide variety of child themes

Hybrid weaker points:

• The theme is not responsive (mobile-optimized)
• Must have paid membership in the Theme Hybrid club for support

Especially recommended for:

Believers in modular approaches to ..uhm.. everything.

7. Ashford

Visit Ashform website →

The last theme included in this list is called Ashford, and somewhat unlike the others it is a “freemium” product (i.e. having a free and a premium versions), brought to you by Turtle Interactive. The free version is a CMS framework which enhances the WordPress experience for web developers by adding more features and flexibility compared to the WordPress.org default. The paid plan adds several interesting features such as mega-menus, layout builder, and mobile support. Since other theme frameworks offer some of the above for free, Ashford can be recommended for those who can really utilize all its premium features.

Ashford features:

• CMS framework enhancing the generic WordPress core
• 33 customizable theme options
• 18 custom page templates
• Focus on page load speed
• Widget-ready
• Advanced blogging features including social sharing, related posts, RSS comments
• Search engine optimized

Ashford weaker points:

• Certain features such as mega menus and mobile support available only in the paid Pro version

Especially recommended for:

Those who are ready to pay for the Pro version.

Comparison Summary

Conclusion

I have provided an overview of the seven most widely used free theme frameworks to speed up custom WordPress website and theme development. Given that all of them are free, developers gain savings both in terms of time and money, and receive the possibility to leverage their everyday work on the effort and expertise that have been put into creating these handy tools. The preference towards a particular platform is often driven by relatively subtle things like the desired level of CSS granularity or the approach to adding and removing new functions.

On a very general level, however, the best piece of advice is probably to try to match the complexity level of the framework with the requirements of the present and possible future projects. Just to give a couple of examples: in case you need a foundation to create websites for individuals and small businesses, themes like Bones and HTML5Reset would be a sensible choice; if, however, you are planning to build a complex WordPress theme for someone or (especially) for resale, you’ll find Gantry, Hybrid, and Whiteboard as more valid alternatives.

As a matter of disclosure, I am personally using Whiteboard in my work, mostly because it strikes a decent balance between being lightweight and offering all required features to suit my needs (I design and sell premium themes under the Satori Studio brand) – but maybe also because I never felt an urge to shift after having spent my time on getting to know it.

As with anything, each of the theme frameworks listed here has its own drawbacks, yet also something great and unique to offer – the ultimate choice is yours!

The metal framework image is courtesy of TschiAe on Flickr.

Related posts:

1. Free WordPress Frameworks for Designing Your Own Child Theme Want to design your own WordPress theme? These frameworks are...
2. The Faults of Theme Frameworks, and How to Fix Them There's a bit of a buzz around theme frameworks and...
3. Theme Force: The WordPress Standard for Restaurant Frameworks If you’re thinking of using WordPress to build a website...

But there’s one facet of RWD that still remains a (properly) unsolved problem. Responsive Images.

Download the source files (twentytwelve child theme).

If you simply use CSS’s max-width: 100%; attribute, mobile sites will still be downloading full size images. That’s an issue, because if your desktop site has images 920px wide, the mobile version will still be downloading this massive image, making loading time slow.

Enter Picturefill

Picturefill is a javascript library that loads the smallest possible image first, and then updates that image on-the-fly depending on the screen resolution it’s being served on.

This works well because for mobile devices, essentially nothing changes. The smallest possible image is loaded quickly.

For Tablets and Desktops, a different source image is specified, and as soon as Javascript kicks in, it will halt the download of the smaller image and swap it out for a more appropriately sized one.

The Syntax

Unfortunately, the syntax for this is rather verbose:

<div data-picture data-alt="Image alt text">
  <div data-src="mobile.png"></div>
  <div data-src="tablet.jpg"        data-media="(min-width: 768px)"></div>
  <div data-src="desktop.jpg"       data-media="(min-width: 920px)"></div>
  <div data-src="large-desktop.jpg" data-media="(min-width: 1140px)"></div>

  <!-- Fallback content for non-JS browsers. -->
  <noscript>
    <img src="mobile.png" alt="Image alt text">
  </noscript>
</div>

That’s a lot of code for just one image! Fortunately, we can create a shortcode for this, so you only have to write it once.

Let’s say we’re replacing the featured image of every post on your blog with this responsive shortcode. Even if you’ve been uploading images for a long time at a certain width, that’s fine. We can use Regenerate Thumbnails to make them the correct sizes. But I’ll get to that later.

Setup

No matter your blog, you can do this on any existing website. I’ll be making a child theme of TwentyTwelve on a fresh installation with several images uploaded at 920px for demonstration purposes. The theory, however, is entirely the same on any website and the code will work on yours too.

Here you can see two cute cats just chillin’. Unfortunately, the size of the image is way larger than necessary. This is going to slow down the page. Maybe not by much, but it’s still unnecessarily large!

Only visible at 1/3 of its actual size, we’re wasting resources!

The solution to that is as I’ve said, Picturefill. But we want to create something reusable, where you don’t have to manually enter each image size every single time you need a responsive image.

So we turn to shortocdes. Ideally, you’d structure a shortcode as so:

[rimg src="http://link-to-the-image.png" caption="This is the caption"]

Simple enough. The only downside is using the “insert into post” feature becomes semi-useless. There is absolutely a hack around it, but I won’t be getting into that today.

Our Image Sizes and Breakpoints

For my TwentyTwelve site, there are several breakpoints, but I’ll be focussing on only 3 image sizes:

• 740px – The largest a desktop image can be
• 540px – The largest an image can be after hitting a ‘tablet’ breakpoint
• 340px – The largest an image can be when at mobile size

We start by adding new image sizes, so that new cropped thumbnails are created every time a new image is uploaded.

Open up the functions.php file of your theme, or create it in your new theme and add the following lines:

<?php

/*
 *  Custom image sizes for responsivity.
 */

add_image_size('resp-large', 720, 9999);
add_image_size('resp-medium', 520, 9999);
add_image_size('resp-small', 320, 9999);

Now, every time a new image is uploaded, a version at each size specified will be created. The 9999 parameter is the height, and setting it to this allows for unlimited height.

But what about all my old images?

No problem. Like you, I’ve uploaded images for this tutorial that do not yet have thumbnails at these sizes.

Enter Regenerate Thumbnails. It’s a handy plugin that goes through every single image you’ve ever uploaded, and regenerates thumbnails based on images sizes currently set for your site.

Go to the page, and hit “Regenerate All Thumbnails.” You’ll be presented with a progress bar as your thumbnails get regenerated to all the correct sizes. If you’re doing this live and have a lot of images, this could take some time.

Now we’ve got images at the correct sizes, it’s time to put them to use.

Installing Picturefill

Just like any Javascript library you install to your theme, we have to add the Picturefill script to the wp_enqueue_scripts() hook. Go ahead and download Picturefill (right click, save target as), and place it in your theme folder.

If you’re familiar with enqueuing scripts, you should know how this goes. If not, copy the code below into your functions.php file just below the add_image_size() functions.

/*
 *  Enqueue Picturefill to the front-end
 */

function add_picturefill(){
  wp_enqueue_script(
    'picturefill',
    get_bloginfo('stylesheet_directory').'/picturefill.js' );
}

add_action('wp_enqueue_scripts', 'add_picturefill');

Our custom function add_picturefill() enqueue’s the script. To enable it, however, we need to hook into “wp_enqueue_scripts” using add_action().

If you save and refresh, and view the source of your page, you should be able to find the picturefill script nicely included in the <head>

Now that’s there, we have to build something reusable that will automatically generate responsive images without having to write out the overly verbose code for each image.

Responsive Image Shortcode

Shortcodes come to the rescue! Shortcodes are cool. They are basically a way to build custom ‘elements’. Read up a little bit about them if you’re unaware of them.

Our shortcode is going to look like this:

[rimg src="http://link-to-full.size/image.png caption="This will be the alt and caption"]

Easy enough, right? Considering it will spit out a completely responsive image, I think shortcodes are a godsend.

Our shortcode function will do a number of things, in order.

1. Check if an image source URL is present
2. Retrieve ID of image from source URL
3. Retrieve different image sizes URLs from ID
4. Return the correct HTML structure for Picturefill with image URLs
5. Check if caption is present, and if so spit out the caption

The Code

Now this presents one big problem- how do we get all the other image sizes just from a URL? Ideally we want an ID, but it makes more sense to input a URL, right?

That’s cool. I’ve researched a nifty little function that will return the ID of an image when you provide the original image url. If you try to pass a thumbnail image, it won’t work. Regardless, here’s the snippet that you should drop into your functions.php.

/*
 *  Get image ID from URL
 */

function get_attachment_id_from_src($url) {
  global $wpdb;
  $prefix = $wpdb->prefix;
  $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM " . $prefix . "posts" . " WHERE guid='%s';", $url ));
    return $attachment[0];
}

I wish WordPress had a built in function for this kind of stuff. It’s pretty nasty (looking) code, but it’s essentially a database query that looks in the posts table (where image attachments are stored) for the ID, and returns the first result.

Back to the shortcode. To prove this function works, we’ll build the start of our shortcode, and then use it in a post. Drop the following into your functions.php file after the get_attachment_id_from_src() function.

/*
 *  Responsive shortcode
 */

function responsive_image($atts){
  extract( shortcode_atts( array(
    'src' => '',
    'caption' => '',
  ), $atts ) );

  return get_attachment_id_from_src($src);
}

add_shortcode('rimg', 'responsive_image');

If you’re not familiar with the Shortcode API, this is the code for creating a self-contained shortcode. The add_shortcode() function looks very similar to the add_hook() function, which makes understanding it very easy.

The tricky bit is to wrap your head around is lines 2-5 of the function. The extract() function basically presents us with our defaults if nothing is supplied. Which hopefully it never is. But we can use this empty string to test whether to output the image code later.

Finally, the return line uses our helper function to output the ID of an image URL.

In practice

I’ve gone ahead and used a shortcode that we’ve just created.

And if we look on the front-end of that post, instead of seeing a shortcode, we see an ID! Great!

Getting the Different Sized URLs

Now that we’ve got a function that returns an image ID from URL, we can start building the Picturefill HTML code around it. Update your responsive_image() function to look like this:

function responsive_image($atts){
  extract( shortcode_atts( array(
    'src' => '',
    'caption' => '',
  ), $atts ) );
  if($src != '')
  {
    $img_ID = get_attachment_id_from_src($src);
    $large = wp_get_attachment_image_src( $img_ID, 'resp-large' );
    $medium = wp_get_attachment_image_src( $img_ID, 'resp-medium' );
    $small = wp_get_attachment_image_src( $img_ID, 'resp-small' );

    $output = $src;
  }

  return $output;

}

Here, all we’re doing is getting different sized image URLs. We’ve now got the following variables available to us:

• $image_ID
• $caption
• $src
• $large
• $medium
• $small

And the shortcode will now output the URL we specified when writing it.

The Picturefill Code

At long last, we’re ready to output some HTML that will end up as our responsive image. Since it’s a shortcode, we need to return everything, instead of echo it.

Here’s a handy tip. When you want to return large variables, you can add a period into the mix to add to an array.

Have a look at this:

$output = "Hello ";
$output.= "World!";

echo $output;

//echos "Hello World!"

Cool huh? So we can use this in our shortcode function to output clean HTML. Here’s the updated function, it’s big but it’s really just adding the HTML.

function responsive_image($atts){
  extract( shortcode_atts( array(
    'src' => '',
    'caption' => '',
  ), $atts ) );
  if($src != '')
  {
    $img_ID = get_attachment_id_from_src($src);
    $large = wp_get_attachment_image_src( $img_ID, 'resp-large' );
    $medium = wp_get_attachment_image_src( $img_ID, 'resp-medium' );
    $small = wp_get_attachment_image_src( $img_ID, 'resp-small' );

    $output = '<div class="responsive-image">';
    $output = '  <div data-picture data-alt="' . $caption . '">';
    $output.= '    <div data-src="' . $small[0] . '"></div>';
    $output.= '    <div data-src="' . $medium[0] . '" data-media="(min-width: 786px)"></div>';
    $output.= '    <div data-src="' . $large[0] . '" data-media="(min-width: 920px)"></div>';
    $output.= '    <div data-src="' . $src . '" data-media="(min-width: 1140px)"></div>';
    $output.= '    <noscript>';
    $output.= '      <img src="' . $small[0] . '" alt="' . $caption . '">';
    $output.= '    </noscript>';
    $output.= '  </div>';
    if($caption != '') $output.= '  <p class="caption">' . $caption . '</p>';
    $output.= '</div>';
  }

  return $output;

}

That’s a whole lot of code, but all we’ve really added is the $output variable.

If you refer from the top of this post, it echoes the syntax Picturefill requires to work. The only difference is we’re replacing the image URLs with out dynamically retrieved thumbnails. At the end, there is a conditional statement that prints a caption if it’s necessary.

Right now, you have a perfectly working responsive shortcode to use!

If you drag your window wider and wider, and inspect the <img> element that is displayed, the src changes as you hit break points!

Sweet! Truly responsive images, that will take up the least amount of bandwidth possible.

What About My Featured Images?

No stress. You’re going to have to dig around your theme files a bit, to look for the_post_thumbnail(), or whatever code spits out your post thumbnail. In the case of TwentyTwelve, it’s in the content.php file (which I’ve overridden with a child theme).

Replace

<?php the_post_thumbnail(); ?>

with

<?php
  $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'original' );
  $url = $thumb['0'];
  echo do_shortcode( '[rimg src="' . $url . '"]' );
?>

And you’ll instantly have responsive featured images too!

If this doesn’t work and your images are blown out, remember to use Regenerate Thumbnails to regenerate your images at the right sizes.

And that’s it! If you wish to download the source code, I’ve zipped up the TwentyTwelve Child Theme I created during this tutorial.

Responsive Images are a great way to save bandwidth, stay up with the curve and keep your readers happy with short loading times. Hopefully, the proposed < picture> element will make the final spec, so minimal changes will be need to made to this code in order for it to stay up to standards.

If you have any questions, feel free to ask below!

Related posts:

1. 16 Cool Responsive WordPress Plugins for Images and Videos Ensure that your WordPress media displays properly on all devices....
2. How to Use a WordPress Shortcode Outside of the Post Editor Here’s a handy tip from the codex. If you want...
3. How to Include or Exclude Images From the WordPress Gallery Use these simple shortcode options to customize your WordPress gallery....

With that in mind, there aren’t many posts around that teach you how to make an app. I thought I’d start with the compulsory “How to make a to-do list app using WordPress!” It even works across all platforms- that’s right. Mobile, Tablet and Desktop!

There is a Demo page (username: user, password: notes) where you can see and play with what we’ll be creating. You can download the source theme too, and install it yourself. Or you can follow this tutorial.

A bit of Theory

Many web app frameworks these days use MVC or MVVM structure. WordPress has its own unique structure to handle data, but there’s no reason we can’t take some concepts and apply them ourselves. I’m talking about separating logic, event driven functions and views.

WordPress is a good starting point because it provides a plethora of APIs for us to leverage. We’ve got Authentication, User Roles, Sanitisation, and Content Types out-of-the-box, to name a few. We don’t have to worry about admin screens. If you’re creating a complex app, you don’t even have to worry about meta boxes, taxonomies, or dealing with image upload.

The approach we’re going to take is simple. I’ve built a starter theme (with CSS, and basic WP/JS functionality) for you to begin with. The code you’ll write in this tutorial will be separated into mainly Javascript (main.js), and WordPress logic (ajax-actions.php). This separation of code allows us to create a flexible yet well structured app.

To bring you up to speed

The focus of this tutorial isn’t to show you how to design an app, but to build it with AJAX. I’ll be showing you how to identify and deal with individual events, how to capture the data from them, post them to the WordPress database, and handle the response. All without ever going into wp-admin!

The starter theme I’ve put together for you is just a skeleton without any functionality. The entire UI is done for you (buttons, style, drop down menus, modal boxes), all that’s left to do is the heavy lifting, that is dealing with and saving data, and updating the UI based upon the response from WordPress. I’ve included Mustache.js and the templates we’ll be using (in footer.php), along with enough WordPress code to display a list of all posts and users currently in the database upon first load.

Data flow in a single page web app

Let’s examine the diagram from just above.

Here you can see our data is passed from the UI when a user submits data. Javascript interprets the UI input, and sends it to PHP as data. The PHP does the work of inserting the data into the WordPress database. When WordPress is happy, PHP tells Javascript the data is saved. Javascript then updates the UI for the user to recognise it all went smoothly.

In terms of Javascript, there are 4 important functions missing from the starter theme that we’re going to build. They are:

1. UI interaction (user actions)
2. UI requests (when a user submits data)
3. AJAX requests (sending the data to WordPress code)
4. AJAX response (handling the response we get back from WordPress)

In terms of WordPress and PHP code, we’re missing all the actions that handle the AJAX requests from the client. I’ll identify them for you in a second, but first get a new WordPress install up and running, and install the starter theme.

If you don’t know how to set up a WordPress blog, the Codex has a handy tutorial. Let’s hope you do though! This is quite an advanced tutorial.

The base theme

User Interactions

With the UI installed, four actions jump out to me immediately. I’ve circled them below.

1. Clear All Posts
2. Add User (therefore delete user too)
3. Delete Post
4. Add Post

Other actions are visible by interacting with the UI, “update post”.

We’re going to use jQuery’s powerful event engine to pick up on each of these interactions, and capture the data related for use in the database. If you quickly open footer.php and look at line 26, you’ll notice each link (button) has 3 sets of data: data-modal, data-action, and data-id.

<a ... data-modal="" data-action="update-post", data-id="{{id}}">update</a>

With jQuery, we can grab this very easily so we know (in this case) which modal box to open (if any), which action is being called, and what the ID of the item being manipulated is. Let’s quickly look at the data structure and type of users and notes.

To keep it simple, a user will simply be included by their email address. That means a User exists of:

• An ID (integer)
• An Email Address (string)

Posts are simply titles of WordPress posts, broken down to:

• An ID (integer)
• A note (string)

As you can see, the data object is basically identical, which simplifies things for us a little bit. Here’s what our JSON data that gets passed to the server will look like:

{
  action: "action-to-be-called",
  id: 1,
  text: "Email Address or Note"
}

Getting stuck into the AJAX Requests

Now we know a little bit about the data structure we’ll be working with, we need some Javascript functions to process these requests. Open up functions.php, and jump down the file to line 63, and you’ll the comment

//WP LOCALIZE SCRIPT

Just briefly, WordPress has a function called wp_localize_script() that is a helper for multilingual sites. Why does that matter to us? It’s primary purpose is to pass on a language identifier to scripts through the form of a variable attached to the window.

We can use this variable to make the wp-ajax file location available to our scripts, so we have the correct URL to post AJAX requests to. Go ahead and replace the comment with this.

wp_localize_script(
  'main',
  'WP_AJAX',
  array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
);

Save and close functions.php. If you open the WordPress site we’re working on and view source, you’ll see this somewhere in the mix (near the closing </body> element).

/* <![CDATA[ */
var WP_AJAX = {"ajaxurl":"http:\/\/articl.es\/notes-app\/wp-admin\/admin-ajax.php"};
/* ]]> */

In Javascript, this is avaialble to us in the variable

WP_AJAX.ajaxurl

We now have an AJAX URL to post to!

Processing AJAX Requests

Very quickly, we’re going to create our first Javascript function: Processing AJAX requests. Since I’ve packaged jQuery into the starter theme, we’ll be using jQuery’s $.post function to send requests to the server. Once we start detecting actions from the user (next section), we’ll use this function to send the data we collect from the user.

In js/main.js on line 64, replace the

//create processRequest function

with the following.

processRequest: function(data){
  console.log(data);
  $.post(
    WP_AJAX.ajaxurl,
    data,
    Notes.succcessfulRequest
  );
},

We’re extending the Notes object in main.js to include another function “processRequest”. If you’re not a whiz with Javascript, just follow along and copy code examples exactly.

Like PHP, Javascript functions take arguments too, and in our case “processRequest” is taking a variable we’re calling “data”.

console.log(data) logs the data recieved into your browser’s console. We’ll look at this later.

The $.post sends a POST request, and takes 3 arguments. In order they are

1. AJAX URL to post to send data too
2. The data to send to the URL (In object format)
3. A success function to handle the response of the AJAX request

If you’re on the ball, you’ll deduce that we now need a successfulRequest function, since it doesn’t exist yet!

We’ll keep it simple for now, still in main.js replace the

//create successfulRequest function

with

succcessfulRequest: function(jsonResponse){
  alert('Request sent!');

  //change UI based on response from WordPress
},

successfulRequest() takes a variable ‘jsonResponse’, which is what we recieve back from the server. When we get to the PHP, we simply echo what we want to come back in this variable, and this function picks it up.

For now, it will just make a browser alert that tells you the AJAX Request has been sent.

But what is all this useful for?!

Aha. These functions don’t do anything yet, but now they’re in place we’re going to use them to handle UI Interactions. The next function we’re going to create is actually already half there.

Handling UI Actions

On line 55 of main.js, you’ll see the function ‘actions’. At present, this isn’t active, and currently only hides the modal boxes at the bottom of the page in the theme. Go up to line 7 where the comment

//actions call

resides, and replace it with

Notes.actions();

Since this is in the init function (which gets called at the very bottom of main.js once the page has loaded), if you refresh the page the modals will be hidden.

Detecting User Interactions

The “actions” function we’re going to write is to detect when the user clicks an action button. It will collect all the neccessary data, then check if a modal window is required. If it’s not, it will fire off an AJAX request. If it does, it will open up the modal window that relates to the action (dictated by the data-modal attribute we saw earlier).

On line 58, go ahead and replace the comment with the following code.

$('.action').on('click', function(e){

  e.preventDefault();

  var action = 'notes-' + $(this).data('action');
  var modal  = $(this).data('modal');
  var id     = $(this).data('id');
  var text   = $(this).parent('li').find('input').val();

  var data = {
    action: action,
    id: id,
    text: text
  };

  if( modal === "" ){
    Notes.processRequest(data)
  } else { //if a modal is required }
});

If you’re familiar with jQuery, you’ll know what this does. The “.on()” function tells jQuery to call the following function every time the ‘.action’ class (our action button) is clicked.

e.preventDefault() stop the URL changing.

The following four variable declarations pick up all the data we need to process the request.

It specifies the “action” that will be executed on the server as “notes-action-called”. The Modal will either be empty (in the case where no extra input is required), “yn” when a yes/no confirmation is needed, or “invite” in the case of adding a new user to the app. It then builds the data into a JSON object.

The conditional first checks if a modal is required. If not, it then passes the previously built data off to the function we created earlier that processes requests.

Go ahead and refresh your WordPress site, and then click the delete or add icon. You’ll be alerted that your request has been sent! Sweet!

Now we need to handle the else statement, when a modal is required. replace the

} else { //if a modal is required }

conditional with this one.

} else if ( modal != "" ){
  Notes.openNotice(modal, data);
}

This checks if a data-modal attribute is present, and if it is then it passes the modal type and data object to the “openNotice” function.

Your whole actions function should now look like this.

actions: function(){
  $('.notice').addClass('hidden');

  $('.action').on('click', function(e){

    e.preventDefault();

    var action = 'notes-' + $(this).data('action');
    var modal  = $(this).data('modal');
    var id     = $(this).data('id');
    var text   = $(this).parent('li').find('input').val();

    var data = {
      action: action,
      id: id,
      text: text
    };

    if( modal === "" ){
      Notes.processRequest(data)
    } else if ( modal != "" ){
      Notes.openNotice(modal, data);
    }
  });
},

The openNotice function is above the actions function already built for you! Find it on line 35.

Since we’re passing arguments to the function, we have to modify the function to take arguments as well. Change the openNotice() function to accept them.

openNotice: function(noticeClass, data){
  $('.notice:visible').toggleClass('hidden').data('info', '');
  Notes.centreNotice();
  $('.'+noticeClass).toggleClass('hidden').data('info', data);
},

This firstly hides any modals that are visible, and destroys any data attached to it.

It then centres the modals, another function pre-built for you. Finally it finds the modal with the class (specified by the action button’s data-modal attribute) then attaches our data to it. This last step is important as there’s no other way to pass on data to the next event (confirmation or entering an email address to invite or cancel) to then send to the server.

Save your main.js, and refresh the site. Then click an action that requires a modal, i.e. “add user” or “clear notes”. You’ll get a nice little modal window popping up pre-coded courtesy of yours truly.

Sending Requests Based On User Interaction

The last piece of the puzzle is to pass forward requests to processRequest() based on user input into the modals, i.e. a user enters an email address into the invite modal or presses yes on the confirmation one.

That comes in the form of UISendRequest(), a function that listens to the user response on a modal, grabs the data we previously attached to the modal, and then shoot it off to processRequest().

On line 8 of main.js, you’ll see another call commented out.

//UISendRequest call

Modify this similar to line 7, making a call to the UISendRequest function inside init().

Notes.UISendRequest();

Now that it’s being called, we need to actually write the function! Line 80 is another comment, of which we need to replace with a function.

UISendRequest: function(){
  $('.go').click(function(){
    var data = $(this).parents('.notice').data('info');

    Notes.processRequest(data);
    $('.notice:visible').toggleClass('hidden').data('info', '');
  });

  $('.cancel').click(function(){
    $(this).parents('.notice').toggleClass('hidden').data('info', '');
  });
},

This function binds to the click event of the “.go” button and the “.cancel” button. These reside in our modals in footer.php, on line 5, 6 and 12. It looks for the data attached to the modal that the action was called from, processes the request, and then closes the modal and destroys attached data. Cancel closes the modal and destroys the data attached.

Save, and go back to the site and refresh it. Remember how we put console.log() into the processRequest() function? Here is where it comes in handy. If you’re not sure how to bring up your browser console, stackoverflow has a good page to teach you.

The console is basically a log for JavaScript, and any other errors that get spat out by your website’s requests. The function console.log() puts whatever is in between the brackets into the console. Since we put the data variable in there, any time processRequest() gets called it’s going to log the data passed to it.

Here, in the console you can track the actions I’ve taken in the UI.

The first thing I did was confirm I wanted to clear all notes. We only need the action for this, as it will act as a blanket delete.

The second thing I did was attempt to update the post “Hello World!”. You can see the data-action, data-id and the text to update has been passed to processRequest().

The last thing I did was attempt to invite a user to the app. You can see in the console though, there is no email address. This is vital to pass to processRequest, as in the WordPress code we use it to register a new user!

That can be fixed with two lines of code. Before sending the request, it should checks if the modal is an invitation modal and picks out the email address, then adds it to the data variable. Put this right before the Notes.processRequest() line in the UISendRequest() function.

if($(this).parents('.notice').hasClass('invite'))
  data.text = $('.invite-email').val();

If you attempt to invite a person, you’ll now see their email address show up in the console data!

Finally, we want to be able to see what is coming back from the server. In the successfulRequest() function, change the alert to log the jsonResponse variable instead of alerting “Request sent!”

succcessfulRequest: function(jsonResponse){
  console.log(jsonResponse);

  //change UI based on response from WordPress
},

Great. That’s all the Javascript we need for now. We’ll look at it again later when dealing with responses from the server, but right now it’s time to accept the AJAX Requests.

At Long Last, Interacting With WordPress

Right now, the script pings WordPress with the data we’ve collected, but WordPress doesn’t know what to do with it.

Remember how we pass the data-action through the AJAX request? Now is where it comes in handy. As it turns out, an action is the only parameter that WordPress requires to process an AJAX request. We use the action as a hook, to attach our PHP functions too. So the hook

add_action( 'wp_ajax_notes-add-user', 'notes_add_user' );

Will respond to the “notes-add-user” AJAX request. Cool huh? That of course means, a PHP function called notes_add_user() needs to exist.

Before we dive into that though, we need pre-built and consistent response to send back to the Javascript when the PHP code has run. $fail will simply respond with a failed action (i.e. something went wrong in the WordPress code). generate_response(), however, accepts 3 arguments that get passed back to the javascript.

Open up ajax-actions.php, and replace lines 7-9 with the following.

$fail = json_encode(array('message' => 'fail'), JSON_FORCE_OBJECT);

function generate_response($message, $id = null, $text = null){
  $response = array(
    'message' => $message,
    'id'      => $id,
    'text'    => $text
  );

  echo json_encode($response, JSON_FORCE_OBJECT);
}

These are two utility functions, and they serve a very important purpose. Notice the json_encode() function. By passing an array as the first argument, and JSON_FORCE_OBJECT as the second, our PHP response gets translated back to JSON for our javascript to interpret.

Secondly, does anything here look familiar? The structure of our response is identical to the structure of our request: action becomes message, id and text remain the same. Whilst it is not 100% necessary to mimic the structure, it keeps things clean, simple, and understandable. Especially when dealing with the response from WordPress and translating it to UI changes (so the user can see what has happened).

Authentication and Failed Responses

For our actions, we want to make sure the current user is actually allowed to do the things we’re asking. For example, if the user is trying to add user, they must have the capability to use wp_insert_user(). The helper function current_user_can() allows us to check this. I’m going to go ahead and flesh out all our actions, along with their AJAX hooks. Add all this below the generate_response() function we just built.

function notes_add_user(){

  if(current_user_can( 'add_users' )){

    extract($_POST);

    //create user code here

  } else { echo $fail; }
  exit;
}

function notes_delete_user(){
  if(current_user_can( 'remove_users' )){

    extract($_POST);

    //delete user code here

  } else { echo $fail; }
  exit;
}

function notes_clear_all(){
  if(current_user_can( 'delete_posts' )){

    //do delete all posts here

  } else { echo $fail; }
  exit;
}

function notes_new_post(){
  if(current_user_can( 'publish_posts' )){
    extract($_POST);

    //do create new post code here

  } else { echo $fail; }
  exit;
}

function notes_update_post(){
  if(current_user_can( 'edit_posts' )){
    extract($_POST);

    //update post code here

  } else { echo $fail; }
  exit;
}

function notes_delete_post(){
  if(current_user_can( 'delete_posts' )){
    extract($_POST);

      //delete post code here

  } else { echo $fail; }
  exit;
}

add_action( 'wp_ajax_notes-add-user', 'notes_add_user' );
add_action( 'wp_ajax_notes-delete-user', 'notes_delete_user' );
add_action( 'wp_ajax_notes-clear-all', 'notes_clear_all' );
add_action( 'wp_ajax_notes-new-post', 'notes_new_post' );
add_action( 'wp_ajax_notes-update-post', 'notes_update_post' );
add_action( 'wp_ajax_notes-delete-post', 'notes_delete_post' );

That’s a lot of code to digest, and at present it actually does nothing for us. As you can see though, we have a PHP function and a hook to match every action our app allows.

Note: the extract($_POST) function is absolutely vital. It extracts our data package into variables for us, available as $action, $id and $text.

Another thing that is important to know, is that these hooks are only called if you’re logged in. You should be logged in, but we’ll force login later on to make sure anybody trying to post is logged in and has permissions to post.

Finally, the easiest mistake to make with this is actually including these functions in your theme! Open up functions.php, and go to the bottom. Replace the //INCLUDE AJAX ACTIONS comment with an include_once() function. Don’t forget this! Otherwise you’ll get empty responses forever and you’ll never know why.

include_once(ajax-actions.php);

Adding a user

Funnily enough, our add-user action is the most complex of them all. The reason being we have to perform a number of actions:

1. Generate a user name based on their email
2. Check if the user exists already
3. Generate a random password
4. Create the new user
5. Set their role to ‘Editor’ so they have permissions to add, edit and delete posts
6. Notify the user they’ve been added
7. Respond back to the javascript with the result

The code is as follows.

function notes_add_user(){

  if(current_user_can( 'add_users' )){

    extract($_POST);
    $user_name = substr($text, 0, strpos($text, "@"));

    $user_id = username_exists( $user_name );

    if ( !$user_id and email_exists($text) == false ) {

      $random_password = wp_generate_password( $length=12, $include_standard_special_chars=false );
      $user_id = wp_create_user( $user_name, $random_password, $text );

      $user = new WP_User($user_id);
      $user->set_role( 'editor' );

      wp_new_user_notification( $user_id, $random_password );

      generate_response('user-added', $user_id, $text);

    } else { echo $fail; }

  } else { echo $fail; }
  exit;
}

That’s quite a lot to digest, but if you follow the points above you can see what happens.

The important thing to note is the generate_response() function. Here we pass the success message ‘user-added’, the new user’s ID, and finally their email address to be added to the UI on the fly. It is also what will show up in your console upon recieving a response from WordPress.

Save that, and go ahead and invite a user. In the screenshot below, you can see me requesting the user to be added, and then getting a response back saying that the user has been added, along with their email address and newly assigned ID. Cool!

This sort of request and response has one last puzzle piece to make the full loop in the diagram from the start of this post. Translating the response from a JSON object recieved from WordPress into a change in the UI that a human can recognise.

If you refresh the page, your newly added user will show up in the “users” menu, which is cool. But we want this to happen without having to refresh!

Handling the response

By now, you can tell that each action has 3 parts. Firstly, it sends the request. This is generic for all actions. Once the action is recieved, it has a WordPress function to do the heavy lifting. Upon return, it needs a function that translates the response.

Since the data is returned to the Javascript function successfulRequest(), that’s where we’ll handle the response.

If you’re adept at PHP, you’ll understand the switch/case loop well. Fortunately Javascript has a switch function as well, and we can switch on the message receieved back from the server to perform different tasks.

Head back to main.js, and go to line 103 where successfulRequest() is. Modify like so:

succcessfulRequest: function(jsonResponse){
  //action's effect on UI

  response = jQuery.parseJSON(jsonResponse);

  console.log(response.message);

  switch (response.message){

    case "fail" : alert('Something went wrong.'); break;

    case "user-added" :

      console.log('user with email address ' + response.text + ' has been added to WordNotes');

      var user_tmpl = $('#tmpl-user').html();
      var user_data = {
        id: response.id,
        email: response.text
      }

      if($('.all-users .empty').length > 0) $('.all-users .empty').remove();

      $('.all-users').append(Mustache.render(user_tmpl, user_data));

    break;

    //OTHER CASES GO IN HERE

  }

},

Firstly, we translate the returned JSON response into jQuery readable JSON using parseJSON().

We then console.log() the message coming back, for our convenience.

Now for the meaty part. We use switch to switch through this message, and apply javascript accordingly. Obviously, we test for the case of ‘user-added’, and then console.log() that the action was successful.

The next 5 lines are setting up a Mustache template, ready to be inserted into the menu (remember I set up these templates so we can focus on the JS and PHP. They are in footer.php if you’re curious).

The next line checks if the list placeholder ‘No users! Add some!’ is present, and if it is, delete it.

Finally, we append the new user to the user list using a Mustache function, render, which spits out the template along with the data we’ve passed to it.

Save that, head to your site, and refresh. Click the Users list, and then click add new user. Input an email address, and select ‘invite’. You’ll magically see the new user get added to the list!

If you visit the wp-admin section of your site, and select “users” you’ll also see all the users you’ve added. All without touching wp-admin!

This shows the power of AJAX requests combined with WordPress’s wp-ajax.php file.

But what about the rest of the actions?

You’re right. There are still 5 actions to be catered to.

Instead of holding your hand through them all, I’m going to show you the code for each action split into the WordPress code, and the main.js code. Simply add them in as you go. There will be short explanations.

If something goes wrong with your code, make sure your switch/case function in main.js is formatted properly. Otherwise, see you on the other side!

Deleting users

ajax-actions.php

function notes_delete_user(){
  if(current_user_can( 'remove_users' )){

    extract($_POST);

    if(wp_delete_user($id))
      generate_response('user-deleted', $id);

  } else { echo $fail; }
  exit;
}

Simply grab the ID, and use wp_delete_user() to delete the user. Respond with the ID of deleted user so it can be removed from the UI.

main.js

case "user-deleted" :
  $('#user-' + response.id).remove();
  if($('.all-users li').length == 0) $('.all-users').append('<li class="empty">No users yet! add some.</li>');
break;

Remove user with returned ID from the UI. Check the list isn’t empty, if it is add the placeholder.

Clear All Notes

ajax-actions.php

function notes_clear_all(){
  if(current_user_can( 'delete_posts' )){
    $posts = get_posts(array('posts_per_page' => 9999));
    foreach($posts as $post) wp_delete_post( $post->ID );

    generate_response('all-deleted');

  } else { echo $fail; }
  exit;
}

Uses get_posts() to get 9999 most recent posts, loops through them and uses wp_delete_post() to delete them all. Responds with ‘all-deleted’ so UI can be cleared of notes.

main.js

case "all-deleted" :
  $('.note').remove();
  alert('All notes have been deleted.');
break;

Very simple, just removes all list items with the class ‘note’, and alerts the user they have been deleted.

Add Notes

ajax-actions.php

function notes_new_post(){
  if(current_user_can( 'publish_posts' )){
    extract($_POST);

    $p = array(
      'post_title'    => $text,
      'post_author'   => get_current_user_id(),
      'post_content'  => ' ',
      'post_status'   => 'publish'
    );

    $post_id = wp_insert_post($p);

    if($post_id != 0){

      generate_response( 'post-added', $post_id, $text );

    } else { echo $fail; }

  } else { echo $fail; }
  exit;
}

Builds post array, uses wp_insert_post() to create new post. Responds with ‘post-added’ message, ID of new post and post title for insertion into the UI.

main.js

case "post-added" :

  console.log('Note added!');

  var post_tmpl = $('#tmpl-post').html();
  var post_data = {
    id: response.id,
    post_title: response.text
  };

  $(Mustache.render(post_tmpl, post_data))
    .insertBefore('.notes ul .new-post');

  $('.new-post input').blur().val('New note...');

break;

Logs that a note has been added, builds Mustache template to be inserted into page. Inserts it just before the ‘new-post’ input, and then blurs the input and returns the value to default.

Here’s what you’ve been waiting for. You can now add notes to your notepad on the fly! Below is a screenshot of my request, response and reaction. Clicking the ‘+’ sends the request.

And the new post in the database, without even touching wp-admin.

Editing notes

ajax-actions.png

function notes_update_post(){
  if(current_user_can( 'edit_posts' )){
    extract($_POST);

    $p = array(
      'ID'            => $id,
      'post_title'    => $text,
      'post_author'   => get_current_user_id(),
      'post_content'  => ' ',
      'post_status'   => 'publish'
    );

    $post_id = wp_update_post($p);

    if($post_id) generate_response('post-updated', $id, $text);

  } else { echo $fail; }
  exit;
}

Upon clicking the tick next to an existing post, this function gets called. Instead of using wp_insert_post(), it uses wp_update_post().

main.js

case "post-updated" :

  $('#post-' + response.id + ' input').blur();

break;

Since the user has already updated the UI for us by typing the new post, simply blur the field so no more editing can be done without clicking it.

Deleting Notes

ajax-actions.php

function notes_delete_post(){
  if(current_user_can( 'delete_posts' )){
    extract($_POST);

    $result = wp_delete_post( $id );

    if(!false) generate_response('post-deleted', $id);

  } else { echo $fail; }
  exit;
}

Simply grabs the ID, uses wp_delete_post() to delete it, and if it was successful, send a response back with the ID of the post to destroy.

main.js

case "post-deleted" :

  $('#post-' + response.id).remove();

break;

Gets the response, and removes the assosciated element based on the ID.

And the rest is history!

If you’ve gotten this far, well done. You now have a fully functioning notes app where you can take, update, delete, or delete all notes, as well as invite and remove users.

Although this is a simple application, you can imagine the power you’d have with more complex data structures, custom post types, and so on. If you have any questions, don’t hesitate to ask now.

Force Authentication

One thing is missing from our app. Forced Authentication. Sure, people would be able to publically view the app, which if you’re ok with stop now. But, if you want to force people to log in to be able to see and edit it, we’ve got a couple of extra lines of code to throw into functions.php.

It consists of 3 parts really. Firstly, force login. Secondly, redirect to home instead of wp-admin to bypass it completely. And thirdly, change the style of the login page to resemble anything but WordPress.

Force login

Here’s a really handy snippet for you. It goes at the bottom of functions.php in your theme.

// Require login for site
get_currentuserinfo();
global $user_ID;
if ($user_ID == '' && $_SERVER['PHP_SELF'] != '/wp-login.php') {
  header('Location: '.get_bloginfo('url').'/wp-login.php'); exit();
}

What this does, is get your current session info. If no user ID is returned (i.e. you’re not logged in), and you’re not on the login page already, send you to the login page. Go ahead and test this, if you log out and try to access any page you’ll get booted out.

Login redirect

Once the user logs in, we want to drop them on the home page of the site, not wp-admin. The following snippet does exactly that.

//change login redirect to home url
function redirect_to_home(){
  return home_url();}
add_filter('login_redirect', 'redirect_to_home');

Make sure it looks nothing like WordPress!

Finally, I’ve built some styles into the starter theme that change the login page to look nothing like WordPress! To activate them, the next snippet will suffice.

function custom_login_style() {
  wp_enqueue_style( 'custom-login', TEMPL_PATH.'/css/custom-login.css' ); }
add_action( 'login_enqueue_scripts', 'custom_login_style' );

Extra credit

There are a number of things we could do to further augment our notes app, but I don’t have time to cover them.

• Using WP Nonces for security
• Auto refresh of notes
• Know when other users are online
• Validation
• Using the return button to fire actions

The possibilities are endless! Go ahead and try to do them.

WordPress to Power an App

As you can see, WordPress is perfectly capable of powering apps. Despite this being a small-scale app, you can imagine the endless possibilities with custom post types, custom taxonomies, custom fields, and basically anything related to content management.

I hope I’ve given you the building blocks here to create something more. If you do build something, please post it below! I’d love to see what you come up with.

Resources

• Finished theme
• Starter theme
• Demo – username: user, password: notes

Related posts:

1. Write a Free Report in a Day and Build Your Subscriber List for Years Learn the 7 steps for writing a truly valuable report....
2. Promoting your mailing list and grabbing new members using the Pop Over plugin Sometimes all you want is to give your visitors your...
3. How to List All Blog Authors on a WPMU Site We’re often asked how to display a list of blog...

FlexMarket: A Free MarketPress Theme

FlexMarket is a fully responsive MarketPress theme, built using the Twitter Bootstrap framework. It features a powerful options panel with a drag and drop page builder, 500+ Google fonts, unlimited color customizations, the ability to add a custom logo, background images and patterns, and much more.

View the Live Demo to see FlexMarket in action.

MP Floating Cart: A Free MarketPress Plugin

MP Floating Cart is another free extension offered by MarketPress Themes. It creates a shopping cart tab that hovers or “floats” above your website. Clicking on the tab will launch a modal window displaying the customer’s shopping cart items and subtotal. The subtotal updates instantly, just like amazon.com, both on the tab and in the cart window.

When the shopping cart modal window is launched, a dark overlay is placed over the site behind it.

The floating shopping cart comes with an options panel that allows you to customize the plugin in the following ways:

• Change the placement of the button
• Turn button text on/off
• Change button text
• Option to show or hide cart total
• Select the button color

Check out a live demo of the floating shopping cart on the Pro Theme.

Grab your free copy of the floating shopping cart plugin and the FlexMarket theme at MarketPressThemes.com. Register for a free account and then download it from your dashboard.

Read more about related topics:

• 7 Free Twitter Bootstrap Themes for WordPress
• Free Responsive Themes for WordPress

Related posts:

1. Free Version of MarketPress Now Includes Digital Downloads, Coupons, and Many New Features! MarketPress has been completely updated for WordPress 3.2 and we've...
2. Download the Free MarketPress Shortcode Helper Plugin Add this free plugin to your MarketPress-powered store to keep...
3. 3 Free Add-ons For MarketPress – Additional Flat Rate Shipping Options, Store Styles, and Layout Shortcodes One of the things I love best about the WPMU...

Here’s a quick peek at what the design team has been up to:

Check out a live demo.

The new theme makes liberal use of bright colors in order to emphasize the different post formats. It includes Genericons, a font-based icon set created by @altjoen of Automattic. These icons will scale to any resolution and can be re-colored via CSS.

Knowing this theme would ruffle some feathers, Mark Jaquith explains the idea behind the bold departure from traditional WordPress default themes:

Some of you will hate it. And that’s okay. We’ll still be shipping Twenty Twelve, which is an excellent base theme and a canvas on which you can build anything from a blog to a static content site. But with Twenty Thirteen we’re taking a bold stance: this theme was meant for blogging, and it’s not a blank canvas. It comes pre-marinated with playfulness and warmth and opinions.

Now, don’t anyone have a heart attack if you don’t like it. You can always use Twenty Twelve to build your business website. Twenty Thirteen is here to highlight WordPress as a blogging platform.

The new Twenty Thirteen theme will ship with the upcoming WordPress 3.6 release, due sometime in April. Like it, love it, hate it? Let us know in the comments.

Related posts:

1. Sneak Peek at the WordPress Twenty Twelve Theme Find out what the next default WordPress theme will look...
2. Sneak Peek: Screenshots of the New Twenty Eleven Theme for WordPress 3.2 After receiving Jane Well’s invitation for anyone to check out...
3. New Twenty Twelve Default WordPress Theme Now Available for Download Have you been looking forward to using the new Twenty...