Thematic Snippets

This is a collection of Thematic Snippets I frequently use to set up child themes. While these can be modified to do different things very easily, they are set up with the most common functions for me. This page is way too big, and I have yet to organize it into something manageable, but they do serve as good examples of how to work with Thematic’s functionality. You can also find a lot more Thematic snippets in my Github Gists where I put snippets when helping people on the Thematic Forums.

You will also probably want to know about Thematic Visual Hooks which is easy resource for Thematic action hooks.

Add Custom Menus

Register 2 additional custom menus in WordPress, remove the third-menu line if you only need one.

// register two additional custom menus
function childtheme_register_menus() {
    if (function_exists( 'register_nav_menu' )) {
        register_nav_menu( 'secondary-menu', 'Secondary Menu' );
        register_nav_menu( 'tertiary-menu', 'Tertiary Menu' );
    }
}
add_action('thematic_child_init', 'childtheme_register_menus');

Moving the Access Menu

There are a ton of different ways to do this, and you can move it pretty much anywhere. The snippet below moves the #access menu inside the #branding div, by using the priority of 6, remember Thematic already uses 1,3,5,7 and 9 for other elements, so use even numbers to move it within the #header tag.

// remove access menu from current position
function childtheme_move_access() {
    remove_action('thematic_header', 'thematic_access', 9);
}
add_action('thematic_child_init', 'childtheme_move_access');
// add access menu back into the same header, but on a different priority
add_action('thematic_header', 'thematic_access', 6);

Now if you wanted to move it completely out of the head, you won’t need a priority, just locate the hook you want, this version moves the #access menu below (or outside) the #header tag.

// remove access menu from current position
function childtheme_remove_access() {
    remove_action('thematic_header', 'thematic_access', 9);
}
add_action('thematic_child_init', 'childtheme_remove_access');
// add access menu back on to new hook, "below the header"
add_action('thematic_belowheader', 'thematic_access');

Completely Remove Header Functions

This is pretty obscure, but if you wanted to remove your header contents, this snippet removes them all.

// completely remove all header functions
function childtheme_wipe_header() {
    remove_action('thematic_header', 'thematic_brandingopen', 1);
    remove_action('thematic_header', 'thematic_blogtitle', 3);
    remove_action('thematic_header', 'thematic_blogdescription', 5);
    remove_action('thematic_header', 'thematic_brandingclose', 7);
    remove_action('thematic_header', 'thematic_access', 9);
}
add_action('thematic_child_init', 'childtheme_wipe_header');

Navigation Above and Below

These are the links that appear above the post which link to previous and next posts, I always get rid of this crap with a simple override.

// completely remove nav above functionality
function childtheme_override_nav_above() {
    // silence
}

These are the links that appear below the post which also deal with the previous and next posts, which again I always remove, but this time we have to leave in the functionality of pagination for the “1,2,3” pages on categories, etc., also leaves the default PageNavi which is a plugin that is very common.

// remove single page nav below functionality
function childtheme_override_nav_below() {
    if ( ! is_single() ) { ?>
        <div id="nav-below" class="navigation"> <?php 
            if ( function_exists( 'wp_pagenavi' ) ) {
                wp_pagenavi();
             } else { ?>  
            <div class="nav-previous"><?php next_posts_link(sprintf('<span class="meta-nav">&laquo;</span> %s', __('Older posts', 'thematic') ) ) ?></div>
            <div class="nav-next"><?php previous_posts_link(sprintf('%s <span class="meta-nav">&raquo;</span>',__( 'Newer posts', 'thematic') ) ) ?></div>
            <?php } ?>
        </div>  <?php
    }
}

Add Comments Number (for comment bubble)

A lot of sites often use a little bubble to display comments with just a number and nothing else, this does that. You will need to override the footer and remove the comments if you don’t want them to appear in two spots, and may want to add some conditionals otherwise this will show on pages too (even ones with comments disabled), so best to only show on like a front page/blog page.

// add the comment count to the title, for comment bubbles
function childtheme_postheader_posttitle($title) {
    return '<div class="comment-count"><a href="' . get_permalink() . '"><span class="count">' . get_comments_number() . '</span></a></div>' . $title;
}
add_filter('thematic_postheader_posttitle', 'childtheme_postheader_posttitle');

Add Search Form to Header

A search form in the header seems to be a usability trend. The logic is that users have become familiar with search bars in this area and it seems to be request a lot on projects. Also easier than adding a widget to the header

// add a search form to the header (inside branding div)
function childtheme_header_searchform() {
    get_search_form();
}
add_action('thematic_header', 'childtheme_header_searchform', 7);

Modify the Search Form Text

I don’t know why, but I can’t stand the default search text, so if you need to modify it, use this.

// change the default search box text
function childtheme_search_field_value() {
    return "Search";
}
add_filter('search_field_value', 'childtheme_search_field_value');

Thematic Categories

Converts category sections to Full Post instead of standard excerpt.

// show full post instead of excerpt on categories
function childtheme_thematic_content($content) {
    if (is_category()) {
        $content= 'full';
    }
    return $content;
}
add_filter('thematic_content', 'childtheme_thematic_content');

Converts the […] on the categories to a more desirable read more link to match the standard WordPress when you split posts and pages.

// add read more on categories to match wp read more
function childtheme_modify_excerpt($text) {
    return str_replace('[...]', ' <a href="'.get_permalink().'" class="more-link">Read more &raquo;</a>', $text);
}
add_filter('get_the_excerpt', 'childtheme_modify_excerpt');

Remove the skip link feature on the read more link. The screen jump on page refresh just bugs me and is unnecessary.

//remove the skip to anchor link feature on read more
function childtheme_remove_more_jump_link($link) {
    $offset = strpos($link, '#more-');
    if ($offset) {
        $end = strpos($link, '"',$offset);
    }
    if ($end) {
        $link = substr_replace($link, '', $offset, $end-$offset);
    }
    return $link;
}
add_filter('the_content_more_link', 'childtheme_remove_more_jump_link');

Credit: http://themeshaper.com/forums/topic/modifying-the-destination-of-more-link

Changing Category/Tag Text

Just an example of modifying the default text of “Tagged” to “Topics”, this is just one example, reference the thematic/library/extensions/content-extensions.php to find others if you need to modify them. This is a classic filter example for thematic, you go in and filter existing content.

// modify the "Tagged" text to "Topics" to be a little cooler looking
function childtheme_thematic_page_title($content) {
    if (is_tag()) {
                $content = '<h1 class="page-title">';
                $content .= __('Topics:', 'thematic');
                $content .= ' <span>';
                $content .= ( single_tag_title( '', false ));
                $content .= '</span></h1>';
            }
            return $content;
}
add_filter ('thematic_page_title', 'childtheme_thematic_page_title');

Load Google Fonts

Swap out the string for your desired font provided by Google Fonts using the wp_enqueue_style but now with the wp_enqueue_scripts action per the comments on stackexchange.com.

// script manager template for registering and enqueuing files
function childtheme_fonts_manager() {
    // register styles which are to be queued in the theme
    wp_register_style('google-fonts', 'http://fonts.googleapis.com/css?family=PT+Sans:700');

    // enqueue the styles for use in theme
    wp_enqueue_style ('google-fonts');
}
add_action('wp_enqueue_scripts', 'childtheme_fonts_manager');

Add Google Analytics

Attaches Google Analytics (Asynchronous Syntax) in the head of the document, just set the correct UA-#. For your piece of mind, reference Google’s tracking code instructions to check where to load it. You can load it in the footer if you want by changing wp_head to wp_footer in the add_action portion of the function.

// looad google analytics - optimized version http://mathiasbynens.be/notes/async-analytics-snippet
function childtheme_google_analytics() { ?>
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
<?php }
add_action('wp_head', 'childtheme_google_analytics');

Adding a Favicon

Pretty simple, that little 16×16 or 32×32 image located in the address bar, acceptable file formats are png, gif and ico. While there are websites where you can convert a image to a favicon file, I prefer this PSD Plugin which allows you to just save as an .ico format from Photoshop.

// add favicon to site, add 16x16 or 32x32 .ico or .png image to child themes main folder
function childtheme_add_favicon() { ?>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<?php }
add_action('wp_head', 'childtheme_add_favicon');

Another option is to add your personal Gravatar image as a favicon, you can change the 16 to a 32, check to see what looks best. This works nicely as a quick way not to have to make an icon in certain instances.

// add gravatar favicon to site, add 16x16 or 32x32 image to main directory
// https://forrst.com/posts/Gravatar_as_favicon_in_Wordpress-PTW
function snix_add_favicon() {
	$GetTheHash = md5(strtolower(trim('email@domain.com'))); ?>
<link rel="shortcut icon" href="<?php echo 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16;'; ?>" />
<?php }
add_action('wp_head', 'snix_add_favicon');

Clean Head.

Remove a bunch of garbage links, this is mainly for keeping the head looking clean, more of a anal developer thing. From what I have read, you are not going to be increasing speed, it is just to cut things down for a more polished head.

// clean up useless wordpress links in the head of the document
// remove wp version number, generator not needed for Thematic (it already removes it)
remove_action('wp_head', 'wp_generator');
// 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 relational start link
remove_action('wp_head', 'start_post_rel_link');
// remove prev/next relational link
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

Random HTML

Insert random div on to a thematic action hook. Currently set up to insert a div above the footer site-wide.

// add random div example
function snix_quick_div() { ?>
	<div class="any-class">
		HTML HERE
	</div>
<?php }
add_action('thematic_abovefooter','snix_quick_div');

This very basic structure comes in handy when you need to insert random div but want to feed different content on different pages.

// add random div example with conditional set
// http://codex.wordpress.org/Conditional_Tags
function snix_quick_div2() {
	if (is_single()) { ?>
		<div class="social-links">
			HTML FOR SINGLE POST ONLY
		</div>
	<?php }
	else { ?>
		<div class="other-links">
			HTML FOR EVERY OTHER PAGE
		</div>
	<?php }
}
add_action('thematic_abovefooter','snix_quick_div2');

Remove <h1> from Blog Description

Some child theme setups can have conflicts with what they feel should be the most prominent text, and by default on the homepage the blog description receives a h1 header. Issues can occur however when you use a static page as your homepage and you will actually then have two h1 tags.

// removes the H1 on main page which is duplicated when a page is used as a front page 
// also adds the content into a more semantic paragraph tag, where before it was just a div 
function childtheme_override_blogdescription() {
  $blogdesc = '"blog-description">' . get_bloginfo('description', 'display');
  echo "\t
\n\n";
}

Swap jQuery for Google CDN

Some people will tell you it is faster to use the CDN version because a person “may” already have the version cached. This is a pretty highly debated topic, either way, I don’t use it currently. But some people think it is cutting edge, like above, check to make sure you are using the latest version as it does frequently get updated.

Don’t use this snippet. If anything use a plugin to handle loading from the CDN, like Use Google Libraries.. The reason not to do this is you don’t want to hard code a jQuery version into your theme. The simple way to put why not to use it is what if in 2 years WP now needs a newer version? You probably don’t want to assume people will know to go in the functions.php and modify the version. ;P

// swap wordpress jquery for google hosted cdn
function snix_swap_jquery_for_cdn() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"), false, '1.6.4', true);
}
add_action('wp_enqueue_scripts', 'snix_swap_jquery_for_cdn');

Script Manager for Registering/Deregistering Scripts and Styles

This is a fairly complex example, but serves as a template for an elegant way of keeping track of all your scripts and styles, especially useful, you can see below that I load a slider, but only load the assets on the front page where they are needed, not a lot of people do this and it ends up adding a lot of page load to your site after enough plugins scripts or plugins are loaded.

// script manager template for registering and enqueuing files
function childtheme_script_manager() {
    // wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
    // registers modernizr script, stylesheet local path, no dependency, no version, loads in header
    wp_register_script('modernizr-js', get_stylesheet_directory_uri() . '/js/modernizr.js', false, false, false);
    // registers dropdowns script, local stylesheet path, yes dependency is jquery, no version, loads in footer
    // wp_register_script('dropdowns-js', get_bloginfo('stylesheet_directory') . '/js/superfish-dropdowns.js', array('jquery'), false, true);
    // registers fitvids script, local stylesheet path, yes dependency is jquery, no version, loads in footer
    wp_register_script('fitvids-js', get_stylesheet_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), false, true);
    // registers misc custom script, local stylesheet path, yes dependency is jquery, no version, loads in footer
    wp_register_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), false, true);
    // registers flexslider script, local stylesheet path, yes dependency is jquery, no version, loads in footer
    wp_register_script('flexslider-js', get_stylesheet_directory_uri() . '/flexslider/jquery.flexslider-min.js', array('jquery'), false, true);
    // registers flexslider styles, local stylesheet path
    wp_register_style('flexslider-css', get_stylesheet_directory_uri() . '/flexslider/flexslider.css');

    // enqueue the scripts for use in theme
    wp_enqueue_script ('modernizr-js');
    wp_enqueue_script ('fitvids-js');

        if ( is_front_page() ) {
            wp_enqueue_script ('flexslider-js');
            wp_enqueue_style ('flexslider-css');
        }

    //always enqueue this last, helps with conflicts
    wp_enqueue_script ('custom-js');

}
add_action('wp_enqueue_scripts', 'childtheme_script_manager');

Remove Plugin Styles/Scipts (Contact Form 7 example)

It is sometimes easier to remove plug styles/scripts using an example below, this current example just removes the Contact Form 7 plugin styling which personally I combine into the main CSS styling to match the theme. This example in some cases may be an easier way to do it than the above script manager. You may have to dig into a plugin to find what they are registering them as.

// deregister styles loaded by plugins
function childtheme_deregister_styles() {
    // removes contact form 7 styling
    wp_deregister_style('contact-form-7');
}
add_action('wp_print_styles', 'childtheme_deregister_styles', 100);

Thematic Widgets

This section will eventually be moved to its own page, since this page is bound to grow. :)

Removing Widget Areas in the WP Admin

Not everyone needs 13 widget slots and even less people want to look at all those slots in the admin. You can save yourself some time by removing what you don’t need for the current theme. The example below includes all 13 widgets, the ones commented out however are ones I do use often, the others almost never!. Obviously just comment out the ones you need, or remove the comments “//” to unset the widgets in the Admin Panel of WordPress.

// hide unused widget areas inside the WordPress admin
function childtheme_hide_widgetized_areas($content) {
//    unset($content['Primary Aside']);
//    unset($content['Secondary Aside']);
//    unset($content['1st Subsidiary Aside']);
//    unset($content['2nd Subsidiary Aside']);
//    unset($content['3rd Subsidiary Aside']);
    unset($content['Index Top']);
    unset($content['Index Insert']);
    unset($content['Index Bottom']);
    unset($content['Single Top']);
    unset($content['Single Insert']);
    unset($content['Single Bottom']);
    unset($content['Page Top']);
    unset($content['Page Bottom']);
    return $content;
}
add_filter('thematic_widgetized_areas', 'childtheme_hide_widgetized_areas');

Add a Footer Widget to Thematic

This will appear in the subsidiary div, you will have to add CSS styles but this is perfect for a footer widget to add a custom menu, or any widget.

// add 4th subsidiary aside widget, currently set up to be a footer widget underneath the 3 subs
function childtheme_add_subsidiary($content) {
    $content['Footer Widget Aside'] = array(
        'admin_menu_order' => 550,
        'args' => array (
        'name' => 'Footer Aside',
        'id' => '4th-subsidiary-aside',
        'description' => __('The 4th bottom widget area in the footer.', 'thematic'),
        'before_widget' => thematic_before_widget(),
        'after_widget' => thematic_after_widget(),
        'before_title' => thematic_before_title(),
        'after_title' => thematic_after_title(),
            ),
        'action_hook'   => 'widget_area_subsidiaries',
        'function'      => 'childtheme_4th_subsidiary_aside',
        'priority'      => 90
        );
    return $content;
}
add_filter('thematic_widgetized_areas', 'childtheme_add_subsidiary', 50);

// set structure for the 4th subsidiary aside
function childtheme_4th_subsidiary_aside() {
    if ( is_active_sidebar('4th-subsidiary-aside') ) {
        echo thematic_before_widget_area('footer-widget');
        dynamic_sidebar('4th-subsidiary-aside');
        echo thematic_after_widget_area('footer-widget');
    }
}

Move Subsidiary Widgets Above the Footer

A example of moving the subsidiary widget slots from inside the footer to above the footer.

// move the subsidiary widget area above the footer
function childtheme_move_subsidiaries($content) {
    $content['1st Subsidiary Aside']['action_hook'] = 'thematic_abovefooter';
    $content['2nd Subsidiary Aside']['action_hook'] = 'thematic_abovefooter';
    $content['3rd Subsidiary Aside']['action_hook'] = 'thematic_abovefooter';
    return $content;
}
add_filter('thematic_widgetized_areas', 'childtheme_move_subsidiaries');

// unhook everything else that's related to the subsidiary widget area
function childtheme_move_relatedfunctions() {
    remove_action('widget_area_subsidiaries', 'thematic_subsidiaryopen', 10);
    remove_action('widget_area_subsidiaries', 'thematic_before_first_sub', 20);
    remove_action('widget_area_subsidiaries', 'thematic_between_firstsecond_sub', 40);
    remove_action('widget_area_subsidiaries', 'thematic_between_secondthird_sub', 60);
    remove_action('widget_area_subsidiaries', 'thematic_after_third_sub', 80);
    remove_action('widget_area_subsidiaries', 'thematic_subsidiaryclose', 200);
}
add_action('thematic_child_init', 'childtheme_move_relatedfunctions');

// add the related functions back in to the to abovefooter hook
add_action('thematic_abovefooter', 'thematic_subsidiaryopen', 10);
add_action('thematic_abovefooter', 'thematic_before_first_sub', 20);
add_action('thematic_abovefooter', 'thematic_between_firstsecond_sub', 40);
add_action('thematic_abovefooter', 'thematic_between_secondthird_sub', 60);
add_action('thematic_abovefooter', 'thematic_after_third_sub', 80);
add_action('thematic_abovefooter', 'thematic_subsidiaryclose', 200);

Modify the Site Info

Another thing that just bugs is that the site info just sits in a div, at least make it sit in a more semantic paragraph tag, although it depends what you use it for, however I use this a lot. You could also use this to plug a link to your site in the footer if you released a free theme.

// just because, wrap the site info in a p tag automatically 
function childtheme_override_siteinfo() { 
  echo "\t\t<p>" . do_shortcode( thematic_get_theme_opt( 'footer_txt' ) ) . "</p>\n"; 
}

Thematic Theme Author Box

Currently it is setup up to do two things, the first part involves removing outdated services like “AIM, Yahoo Instant Messenger and Jabber” and replacing them with Twitter and Facebook which are more relevant. The second part is the actual Author Box, which offers a Author Bio based on the Users settings in the WP Admin. For a more complicated example that actually also grabs the Facebook and Twitter info, check this forum post, this example just uses the description which allows HTML.

// modify user profile contact info in wordpress admin
// http://wp-snippets.com/addremove-contact-info-fields/
function childtheme_contactmethods( $contactmethods ) {
    $contactmethods['twitter'] = 'Twitter Username'; // add twitter
    $contactmethods['facebook'] = 'Facebook Link <span class="description">(http:// required)</span>'; // add facebook

    unset($contactmethods['yim']); // remove yahoo instant messenger
    unset($contactmethods['aim']); // remove aol instant messenger
    unset($contactmethods['jabber']); // remove google talk / jabber services

    return $contactmethods;
}
add_filter('user_contactmethods','childtheme_contactmethods', 10,1);

// add a author box for thematic above the comment section
// http://themeshaper.com/forums/topic/thematic-author-box
function childtheme_authorbox() {
    if ( is_single () ) { ?>
        <div class="authorbox cf">
            <h4><span>About</span> <?php the_author_meta('nickname'); ?></h4>
            <div class="authorbox-image"><?php echo get_avatar( get_the_author_meta('email'), '80' ); ?></div>
            <div class="authorbox-info">
                
                <?php if ( get_the_author_meta('description')) { ?>
                <p><?php the_author_meta('description'); ?></p>
                <?php } ?>
            </div>
        </div>
    <?php }
}
add_action('thematic_abovecomments','childtheme_authorbox');

Thematic Post Thumbnail Sizing

By default it is a little small, this will beef it up, with responsive design around it is probably better to do it a little bigger and shrink it down with CSS, for some reason that looks better than scaling up. This is used by the “Featured Image” functionality.

// featured image post thumbnail sizing
function childtheme_post_thumb_size($size) {
    $size = array(300,225);
    return $size;
}
add_filter('thematic_post_thumb_size', 'childtheme_post_thumb_size');

Thematic Maintenance Notice

Sometimes you want to work on a live site, but provide a notice to users that “hey, stuff may look funny because I am currently working on the site”. You can change the text to whatever you want, but this is super cool! The way it works is through CSS3 Psudeo Elements, so technically even though it is visible, the content doesn’t actually get put on the page so you don’t have to have the notice indexed by search engines, since they ignore psuedo elements which aren’t considered content. Just make sure to add your message in the CSS portion leaving the HTML content blank. Awesome.

function childtheme_maintenance_notice() { ?>
    <style>
        .maintenance { margin: 1em 2em; padding: .5em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
        .maintenance p { margin: 0; padding: 0; width: 100%; }
        .maintenance p:before { content: "This site is currently undergoing some major revisions (new custom theme), so some stuff may look funny. :)" }
    </style>
    <div class="maintenance"><p></p></div>
<?php }
add_action ('thematic_belowheader', 'childtheme_maintenance_notice');

Nivo Gallery Example – Static

Runs the Nivo Gallery (not Nivo Slider), but the way to set them up is pretty much the same. This is currently running off static content, you can however modify this to run off something like “sticky posts” also.

// nivo gallery example, no longer load scripts this way, needs an update, prefer to enqueue, then register (do both although this way totally works fine).
// script manager template for deregestering and registering files.
function childtheme_nivo_script_manager() {
    // wp_enqueue_script template ( $handle, $src, $deps, $ver, $in_footer );

        if ( is_home() || is_front_page() ) {

        wp_enqueue_script('nivo-gallery', get_stylesheet_directory_uri() . '/nivo/jquery.nivo.gallery.min.js', array('jquery'), true);
        wp_enqueue_style('nivo-gallery-style', get_bloginfo('stylesheet_directory') . '/nivo/nivo-gallery.css');
        }
}
add_action('wp_enqueue_scripts', 'childtheme_nivo_script_manager');


// nivo gallery options on home/frontpage - http://nivogallery.dev7studios.com/documentation/options/
function childtheme_nivo_gallery_options(){
    if ( is_home() || is_front_page() ) { ?>
        <script type="text/javascript">
            jQuery('#gallery').nivoGallery({
                pauseTime: 3000,
                animSpeed: 300,
                effect: 'fade',
                startPaused: false,
                directionNav: true,
                progressBar: false
            });
            // pause on hover (stops slides completely)
            // jQuery('#gallery').hover(function(){
            // jQuery(this).data('nivoGallery').pause();
            // });
        </script>
    <?php }
}
add_action('wp_footer', 'childtheme_nivo_gallery_options');

// niva gallery running off static content inserted into header, not super flexible, but works
function childtheme_nivo_gallery() {
    if ( is_home() || is_front_page() ) { ?>
        <div id="gallery" class="nivoGallery">
            <ul>
                <li data-type="html" data-title="Lorem ipsum 5" data-caption="dolor sit amet, consectetur adipiscing elit">
                    <h1>Nesting Test</h1>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </li>
                <li data-type="video" data-title="Vimeo Video">
                    <iframe src="http://player.vimeo.com/video/29950141?portrait=0&amp;color=ffffff" width="670" height="377" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
                </li>
                <li data-type="video" data-title="YouTube Video">
                    <iframe width="560" height="315" src="http://www.youtube.com/embed/72hTSFkYVAo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
                </li>
                <li data-type="video" data-title="HTML5 Video">
                    <video width="700" height="390" controls="control" preload="none">
                        <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
                        <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
                        <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
                    </video>
                </li>
            </ul>
        </div>
    <?php }
}
add_action('thematic_header', 'childtheme_nivo_gallery', 10);

WordPress Theme Options

You can get pretty crazy with theme options, but if you are looking for a custom header image (static) or a custom background (image or color), that functionality is pretty much built into WordPress and can be easily added to themes, just don’t forget some kind of defaults. Only the header image is technically Thematic specific.

// adds custom header section in Admin, good for static images in header, needs default
// http://make.wordpress.org/themes/2012/04/06/updating-custom-backgrounds-and-custom-headers-for-wordpress-3-4/
$headerargs = array(
    'flex-width'     => true,
    'width'          => 960,
    'flex-height'    => true,
    'height'         => 150,
    'default-image'  => get_stylesheet_directory_uri() . '/images/header.png',
);
add_theme_support( 'custom-header', $headerargs );


function childtheme_add_header_image() { ?> 
    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> 
<?php }
add_action('thematic_header', 'childtheme_add_header_image', 6);

// adds custom background section in the Admin, good for super easy options
$backgroundargs = array( 
    'default-image'          => '',
    'default-color'          => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', array(
    // bgcolor default
    'default-color' => '000',
    // image default
    'default-image' => get_stylesheet_directory_uri() . '/images/background.jpg'
) );

Add Recent Posts

An example of a query of recent posts from a specific category, this is a good little template to modify for custom queries, it is set on a hook to add it above the footer on the front page, but is super useful for a lot of things.

// display 2 recent posts from cat=9 (category 9), see link below for full list of parameters. 
// http://codex.wordpress.org/Class_Reference/WP_Query 
function childtheme_recent_posts_query () {
  if ( is_front_page() ) {
    echo '<div class="recent-posts">';
    $my_query = new WP_Query( array( 'cat=9', 'posts_per_page' => 2 , 'ignore_sticky_posts' => 1) );
      echo '<ul class="featured-posts">';
        while ($my_query->have_posts()) : $my_query->the_post(); ?>
          <li> <?php
            $posttitle = '<h3><a href="';
            $posttitle .= get_permalink();
            $posttitle .= '" title="';
            $posttitle .= the_title_attribute('echo=0');
            $posttitle .= '" rel="bookmark">';
            $posttitle .= get_the_title();
            $posttitle .= "</a></h3>\n";
            echo $posttitle;

            if ( has_post_thumbnail() ) { ?> 
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a> 
            <?php } else { ?> 
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute('echo=0'); ?>"><img height="120" width="210" src="<?php bloginfo('stylesheet_directory'); ?>/images/testimage.png" /></a> 
              <?php } 

              the_excerpt(); 

              echo '<a href="'. get_permalink() . '">' .__('View &raquo;', 'thematic') . '</a>'; ?> 
          </li> <?php 
        endwhile; 
      echo '</ul>'; 
    echo '</div>'; 
  } 
} 
add_action ('thematic_abovefooter', 'childtheme_recent_posts_query');