WordPress Buttons Shortcode

The idea for these shortcode buttons originally came from a tutorial on Adding Versatile Button Shortcodes to your WordPress Theme from, I highly recommend checking out their site for another reference on different buttons. Originally, I liked the simplicity of the tutorial, but wasn’t crazy about the wall of CSS accompanying them. Well come to find out after making my own with a modified CSS3 button, they ended up being pretty complex also, but they are still a viable option if you absolutely must have shortcode buttons for theme development.

Shortcode Button Example

This set of snippets can easily be modified into a plugin, it is not hard at all, you would be suprised, take a look at creating a custom functions plugin for end users for directions. Also hopefully you have your bases down before tackling something like this, not recommended for anyone who doesn’t understand CSS and PHP, although the links in this article should help.

The PHP Shortcode Button

Insert into functions.php in the WP theme folder.

// button shortcodes resources:
function snix_shortcode_button( $atts, $content = null ) {
    'link'  => '#',
    'title' => 'View Link',
    'target'=> '',
    'size'  => '',
    'color' => '',
    'type' => '',
    'align' => '',
    ), $atts));
    $target = ($target == 'blank') ? ' target="_blank"' : '';
    $align = ($align) ? ' align'.$align : '';
    $color = ($color) ? ' '.$color : '';
    $type = ($type) ? ' '.$type : '';
    $out = '<a' .$target. ' class="' .$size.$color.$type.$align. ' awesome" href="' .$link. '" title="' .$title. '"><span></span>' .do_shortcode($content). '</a>';
    return $out;
add_shortcode('button', 'snix_shortcode_button');

If you are really paying attention, you will see some differences, the big ones being the option for a title on the links, the span is a little more flexible for doing some fun things with images and icons and some extra css hooks. Other than that, it is basically the same set up. The CSS is where it gets quite different.

The CSS for the Shortcode Button

Insert into style.css in the WP theme folder.

a.awesome, button.awesome { position: relative; display: inline-block; margin-bottom: 18px; padding: 10px 15px 9px; background: #222; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; font-size: 12px; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35); cursor: pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
button.awesome { border: 0; }
a.awesome:hover, button.awesome:hover { background-image: url(images/button-overlay.png); text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.35); }
/* button sizes ---------- */
.small.awesome { font-size: 12px; padding: 8px 10px 8px; }
.medium.awesome { font-size: 14px; }
.large.awesome { font-size: 18px; padding: 14px 15px; }
/* button colors ---------- */
.blue.awesome { background: #2daebf; }
.green.awesome { background: #2fc950; }
.grey.awesome { background: #a7a8a7; }
.red.awesome { background: #e33100; }
.magenta.awesome { background: #a9014b; }
.orange.awesome { background: #ff5c00; }
.yellow.awesome { background: #ffb515; }
/* specific button types ---------- */
/* speak option */
.speak.awesome { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
.speak.awesome span { position:absolute; bottom:100%; left: 30px; height:0; width:0; border-color: transparent transparent #222 transparent; border-style: solid; border-width: 12px; }
.blue.speak span { border-color: transparent transparent #2daebf transparent; }
.green.speak span { border-color: transparent transparent #2fc950 transparent; }
.grey.speak span { border-color: transparent transparent #a7a8a7 transparent; }
.red.speak span { border-color: transparent transparent #e33100 transparent; }
.magenta.speak span { border-color: transparent transparent #a9014b transparent; }
.orange.speak span { border-color: transparent transparent #ff5c00 transparent; }
.yellow.speak span { border-color: transparent transparent #ffb515 transparent; }
/* sign options */
.sign.awesome { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; margin-right: 10px; }
.sign.awesome span { position:absolute; top: 0; left: 100%; height:0; width:0; border-color: transparent transparent transparent #222; border-style: solid; border-width: 10px; }
.blue.sign span { border-color: transparent transparent transparent #2daebf; }
.green.sign span { border-color: transparent transparent transparent #2fc950; }
.grey.sign span { border-color: transparent transparent transparent #a7a8a7; }
.red.sign span { border-color: transparent transparent transparent #e33100; }
.magenta.sign span { border-color: transparent transparent transparent #a9014b; }
.orange.sign span { border-color: transparent transparent transparent #ff5c00; }
.yellow.sign span { border-color: transparent transparent transparent #ffb515; }
/* icon options */
.icon.awesome { padding-left: 40px; }
.icon.awesome span { position: absolute; bottom: -5px; left: -10px; height: 46px; width: 48px; background: url(images/button-icon.png) no-repeat 0 -46px; }

Shortcode Buttons Example

See what I mean about the CSS ending up to be fairly large? In order to get the color examples (image) it increases the size quite a bit. I randomly selected button colors, so feel free to change the colors, or even wipe out most of them.

There are 4 button types, a standard button, speak option, sign option and a icon option which can also be tinkered with. The hover state uses a .png file, I opted for image gradient on the button because it would take tons more code to set hover gradients with CSS3, because of color options and vendor prefixes. You can download the shortcode images used for the hover state and icon type. Place them in the root directory of your WordPress theme in the “images” folder. Really these are just place holders, so it is up to you if you even need them.

Modify wpautop and wptexturize

Insert into functions.php in the WP theme folder.

// clean up formatting in shortcodes
function snix_clean_shortcodes($content) {   
	$array = array (
		'<p>[' => '[', 
		']</p>' => ']', 
		']<br />' => ']'

	$content = strtr($content, $array);
	return $content;
add_filter('the_content', 'snix_clean_shortcodes');

The little snippet above from will fix the auto line breaks <br> and empty paragraphs <p></p> inside the shortcodes. There are probably similar ones out there, but I have not found another solution to turn off the auto line breaks and paragraphs inside the shortcode without disabling them completely. I would not recommend completely disabling the wpautop and wptexturize feature because all paragraphs will need to be manually inserted, which won’t be fun for a client.

I have been sitting on this Button Shortcode snippet for a while now, I originally intended to use it as a flexible prepacked button system for WordPress Themes. I had figured these shortcodes would be much easier, in the end they are all actually kind of a pain in the ass, mostly because of the wpautop filter, not to mention how mentally frustrating they can become since some shortcodes can promote very bad coding practices. A good example of a dumb shortcode is using it to replace an H1 tag, just use a correct MOFO H1 Tag.


Stupid WordPress Easter Egg

It looks like if you are in the post revision screen and compare a post to itself, which is dumb in the first place, but still, you will get this hidden gem. I hate to be that one guy, but it just doesn’t seem like the refined WordPress CMS experience and reminds me more of a Sub7 feature which is a old school back door trojan program. It even spells the words slowly as if typed in real time, scary l33t h4x0r stuff.

I can imagine some intern at a company scared to death once the “self destruct” pops up on the screen and then goes black with some Matrix style quotes below.


Polishing Thematic’s Head

I apologize in advance for the subtle sexual innuendo throughout the post, but I will be focusing on the “Head” of a Thematic Theme Framework child theme. Unless you are a code Nazi you may have not noticed Thematic’s head is a little bloated, even right out of the box (zip?). There is just some markup that does not need to be in the head of the document. After a short time of working on a child theme, especially adding plugins, the head of your document will be unnecessarily swollen. Hopefully this set of snippets for your functions.php file will let you relieve some of that stress.

Modifying the Thematic Robot Meta

Ok, the way Thematic is set up for SEO is really good, so by default you won’t be having duplicate content issues. But… if you view source you may see this guy in there.

<meta name="robots" content="index,follow" />

This just rubs me the wrong way. Why? Because it is the browser default, having nothing there would tell the browser the same thing as this meta tag. So removing it seems like a good way to clean things up. The code below just removes the line and moves a little structure around for correct spacing, that’s it. Simple.

// remove the index and follow tags from header since it is browser default. 
function childtheme_create_robots($content) { 
  global $paged; 
  if ( thematic_seo() ) { 
    if ( ( is_home() && ($paged < 2 ) ) || is_front_page() || is_single() || is_page() || is_attachment() ) { 
      $content = ""; 
    } elseif ( is_search() ) { 
      $content = "\t"; 
      $content .= "<meta name=\"robots\" content=\"noindex,nofollow\" />"; 
      $content .= "\n\n"; 
    } else { 
      $content = "\t"; 
      $content .= "<meta name=\"robots\" content=\"noindex,follow\" />"; 
      $content .= "\n\n"; 
      return $content; 
add_filter('thematic_create_robots', 'childtheme_create_robots');

Removing Duplicate Canonical Tag in Thematic

Don’t ask me why there are two canonical tags called on single() pages, while they won’t cause any harm, they just look bad in your markup. I have only tested this with Yoast’s WordPress SEO plugin, but with almost any WordPress Plugin you will still get 2 canonical tags, it has to be a Thematic issue, but oh well. Lets fix that.

// remove Thematic canonical tag
function childtheme_canonical_url() {
// silence
add_filter('thematic_canonical_url', 'childtheme_canonical_url');

This was reported to the Google code project section where Thematic issues are held, hopefully it gets resolved.

Update: Looks like my report was accepted and the duplicate content issue was resolved on revision r774, awesome. Which makes the above snippet no longer needed for Thematic 1.0+

Even more, not Thematic specific though.

Some people may not be as excited about this last one as the previous two, but there are a few more things that I don’t use, or don’t need. I have commented what they are so you can search around to find more about them, but I am still yet to use them. This code snippet removes up to 6 lines of code from the head depending what page you are on and will work with any WordPress installation, not just Thematic.

// clean up some useless unneeded links in the head section
// remove really simple discovery
remove_action('wp_head', 'rsd_link');
// remove windows live writer xml
remove_action('wp_head', 'wlwmanifest_link');
// remove index relational link
remove_action('wp_head', 'index_rel_link');
// remove parent relational link
remove_action('wp_head', 'parent_post_rel_link');
// remove start relational link
remove_action( 'wp_head', 'start_post_rel_link'); 
// remove prev/next relational link
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head');
 // remove wordpress version (security issue), not needed for thematic
remove_action( 'wp_head', 'wp_generator');

Now someone might say but “OMG, removing the previous/next, parent and index relational links are bad for SEO!”. To that I say prove it. I just look at it as one less way to control how your pages link if you were really working on solid structure (information architecture) since it links what was literally previous or next even though they may not be related.

Is that it for cleaning up Thematic’s head?

Nope, depending on what plugins you are using or jQuery you have loading in WordPress, there could be a ton of other things. Originally this post contained some other best practices, but I only scratched the surface and the information would probably raise a lot of questions so I removed it till I can provide more comprehensive information. Instead this post will focus on the first few things you may want to do with a child theme to tidy up a bit.


Scroll to Top for Thematic

I will be recreating the exact functionality of the original Animated Scroll to Top from, but for use on the Thematic Framework for WordPress. It won’t take you very long to realize that the way it is set up isn’t very useful for some of Thematic’s default layouts without some CSS love. Either way, with some slight modifications, this is a very handy little feature and a good introduction to how to bolt on some jQuery functionality into a Thematic Child Theme.

This will not work for Thematic, you will need the latest stable development release. There is an problem with the footer-extensions.php in the older version.

All this involves files inside your Thematic Child Theme, hopefully you have that child theme thing down already and why it is important. For example purposes, the name of my child theme is “scottnix”.

Create a custom.js file

Child Theme Scripts Folder Example

In your child theme, if you don’t already have one, create a folder called “scripts”. In that scripts folder then create a “custom.js” file and insert the jQuery code (below) which will target the #back-top html we will be adding.

        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 100) {
            } else {
        jQuery('#back-top a').click(function () {
                scrollTop: 0
            }, 800);
            return false;

Add to functions.php

The first function “childtheme_scroll_to_top_script” will load your custom.js file, It will correctly enqueue the script in the footer. The idea behind calling it in the footer is the site content will load before the script, which gives the illusion of a faster loading site.

The second function “childtheme_override_siteinfoclose” will override Thematic’s standard siteinfoclose and add in the additional html. I have also modified the link to jump to the #wrapper, since out of the box, this is the top most ID in Thematic.

// loads custom.js file right above the closing body tag.
function childtheme_scroll_to_top_script() {
    wp_enqueue_script('scroll_to_top', get_bloginfo('stylesheet_directory') . '/scripts/custom.js', array('jquery'), '1.0', true);
add_action('wp_enqueue_scripts', 'childtheme_scroll_to_top_script');

// override existing siteinfoclose to add the html right inside the #siteinfo div
function childtheme_override_siteinfoclose() { ?>
    		<p id="back-top"><a href="#wrapper"><span>Back to Top</span></a></p>
	<!-- #siteinfo -->  

Add to style.css

Pretty self-explanatory here, just add this to your CSS. At the least I would recommend putting it near the rest of your site info/footer CSS just to keep the document well structured.

#back-top { position: fixed; bottom: 30px; margin-left: -150px; }
#back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover { color: #000; }
#back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(images/scroll-to-top.png) no-repeat center center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover span { background-color: #777; }

Add the image

Child Theme Images Folder Example

Hopefully you already have a images folder, if not create one in your child theme and drop in a image named “scroll-to-top.png”, although you should already be able to see the functionality already working without it.

That’s it

For this site I chose to go a little bit of a different route and have built it into my WordPress 3.0 Menus since my site is no longer built on Thematic. Even if you don’t use a fixed position the script is useful because it will not be invoked if the page is too short and it will give you the smooth scrolling.


Ron Paul Revolution Image

The last time Ron Paul ran in 2008, I created some revolution artwork in .AI and .PSD file formats for supporters to use. The idea for the revolution “love” style design was originally from Ernie Hancock who runs the website Freedom’s Phoenix. Back in the day, I wasn’t able to find a clean revolution logo image, let alone in a editable format. It has been 4 years since I originally created a Illustrator and Photoshop version so it could be reused for other projects, it actually spread around pretty fast and was a decent traffic draw, here it is again.

 Black Ron Paul Revolution Image

White Ron Paul Revolution Image

Clear Ron Paul Revolution Image

Pink Ron Paul Revolution Image

Revolution Artwork Zip Includes:

  • Illustrator (.AI)
  • Photoshop (.PSD)
  • 4 Images Above (.JPG & .PNG)
  • Stencilia-A Font (.ttf)

Download Revolution Artwork (Zip)

To snag a image here without downloading the source files above, you can right click on the images here and “Save Image As”. Feel free to use these images however you wish, Ernie Hancock sums it up.

This is my standard response,… the idea/logo belongs to everyone and to no one. I was very certain about what was gong to happen (long story why) and made the decision before the first sign was made to promote the concept without any restrictions (it’s a freedom thing).Ernie Hancock