Sharedaddy

Customizing Jetpack’s Sharing module

One of my favorite feature in Jetpack is sharing, but if you are a theme designer/developer like me, it can be really frustrating trying to customize it.

By adding a simple filter to functions.php or inc/jetpack.php if your theme is based on _s, you can actually avoid the Sharedaddy stylesheet from being enqueued.

/**
 * Remove Jetpack's sharing script.
 */
function _s_remove_sharedaddy_script() {
	remove_action( 'wp_head', 'sharing_add_header', 1 );
}
add_action( 'template_redirect', '_s_remove_sharedaddy_script' );

Now you can add you own custom CSS without worrying about multiple levels like .site-main .entry-content > .sharedaddy .sd-title, or having to use !important to overwrite the Sharedaddy stylesheet.

If you want to go a bit further, you can use some jQuery/Javascript. For example, if you want to create a link that, when you click on it, toggles the sharing buttons:

1) Let’s add some CSS to hide the div:

.sd-sharing-enabled:not(#jp-post-flair) {
	display: none;
}

2) Then create some (very basic) jQuery to do the magic:

/*
 * Create a toggle button for sharedaddy.
 */
function sharedaddy_toggle() {

	// Create toggle button
	$( '.sd-sharing-enabled:not(#jp-post-flair)' ).each( function() {
		$( this ).before( '<a class="sharedaddy-sharing">Toggle Button</a>' );
	} );
	
	// Click to open
	$( '.entry-content' ).on( 'click', '.sharedaddy-sharing', function() {
		$( this ).next( '.sd-sharing-enabled' ).toggle();
	} );
	
}

Make sure you load the function after the window is loaded and after a post-load (for Infinite Scroll).

3) Ta-da!
Sharedaddy toggle

You can do the same with the Related Posts module or Likes module like so:

/**
 * Remove Jetpack's related-posts and likes scripts.
 */
function _s_remove_jetpack_scripts() {
	wp_dequeue_style( 'jetpack_related-posts' );
	wp_dequeue_style( 'jetpack_likes' );
}
add_action( 'wp_enqueue_scripts', '_s_remove_jetpack_scripts' );

Be aware that the Likes module isn’t fully customizable because the buttons are located in an iframe.

Have fun!

Why Hard Working Classes Slack in WordPress

Nathan Ford wrote a great article about how you can use the attribute selector to define styles for a multitude of classes that share a common element. Initially I thought this was great (I actually still think this is a great idea), and used it in _s and Twenty Thirteen to simplify the clearfix selector and some others. We used [class*="site"] and [class*="content"], to grab all classes that contained those two words, essentially addressing our entire page structure with two selectors. Awesome, right?

Well, it turns out there are a few issues with this approach. After a while we received a report that Modernizr uses a generatedcontent class on the html element, screwing with the rest of the site because the styles for the [class*="content"] selector were applied. We also received reports from WordPress.com, where users specified tags, categories, or post titles that contained one of our two words. Since WordPress adds all categories and tags as classes in post_class(), this, again, broke the site’s layout.

I still think this a valid approach in projects where you can control the class namespace. Since you can’t really do that in WordPress, it’s not a good approach for theme developers.

The Recipe for a Great Theme

Have you ever looked at a WordPress theme and thought, “Man, I wish I could do that!” Well, here’s a little secret: You totally can.

Yes, you can make a theme, and you don’t need to be a theme expert to do so. You just need three things:

  • An idea,
  • a healthy dose of curiosity,
  • and time.

An Idea

Until five years ago, I’d never touched a WordPress theme. I didn’t have a lot of experience, I’d never experimented with dynamic programming languages, and I’d never had to design for a vast and varied audience.

But what I did have were ideas – how about a theme for babies? Or a theme with changing seasons? Or a theme with animated fish? I didn’t know how to make these themes happen – I just knew I wanted to make them.

Without an idea, there is no theme! So before you do anything, figure out what you want to build. Have a goal to strive for, write up some notes, sketch it out.

It doesn’t have to be mind-blowing, or revolutionary, or the Next Big Thing, as long as you’re excited about it. You’re probably not going to make history with your first theme, but why let that deter you from making something really cool?

A Healthy Dose of Curiosity

If you like to learn, you’ve already taken a huge step toward becoming a themer. WordPress changes often, so theming techniques change often, too. You don’t have to venture far for learning material – you’re looking at a wealth of theme-makin’ goodness right here at ThemeShaper!

But I encourage you not to get mired in the technical details. You know how you may use Photoshop, but you probably don’t use one-tenth of its capabilities? Theming is like that. You don’t need to know how to do it all – you just need to figure out one piece at a time.

Think of your theme as a puzzle, and break it into smaller components – a fixed sidebar, an animated drop-down menu, a customizable header that changes colors – together they’re an intimidating obstacle, but if you tackle each piece individually, you’re likely to find it’s not as difficult as you think.

Also keep in mind, you don’t necessarily need to start from scratch (unless you want to!) Maybe you’re less interested in coding a theme, but you want to illustrate one – you can always build a child theme, or use a starter theme, so you don’t have to dive as deeply into the code.

Here are some of our favorite ThemeShaper resources to get you started:

And finally, tutorials have their place, but don’t be afraid to play around! Some of the best learning experiences and discoveries are hands on. Remember: There are very few things you could do to your WordPress theme that a quick Ctrl+Z can’t fix.

Time

We’ve come to the part I can’t help with. You have the idea, you have the tools, now you just have to make it happen. Easier said than done, but as they say, Rome wasn’t built in a day. Some of the best themes take weeks, months, or possibly even years, to come to fruition.

But beware: Theming is addictive. If you spend enough time with it, you may find yourself staying up late into the night to squash a CSS float bug, or research scripts for a post slider, or find just the right shade of blue for that navigation menu. Don’t say I didn’t warn you!

I hope this inspires you to give theming a chance if you haven’t already – it’s a great opportunity to try something new and make something cool!

Finding the Perfect Theme

Our very own Lance Willett spoke recently at WordCamp Phoenix about the art of finding the perfect theme:

Feel free to get started by checking out our latest four themes that were added to the WordPress.org theme repository: Forever, Vertigo, Reddle, and Quintus!

Post Formats and Content Templates in the Toolbox Theme

Toolbox 1.1 is on it’s way with support for two of WordPress 3.1′s new Post Formats — Aside and Gallery — and a new template structure based on a content.php template. Let’s take a look at what’s new.

Update: It’s available now! Go get it and check it out.

So, Post Formats. I love them and I bet if you’re at all interested in WordPress theming you’re probably interested in them too. Toolbox 1.1 will add support for Aside and Gallery posts along the same lines as the new Twenty Ten theme will. If you’re familiar with the Twenty Ten theme you know what to expect. It already mimics this new feature with Categories. Asides have a hidden title on blog pages and Gallery posts have a thumbnail from your post’s gallery along with a sentence letting visitors know how many images are in the gallery. It’s pretty cool.

Continue reading