Categories
Posts

Titanic, a child theme for Thematic

The Titanic child theme is my last real attempt at creating a full fledged theme for the Thematic Theme Framework. This is the responsive child theme my site is currently built on, so technically you are looking at the demo right now. This is yet another theme built on my own Responsive Base which is a starter child theme for Thematic aimed at speeding up development times.

Titanic Responsive Theme Example Image

Demo Titanic Theme

Download Titanic Theme

Titanic Highlights

This responsive theme is packed with best practices involving developing child themes for Thematic I have picked up in the past few years. The one thing that makes this theme stand out is the way the menu works, it uses a footer anchor approach which is not currently set up for drop downs.

The theme is also built on Sass and Compass which hopefully you are using as it will make developing sites quicker, even if you just use it for the ability to import and compile.

While creating this theme, I made my best effort to make it compatible with the new Thematic HTML5 Plugin created by Karin Taliga. This plugin is awesome for converting some existing elements in Thematic to HTML5 without losing any functionality. For anyone that has looked into this (me), it is a pain to do and she has done an amazing job.

If you want to know every detail about this theme, you will probably want to review the information on my Responsive Base theme since they share all the same features.

Categories
Posts

Child’s Play, child theme for Thematic

Child’s Play is a child theme for the Thematic Theme Framework, it is built with the mobile-first approach to responsive web design, but with a few unique features. It was originally created as a stress test for the Responsive Base to find more improvements and make sure I wasn’t forgetting anything obvious. After adding new functionality and some styling to make it a little more visually impressive, the Child’s Play child theme was born.

Child's Play Responsive Theme Image

Demo Child’s Play Theme

Download Child’s Play

This project is on Github, so feel free to contribute!

Child’s Play Highlights

While this child theme shares all the same benefits as the Responsive Base child theme, I won’t be repeating them here. Child’s Play is unique in that it is the only child theme (I know of) available for Thematic which has the benefit of using Sass and Compass. Child’s Play turned out to be a good alternative to Responsive Base for those who want even a more refined starting point for child theme development. Although if you were coding a site from a PSD, Responsive Base would probably be a better start.

The CSS

Child’s Play takes it up a notch adding presentational styles and utilizing some very handy features that using Sass and Compass provide. I can’t really dive into all the things that make Sass and Compass great, that is already heavily documented and there is no way I could ever do it justice. All I can say is from now on, I will always be using Sass and Compass for my future projects, I think you should too.

The Functions PHP

Probably a little over the top, the functions.php clocks in at a little over 500 lines of code. I ended up reworking a bunch of things and adding more options to be reused in other various projects.

  • Added WooThemes Flexslider which works off of sticky posts, it is currently set up to show featured images of 750px wide by 425px height, which can easily be changed. You just have to settle on a specific size and make sure they are saved as the same size when using this option. If you have no sticky posts, the slider just won’t show, and best of all, the slider assets won’t load.
  • I also went ahead and added a header aside widget, I use this a lot for addresses, search bars, or even social icons, which comes in handy.
  • Added a heavily modified version of FlexNav, a jQuery menu that is collapsed on mobile devices to provide more room for content, currently the menu doesn’t support drop downs now supports drop downs.
  • Modified the postheader and postfooter to offer a different style, keeping the content on top.

Last Thoughts

Again, check the Responsive Base starter theme for more information on all the features packed into this child theme, Child’s Play just takes it a step further. This theme may be a little advanced for someone just getting started with Thematic, but if you already use Thematic for all your child theming, I think you will love this setup. A lot of the work on this theme comes from a big push from myself to optimize my workflow and stay up on the latest best practices.

Update: Now made to comply to with Idiomatic-CSS guidelines.

Update: Now works with the Thematic HTML5 Plugin by Karin at invistruct.com.

Categories
Posts

Responsive Base, a child theme for Thematic

Update: Thematic 2.0 is now in beta and available on Github, which makes this theme outdated. You can still use it since Thematic is backwards compatible, but if you want to be up to date, use Thematic 2.0 from Github and Responsive Base Plus.

Responsive Base is a child theme built on the mobile-first approach to responsive web design. It was created not to just be responsive, but to act as a template or starting point for child theme development for the Thematic Theme Framework.

After creating quite a few Thematic based sites, I felt I needed a solid base starting point which saves a little time by being already set up with some very useful modifications I frequently use.

Responsive Base is ideal for me, I created it for me. Although others working with responsive themes for Thematic will find it useful and refreshing. It is intended to work best with the latest version of Thematic, but works fine on 9.7.7 and above.

Responsive Base Theme Image

Demo Responsive Base Theme

Download Responsive Base Theme

View the demo to take a peek, or visit GitHub to download or view the code. Special thanks to Kathy for inspiration from her adaptive layouts for Thematic.

Responsive Base Highlights

The CSS

Thematic has a great minimalistic style by default, but I prefer not to have those default styles at the start of every child theme.

  • The reset.css has been replaced by normalize.css which preserves the browser defaults and also corrects common browser inconsistencies.
  • Original style sheets have had a ton of the unnecessary styles removed and condensed, while also building everything with a mobile first approach to responsive web design.
  • Added HTML5Boilerplate print styles for clean printing and HTML5Boilerplate helper classes to take advantage of the latest best practices for things like clear fixes and image replacement.

The Functions PHP

  • Adds my snippet to add conditional classes for Thematic to the header to target old versions of IE. This also now adds the meta viewport for correct scaling on mobile devices. By default this responsive theme will display a static mobile version with a little CSS for IE7 and IE8 based on a post by Joni Korpi called leaving old IE behind.
  • Includes a few functions to clean up the head of the document of lines of code that are loaded by default.
  • Helps optimize script loading in WordPress by providing a template to promote good habits. Combining scripts, loading custom scripts in a custom.js file instead of on page and loading scripts in the footer unless they are required to load in the header.
  • Loads Modernizr which includes the html5shiv for getting IE to recognize new HTML5 elements, also Modernizr does a ton more, especially useful for providing CSS3 fallbacks. Responsive Base child theme comes bundled with the full version of Modernizr, you should however use the build script to only include what you need.
  • Loads FitVids JavaScript which handles the resizing of videos for responsive websites.
  • Also provides a bunch of handy functions I tend to use on most child theme builds. Such as PHP snippets to add a Favicon, register additional menus in WordPress, a fourth subsidiary widget (good for footer menus), optimized Google Analytics and also a snippet to hide widget locations in the admin area.

Responsive Base File Structure

Includes necessary folders and files already setup in the child theme to promote well structured themes.

  • /images/
  • /js/
    • custom.js
    • jquery.fitvids.js
    • modernizr.js
  • favicon.ico
  • functions.php
  • screenshot.png
  • style.css
  • style.scss (for Sass/Compass)

Last Thoughts

While this theme is intended for developers to dive right in to responsive design with Thematic, it would also help people who are new to child themes get an idea on how things can be done in a clean and efficient way. Getting started in mobile-first responsive design can be rough at first, so hopefully you find this child theme template useful and be sure to always get the latest version or fork your own from GitHub.

Feel free to post your creations with the Responsive Base child theme in the comments, or if you think of anything to add, shoot me a pull request on GitHub. :)

Update: Now made to comply to with Idiomatic-CSS guidelines and also added a style.scss file for a basic Sass structure which also follows the guidelines. If you don’t use Sass, delete the style.scss file.

Update: Now works with the Thematic HTML5 Plugin by Karin at invistruct.com.

Categories
Posts

WordPress Columns Shortcode

A few months ago, I received a call asking if I knew how to make column shortcodes for a WordPress theme. I answered “No”, but quickly followed up with a explanation of how it should be fairly easy. The hunt for shortcode columns was on, after researching column shortcode examples, I noticed the ones out there were not very flexible when it came to styling. I kept thinking there has to be a better way and it wasn’t until making another shortcode for boxes that I figured out the columns and boxes could be merged into one single shortcode for a developer who wants total control with CSS.

This set of snippets can easily be modified into a plugin, take a look at creating a custom functions plugin for end users for directions. Also hopefully you have your basics 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 Columns Shortcode

Insert into your functions.php in the WP theme folder.


function snix_shortcode_columns( $atts, $content = null ) {
    extract(shortcode_atts(array(
	'size'  => 'full', // full width 100% is default
	'color' => '',
	'type'	=> '',
	'align'	=> '',
	'float'	=> '',
	'text'	=> '',
    ), $atts));

	$size = ($size) ? ''.$size : '';
	$color = ($color) ? ' '.$color : '';
	$type = ($type) ? ' '.$type : '';
	$text = ($text) ? ' text'.$text : '';
	$align = ($align) ? ' align'.$align : '';
	$float = ($float) ? ' float'.$float : '';

	if (strpos($size, "last") === false) {
	// if last is not found
	return '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div>';
	}
	else {
	// if last is found
	return '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div><span class="clearboth"></span>';
	}
}
add_shortcode('box', 'snix_shortcode_columns');

The CSS for the Shortcode Columns

Insert into style.css in the WP theme folder.


/*
	column box sizing - size=""
	default is full width 100%
----------------------------------------------------*/
.one_half, .one_half_last { width:48%; }
.one_third, .one_third_last { width:30.66%; }
.two_third, .two_third_last { width:65.33%; }
.one_fourth, .one_fourth_last { width:22%; }
.three_fourth, .three_fourth_last { width:74%; }
.one_fifth, .one_fifth_last { width:16.8%; }
.two_fifth, .two_fifth_last { width:37.6%; }
.three_fifth, .three_fifth_last { width:58.4%; }
.four_fifth, .four_fifth_last { width:67.2%; }
.one_sixth, .one_sixth_last { width:13.33%; }
.five_sixth, .five_sixth_last { width:82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float: left; margin-right: 4%; }
.one_half_last, .one_third_last, .two_third_last, .three_fourth_last, .one_fourth_last, .one_fifth_last, .two_fifth_last, .three_fifth_last, .four_fifth_last, .one_sixth_last, .five_sixth_last { float: left; margin-right:0;  clear: right; }
.full.awesome-box { clear: both; }
.clearboth { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width:100%; }
/*
	column box defaults
----------------------------------------------------*/
.awesome-box { border: inset 1px solid #fff; margin-bottom: 20px; background: #f4f4f4; position: relative; -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-radius: 5px; }
.awesome-box span.box-content { padding: 10px; display: block; }
.box-content h1, .box-content h2, .box-content h3, .box-content h4, .box-content h5, .box-content h6 { padding-top: 0; }
/*
	column box type - type=""
        alert is a custom box example
----------------------------------------------------*/
.none.awesome-box { border: none; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-radius: none; }
.alert.awesome-box span.box-icon { position: absolute; top: 25px; left: -10px; height: 46px; width: 48px; background: url(../images/icon.png) no-repeat 0 -46px; }
.full.alert.awesome-box span.box-icon { position: absolute; top: -5px; left: -10px; height: 46px; width: 48px; background: url(../images/icon.png) no-repeat 0 -46px; }
.alert.awesome-box span.box-content { padding-left: 30px; }
/*	
	column box colors - color=""
----------------------------------------------------*/
.blue.awesome-box { background: #2daebf; }
.green.awesome-box { background: #2fc950; }
.grey.awesome-box { background: #a7a8a7; }
/*	
	column box float - float=""
----------------------------------------------------*/
.floatright.awesome-box { float: right; margin-left: 4%; margin-right: 0; clear: none; }
.floatleft.awesome-box { float: left; margin-right: 4%; clear: none; }
/* 
	coluumn box align - align=""
----------------------------------------------------*/	
.aligncenter.awesome-box { clear: both; display: block; margin-left: auto; margin-right: auto; float: none; }
.alignleft.awesome-box { display: block; margin-right: 4%; float: left; }
.alignright.awesome-box { display: block; margin-left: 4%; float: right; margin-right: 0; }
/*
	column box text - text=""
----------------------------------------------------*/
.textcenter.awesome-box { text-align: center; }
.textleft.awesome-box { text-align: left; }
.textright.awesome-box { text-align: right; }

The CSS shows possible options, but with fairly minimal styling. The shortcode attribute of size=”” will control the flexible widths, type=”” will allow you to have specific variations from your original default boxes. The type=”” attribute comes with 2 basic set ups for examples, .alert which inserts a icon and .none which overrides the CSS of the default to not show any options. The rest is fairly self explanatory, color, float, text and align which are just more CSS hooks so these boxes can do damn near anything.

You can download the image used for the icon type, it really isn’t necessary though since you will obviously want your own and really this is just a place holder. If you want it for a quick example, place the image in the root directory of your WordPress theme in the images folder.

Fixing wpautop in shortcodes

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');

As mentioned in my WordPress Shortcode Buttons post, the little snippet above is needed only once to fix formatting on all shortcodes the auto line breaks <br> and empty paragraphs <p></p> inside the shortcodes without disabling wpautop and wptexturize completely. I would not recommend completely disabling the wpautop and wptexturize feature because all paragraphs and line breaks will need to be manually inserted which is a major hassle, especially for clients.

Drawbacks you should know

One thing you should absolutely know about is you can not nest these columns inside each other. Nested shortcodes get a little more complicated, if you needed nesting technically you could just reuse the PHP again, rename the shortcode from box to inner-box, the key is the PHP shortcode needs to have a different name to nest correctly.

You will need to manually insert the HTML into the boxes, so if you need a header and paragraph, these tags will need to be manually inserted. I really think this is half of what makes them very powerful though, so it just depends how you look at them. If you strip out the shortcodes you will still have correctly formatted text, careful attention was paid to keep these a styling element and not to promote poor coding practices summed up nicely on a article by Justin Tadlock called Dealing with Shortcode Madness. Pay close attention to his mention of the “lock in” effect which some other shortcode columns for do, ones with a “Title” as an attribute which handles headers in the columns would be perfect example.

Update: Justin Tadlock has created a Grid Columns shortcode plugin which trumps everything out there.

Categories
Posts

WordPress Buttons Shortcode

The idea for these shortcode buttons originally came from a tutorial on Adding Versatile Button Shortcodes to your WordPress Theme from mysitemyway.com, 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 Zurb.com 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:
// http://tutorials.mysitemyway.com/adding-column-layout-shortcodes-to-a-wordpress-theme/
 
function snix_shortcode_button( $atts, $content = null ) {
    extract(shortcode_atts(array(
    '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 www.johannheyne.de 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.

Categories
Posts

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.