AP-Blueprint

screenshot AP Blueprint

AP Blueprint is a theme framework we initially built a year ago.  Since then, we’ve used it as the foundation of all of our themes, be it for client work or Museum Themes.  But after a while, we started to add things to themes that weren’t in the framework.  Over time, this got to be more and more common, so we decided it was time to update the framework.

The most recent version includes @Twitter hovercards, better styling for post comments, a few additions to the sharing links under posts, the updated Tweet This link from Twitter and the new Tweet This button, widgetized footer, WordPress 3.0 menus, and a theme options page for social networking links, Twitter controls, and sidebar controls.

Interested in contributing to, or building on top of AP-Blueprint?  We’ve also set up a repository on GitHub.

Download AP-Blueprint | View Demo

Downloaded 19 times

You might also be interested in these:

  1. Color Garden
  2. erin’s sketchbook
  3. Grid

How I fixed the “cannot redeclare _checkactive_widgets()” error in WordPress child themes

So, I had a problem.  For a while I’ve noticed a whole bunch of code being tacked on to my functions.php file.  I’ve had no idea where it came from since I certainly didn’t write it, so I generally just removed it when I saw it.  Then I noticed this weird php error when I built a child theme saying “cannot redeclare _checkactive_widgets()”.  After a few minutes, I realized that it was that same piece of code that’s been tacked onto my functions.php file, only now, since it’s a child theme with two functions.php files, it’s there twice (redeclared).  What gives?

From what I can tell, indirectly (because I’ve found zero documentation on this issue, and I’ve Googled my fingers numb trying), the _checkactive_widgets function basically looks for whatever widgets you have on your current theme and makes sure they get saved when you switch themes so you don’t have to start over.  A great idea.  But if you’re using a child theme, you get my problem.  The only thing I could think of doing is deleting that piece of code, but, from some trial and error, as far as I can tell, whenever you do just about anything in the back-end, it automagically regenerates the code.  So here’s how you fix it:

Using the “Tip for theme developers” note in the Child Themes entry in the WordPress Codex as a guide, I added this to my functions.php file:

if (!function_exists('_checkactive_widgets')) {
	// do nothing
}

This says “if the _checkactive_widgets function doesn’t exist, do nothing.” If it didn’t exist, presumably WordPress would add it in, and this prevents that. It already exists in the parent theme, and the parent’s functions.php gets run next, so this prevents overlap. This has been bugging the hell out of me for weeks, so hopefully it helps someone else.

You might also be interested in these:

  1. How to add customizable header images and customizable backgrounds to your WordPress theme
  2. Using the WordPress embed shortcode for YouTube, Vimeo, more
  3. How to upgrade your Museum Theme to the most current version after you’ve made changes to the files

How to add customizable header images and customizable backgrounds to your WordPress theme

One of the coolest new features of WordPress 3.0 is the ability to customize the site header image and background color or image. The custom header actually goes one step further and lets you set a unique header for each of your pages. This means that you can create unique headers that tie into the content of the page without complex if (is_page()) statements or hard coding them into unique page templates. The only problem is that these features need to be added into the theme for them to show up as options in your wp-admin panel and not every free (or even commercial) theme has those options set up and ready to go.

Not all themes are made for big, changeable headers, but for those that are or would adapt well, this gives users a powerful resource far beyond the custom header features that Kubrick, the previous default WordPress theme, offered with its’ ability to change the header color and gradient. Likewise, I’m tentative about giving users the ability to pick a color at random from the 16 million colors at their disposal – it’s too easy to create clashes worthy of the most gaudy GeoCities or MySpace creations. However, used with discretion and a keen eye, these features add a powerful tool to those WordPress users’ arsenal who are just itching to add a little bit of personality to their site without breaking everything.

Our newest free theme, Color Garden includes both custom headers and custom backgrounds, making it our first theme – free or otherwise – to offer both. I also played with custom headers on my recent redesign of jazzsequence.com. For the headers, it’s not the most intuitive thing to add by hand at all, and few of the resources I have found go far beyond quoting the code from TwentyTen’s functions.php file, so we wanted to give our readers just a little bit more to go on if you want to add these features to your blog theme.

Custom backgrounds are dead simple. A single line of code and you’re done:

// This theme allows users to set a custom background
add_custom_background();

Once this is included somewhere in your functions.php file, you will have a Background link under Appearance that gives you options to set a solid color for the background (by hex code or picking from a color map) or upload an file to use as a repeating background image.

Headers are a bit more complex.

To really understand how custom headers work, you need to know how post thumbnails work. Post thumbnails were added to WordPress core in 2.9 and use the built-in resizing process that happens when you upload images to create the thumbnails that will appear next to your post or post excerpt. This is presumably to replace other third-party scripts like the ubiquitous TimThumb which creates its own thumbnails and stores it in a cache folder usually located in the theme folder (although it could really be anywhere). Since WordPress 3.0, what was previously referred to as Post Thumbnail on the Add New Post page is now called Featured Image. This change is reflects the fact that the Featured Image option now controls the post thumbnail or the custom header, and the way it knows the difference is by the size of the image you are using.

Let’s take a look at how to add it to your theme and then we can revisit how to use it once it’s there. The code I will be showing comes from Color Garden although all of it has been adapted from TwentyTen (including much of the comments). Since most other posts I’ve found don’t discuss each piece of the header image function, I will go over each so you understand just what it is that you’re adding and what needs to be changed or left alone.

The first part is here:

// Your changeable header business starts here
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/leaves.jpg' );

The key thing to pay attention to in this snippet is the HEADER_IMAGE definition. This is the default header image. If this is left blank or set to an invalid path, no image will show up, and depending on your CSS, the layout might break. In TwentyTen this is set to %s/images/headers/path.jpg. You’ll probably want to put something here even if you plan on changing it later, and you’ll want to make sure the image actually exists where you say it exists.

The next part sets the height and width of your header image:

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'cg_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'cg_header_image_height', 343 ) );
 
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 1000 pixels wide by 343 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

Notice that we’re using set_post_thumbnail_size with the header image’s dimensions. This is because the custom header function uses the existing post thumbnails function from 2.9 and builds onto it. As the comments indicate, images that are equal to or larger than the height and width definitions will be resized to fit and set as the header image when you add it to your post or page. Anything smaller will be ignored and set as the post thumbnail (if post thumbnails are enabled).

The last part of the custom header function is this:

// Don't support text inside the header image.
define( 'HEADER_TEXTCOLOR', '' );
define( 'NO_HEADER_TEXT', true );
// ... and thus ends the changeable header business.

The NO_HEADER_TEXT and HEADER_TEXTCOLOR add the ability to change the color of the text that appears in the header. The alternative (pulled from the WordPress Codex) would be to use:

define('HEADER_TEXTCOLOR', 'ffffff');

and omitting the NO_HEADER_TEXT line.

Now this part is done, you’ve enabled custom headers and defined a default. But what if you want to have multiple defaults like TwentyTen? In that case, we go back to TwentyTen’s functions and keep digging:

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
 
'leaves' => array(
'url' => '%s/images/headers/leaves.jpg',
'thumbnail_url' => '%s/images/headers/leaves-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Leaves', 'cg' )
),
 
'sunset' => array(
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Sunset', 'cg' )
),
 
'beach' => array(
'url' => '%s/images/headers/beach.jpg',
'thumbnail_url' => '%s/images/headers/beach-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Beach', 'cg' )
),
 
'blueberries' => array(
'url' => '%s/images/headers/blueberries.jpg',
'thumbnail_url' => '%s/images/headers/blueberries-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Blueberries', 'cg' )
)
) );

Again, we’re looking at the code from Color Garden but it’s adapted from TwentyTen’s functions.php. Each item in the array above defines one of the default header image options. Color Garden has four default headers to choose from to go with the four color schemes built into the theme. All we’re really doing here is adding the path to the image, the path to the thumbnail of the image that appears on the Headers page in the WordPress backend, and the description which – as far as I have been able to tell – really only affects the alt text of the image in the backend.

All said, what you should be looking at in your functions.php file when you’re done is this (if you’re including multiple default header images):

// Your changeable header business starts here
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/leaves.jpg' );
 
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'cg_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'cg_header_image_height', 343 ) );
 
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 1000 pixels wide by 343 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 
// Don't support text inside the header image.
define( 'HEADER_TEXTCOLOR', '' );
define( 'NO_HEADER_TEXT', true );
 
// ... and thus ends the changeable header business.
 
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
 
'leaves' => array(
'url' => '%s/images/headers/leaves.jpg',
'thumbnail_url' => '%s/images/headers/leaves-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Leaves', 'cg' )
),
 
'sunset' => array(
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Sunset', 'cg' )
),
 
'beach' => array(
'url' => '%s/images/headers/beach.jpg',
'thumbnail_url' => '%s/images/headers/beach-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Beach', 'cg' )
),
 
'blueberries' => array(
'url' => '%s/images/headers/blueberries.jpg',
'thumbnail_url' => '%s/images/headers/blueberries-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Blueberries', 'cg' )
)
) );

What I haven’t said yet is that in every instance that cg appears in the code, this specifically references Color Garden. In TwentyTen it’s twentyten. You can put whatever you want here so long as it remains internally consistent.

After you’ve got your functions.php set up, you still need to add in some code in your header.php to actually display the custom header image. What we have in Color Garden is taken almost verbatim out of TwentyTen.

	  <?php
          // Check if this is a post or page, if it has a thumbnail, and if it's a big one
          if ( is_singular() &&
                  has_post_thumbnail( $post->ID ) &&
                  ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
                  $image[1] >= HEADER_IMAGE_WIDTH ) :
              // Houston, we have a new header image!
              echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
          else : ?>
              <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" class="masthead" />
          <?php endif; ?>

This is where the theme asks “what is the size of the featured image?” and, based on the size, determines whether it is a header image or a post thumbnail.

Now, obviously there needs to be some CSS styling involved and you may or may not want your header image to be 1000 pixels wide by 343 high like ours is in Color Garden. We added a “masthead” class to the image so we could isolate styles to our header image. But, if you’ve made it this far, you’ve got everything you need to tweak the code to suit your theme. The custom headers function is exciting because it doesn’t need to be limited to just header images. You can use it wherever you might want a customizable image in your theme, and there’s more than a few creative uses I can think of beyond headers for something like that.

You might also be interested in these:

  1. How I fixed the “cannot redeclare _checkactive_widgets()” error in WordPress child themes
  2. How to upgrade your Museum Theme to the most current version after you’ve made changes to the files
  3. 12 Free WordPress Themes I Like (and you should, too)

Color Garden

Color Garden is a free theme released on Museum Themes under the GPLv3.  This theme is jam-packed with features, from WordPress 3.0 functionality to Twitter integration.  Color Garden uses WP3.0′s custom header option, and comes with 4 unique headers that accent the 4 color palette options available on the theme options page.  We’ve also built in custom menus, custom backgrounds, and post thumbnails, hitting all the bases for cutting-edge WordPress functionality.  If you use Twitter, we’ve got you covered there, too, integrating Twitter’s new Tweet button into our existing social sharing block on single post pages and providing options to display your latest tweets in the sidebar or the footer.  The footer and sidebar are completely widgetized, and the footer has three distinct columns to add widgets.  If that wasn’t enough, we’ve embedded a custom typeface in the header using CSS font-face.  Each color palette has its own unique stylesheet, so you can easily use this theme as a framework or build child themes (or skins) for it.

View Demo | Download Color Garden

2.7 MB
downloaded 79 times




You might also be interested in these:

  1. Simple Gray
  2. erin’s sketchbook
  3. Baby SweetTooth

Using the WordPress embed shortcode for YouTube, Vimeo, more

This was going to be a post on building a WordPress shortcode that you’d use like inside your posts to take care of the embedding.  My experience has been that when you flip over to HTML view to paste your code and then flip back to the Visual editor to finish your post, a lot of the embed code gets lost as the TinyMCE editor tries to “fix” what it sees as bad or invalid code.  I’ve always overcome this myself by putting in some placeholder text, like al;dkjflkjsflkdj, doing the rest of my post, and then replacing that with the embed code in HTML view and posting.  A shortcode would make things easier and take out a lot of the unnecessary hassle.

Turns out, they’re one step ahead of me.

Starting in 2.9, WordPress implemented the shortcode.  What this means is that you can wrap a YouTube or Vimeo url in url tags and WordPress will take care of the code part automagically.  You can even enter the url without the tags (if you put it on its own line, like so:

http://youtube.com/yourvideo

That’s great, but what if you’re a control freak and want to specify the size of the embed?  WordPress has got you covered there, too.  Scroll down to Settings and click on Media.  You’ll see this:

Here you can set the max height and/or width it will default to when it creates the embed code.  You can also disable the function to automatically try to create an embed for plain text urls.

Does it work with everything?  No.  For security reasons, they’ve limited the sites they create the embed for to a white list of approved sites.  But chances are, if you’ve thought to embed it, they’ve got you covered.  A complete list is on the WordPress Codex page for Embeds.  Is it perfect?  No.  In particular, I’ve noticed Vimeo doesn’t always scale according to what you set in the Media Settings.  Still, for what it does, it’s pretty awesome.  Especially if you’ve been doing it the hard way all this time.

Now, you can still create a shortcode if, for example, you wanted to simplify things one step further and do something like .  You can head over to Creating Simple oEmbed-Based WordPress Shortcodes on Viper007Bond if you want to get your hands dirty and play around with that.

What’s it look like?  Well, it looks a little like this: