We’ve seen many comments about WP shortcodes on Twitter, and on a few blogs lately, so we figured whilst everyone was talking about it, we’ll just get going on implementing it.
The latest update to the WooFramework (which now takes it to version 2.9) features the addition of shortcodes for a variety of buttons, info boxes, related posts, as well as some social bookmark buttons. The idea behind the shortcodes is that it makes it easier for you as publisher / website admin to re-use certain popular elements within your blog post, without having to worry about re-doing large sections of code (that’d just be mundane).
An overview of the elements you can create using our new short codes
So our initial batch of shortcodes are aimed at doing just that, whilst it serves as a quick “beta” for us to get feedback on how you are using them, and how we could build more. We’ve got a few more plans, but we’re happy for you to shoot with some suggestions.
The styling of these elements are currently contained within the WooFramework, which means that it will look just like these examples above when you are using it on your side. You will however be able to add some custom CSS to modify the styling of these to suite the rest of your WooThemes modification and custom styling.
Have fun implementing, or modifying them! 
NOTE: You would need to update the WooFramework in your theme (do so from your WP backend) to the latest version before you can use these shortcodes. Members can get more information about the shortcodes in the WooCodex.
76 Responses to “WooFramework gets Shortcodes”
This is a great feature and catches up to many of the features available on other premium themes. I’m really glad that I’ll be able to use them on my Canvas blog.
Hey,
Im looking in my Spectrum options for a Framework update but I cant see any update button. It is currently showing at Framework 2.7.10
Do I have to check the box Framework Core Update (Only for framework V.2.7.0 +)
Cheers
Chris
Hi
Yes older versions of the framework didn’t have this enabled by default. So to those that don’t see “Update Framework”, go to “Framework Settings” and enable the “Framework Core Update” option.
Cheers
Is there anyway of enabling the shortcode in a template file?
I kid you not. I was thinking about this yesterday. So now you guys are into mind reading? Your ninja skillz are uncanny.
Shortcodes are nice but that means you have to put them in for every post which is a pain and time consuming. A better option is to create some php code to go along with the shortcodes for people who want to build these features into their customized themes. I know i’d like that.
you can call the function for the shortcode in your template code i would assume, but haven’t tested yet. Will test it out…
Agreed that this needs to be enabled as a function so we can add it in our templates
Checked and it is possible to add in template files quite easily with do_shortcode() function: http://codex.wordpress.org/Function_Reference/do_shortcode
Great!
Updated the WooCodex with info on how to add to template files: http://www.woothemes.com/woocodex/shortcodes/#usage
shortcodes are a welcome addition…how about the addition of tabs, toggles, content sliders, and columns……?
good work.
All those are possible future shortcodes
I agree, these shortcodes are practically standard on ThemeForest themes.
We hear ya, the difference is that we have 70 themes that these shortcodes need to work across and look good on… one step at a time
Simply Woo !!
Sorry if I’m being a bit thick here but I can’t get this working.
I’ve just tried this on my site but the source code is, for example, This is a note box
The css in the Canvas stylesheet is p.note
Shouldn’t that be p.woo-note ?
Ah, my comment above doesn’t read write because it’s parsed the HTML.
Hopefully it still makes sense though. Are the css classes right?
The CSS for shortcodes is all in the framework, not in style.css
Post in our forum and we’ll help you out there.
When shortcodes first rolled out, I dropped them immediately because they weren’t parsed out of feeds and made the feed look icky. Haven’t turned back to them since.
I tried the ‘Related Posts’ short tag. It worked nicely except that class isn’t styled in the framework. I’m awful with CSS so that little project is on the back burner.
I left it unstyled so it would fit in with all of our themes… It should be easy to style so just let us know if you need any help in the forum :=)
It is easy to style if I wasn’t lazy with CSS. I liked the styled Related Posts ul in the Canvas demo before you removed the styling. I went to reverse engineer it but the demo didn’t actually style the “woo-sc-related-posts” class. Maybe you can do a couple of styled demos somewhere.
all i can say is wow. I am impressed.
related posts with thumbnails would be amazing!!
I’ve added basic support now in 2.9.02
So now it will use thumbnails?
I see, now it does. How do I enable images when using the PHP version of the shortcode?
Got the images enabled too! Only issue is the CSS now. getting them to be horizontal instead of vertical
How do you did? I am searching how to include thumbnails.
Using:
Not working
We can help you in our support forum
I am looking for the right word to describe this. Beautiful. Awesome. Amazing. Life-saving. Glorious.
Yes. Glorious.
This is just the Beta? Pssh…you always gotta give us a tease to make us expect more.
Great work!
I have been working on other projects and am yet to use canvas, but shortcodes for button and info boxes is exactly what I need to rework my mortgage site. Hopefully there will be a range of colors for the buttons.
You set the color for the buttons yourself using the parameters
Default is blue.
This sounds really interesting guys. Thanks.
How about extending the shortcodes to provide flexible columns within a page e.g. 1/3 column and 2/3 columns, 1/4 column and 3/4 columns, 3 * 1/3 columns or 4 * 1/4 page columns.
This is a great feature that’s especially useful for Business sites and full width pages.
@ Jim Blair – have a look at http://wordpress.org/extend/plugins/page-columnist/
Thanks Thomas, looks good, I’ll give it a try.
Columns added! http://www.woothemes.com/shortcodes/
Looks like the usual awesome stuff coming from the WooTeam
Awesome news – an essential feature of any premium theme.
Can I vote for a tabbed panel and accordion panel shortcodes? Along with what you have already would make it a great little set of UI components!
Those sound like good additions, thanks!
Got the idea after seeing this theme – very nice implementation. http://www.kriesi.at/themes/avisio/a-little-about-you/advanced-shortcodes/
I am using a child theme, not sure why but it seems that the shortcodes css file is being called from my child theme functions folder, which of course dosen’t exist.
Am I supposed to have the functions folder in my child theme? Better yet is there a reason the css file isn’t being called from the parent theme?
Hi
No this is supposed to be called from the parent theme, so I have updated the framework now to fix this. Just update to newest framework.
Thanks Magnus – You Rock!
This rocks, especially for my courseware web site. Thanks!
Hi,
What about a shortcode for LinkedIn – the business users Facebook!
Do they have a button code that we can add?
Think this gives you the code you need.
http://developer.linkedin.com/docs/DOC-1075
I’d like the code to have the Twitter, Digg and Facebook appear all in a row, as you display them in your graphic showing the output of all the shortcodes, at the top of this page.
Hi Scott,
This is possible
Please post any support related question in the forum.
Fair enough. Solved it in the meantime.
Instead, how about a suggestion – an info box type for blockquotes?
not sure what you mean… an info box and blockquotes together?
Or do you mean a shortcode to show stylized blockquotes e.g. big quotation marks with some text?
Sorry, yes, the second one. Shaded box with big ass quotation marks.
Yep that should be easy enough
Added in 2.9.10
http://www.woothemes.com/woocodex/shortcodes/#quote
More shortcodes (Columns and HR/Divider) have been added!
Check them out here: http://www.woothemes.com/shortcodes/
Just brilliant!
Woo great! One question, what is the best way to centre a button or put is right instead of left?
Hey all,
I am not able to figure out how to add short-codes. I use canvas theme for my site.
Can you suggest any screen capture video that can explain this well.
Thanks in advance.
Have you already upgraded to the latest version of the WooFramework? And to get the shortcodes to work it’s as simple as copying some of those codes into your WP post (HTML view).
Adii’
I have learned to do that. Thanks.
I’ve had another shortcode idea. How about one for Tags in a post? I’d love more control over where the Tags are placed. Possible? Does it sound like it might interest others?
Are shortcodes also available for “The Station”
Yep, most definitely.
Would it be possible to have a shortcode for the “Recommend” iteration of Facebook’s “Like” button. Recommend is a bit more neutral phrase that is especially useful for news and less-than-positive posts.
I think it would be nice to have custom featured boxes with various colors as well as various corner ribbons. Some icons similar to the icons in the buttons and info boxes. Maybe some lists with or without icons. Also some floating quotes and a shortcode to capitalize first letter of a paragraph.
Very cool! I was just looking for ways to add plug-ins and now I probably won’t have to.
I have to admit, I’m a little confused about upgrading from the wp back-end. I thought I would get a notice when the framework updated, but that doesn’t seen to have happened in my Fresh News theme. I must be unclear on the concept? (not sure if this is a support question or if it supports the thread…)
OK, this seems to be activated now, but there is a dire warning not to upgrade unless I have to. Is it safe to upgrade?
Yes it should be safe
How about a grey box without an icon?
Ok, so I did find this after looking at the Codex (sorry about that). However, I’m using the “normal box” code, and I’m still getting the “i” info box.
Am I doing something wrong?
Hi
I added a grey box without an icon in the latest version of the framework and updated the Codex.
If you still can’t get it to work, please post in our support forum.
It’s working! I updated the framework again. Thanks so much!
Trackbacks/Pingbacks