Tag: themes

Multiple “Share This” On Your Front Page
So you want people to be able to easily share your posts, and you install Jetpack and configure it so that the happy icons only show up on posts and pages (since you can’t make it show on only posts).

Then you decide to make a Static Front Page so everything looks pretty. Except you get multiple instances of the sharing links! That isn’t what you wanted at all!

The problem is that the when you make a static front page, it’s actually not an index page. It is simply a page using a template. Strictly speaking, it’s not an archive page, nor an index page, and because of that it’s treated like any other page and the ‘share this’ settings treat is ‘correctly’ by showing itself every time a page/post is called. I did report this to Jetpack, by the way, and they were a bit torn on if this is Jetpack being silly or something that needs to be addressed in core (that is, does WordPress need to grow up and treat a static front page as an index page).

While they’re hashing this out, you can fix it yourself, which is a relief to those of us who ran into this.

The easiest (and actually best) way is to use the WordPress template hierarchy to your advantage. If you use a front-page.php file instead of a static front page, WordPress knows that it’s an index page. This is the best way because you don’t make any extra ‘calls’ to the code. WordPress tucks it away on it’s own. To do this, if you’re using a page template, just copy the template (say page-snarfer.php) into front-page.php and call it a day. Depending on your theme, you may need to add a call to any special classes being called. (I know that if you use Hybrid Core, you need to add a call to page-template-home for it to format right.)

But sometimes you can’t do that. Like if you’re on MultiSite and you use the same theme for multiple sites and you don’t want them all to have the same style of front page. Well now we have a minor problem. First thing to do is turn off sharing for the page you’re using as the static front page.

Doing just that brought me to this:

In this case, I’m using a static front page with some content, formatted via the Twenty Eleven “Showcase Template” to show recent posts below my content. The first post shows up as an excerpt and then the rest show as titles with links (apologies for the different color):

So for this theme it works perfectly and I’m happy as can be. This method also works if you’re using a Static Front Page without a page template!

But. That doesn’t work for all themes. And this is where we have to do the ugly things we don’t want to do. We have to edit CSS. In and of itself, this is pretty easy but I think it’s a poor choice because all this will do is hide the icons from displaying, and that means the code still gets rendered and call and that means you’re putting more work into loading your page than you need.

Sometimes you just can’t fix it the best way, and acknowledging that, here’s how to do it. First, you must be using a page template for your static front page. (I said this once before, but it bears repeating: If you’re not using a page template, you can fix this by just turning off the sharing for the page.) Open up that template and look for something like this:
```
<div id="primary" class="showcase">
```
Once you’ve found it, you just have to add in a CSS call:
```
div#primary.showcase div.sharing {display:none;}
```
That says “In the primary.showcase div, if anything’s using the div sharing, hide it.” Not the most elegant or efficient way about it, but it gets the job done.
9 September, 2011
Website Viewability

The goal to make your site look cool, be easy for people to use, and be available for all, is a holy grail trifecta that is rarely achieved. Many times, you have to sacrifice one leg of the tripod in order to achieve your goals.

The advent of Typekit has led to a lot of websites using cool custom fonts in a way that is supposed to solve that age old problem of what happens when you design your site with a font the end-user doesn’t have. For a very long time I couldn’t understand what the big deal was, since I often read these sites from work, and their fonts were all jaggedy and ugly. Then I fired up a site from home and was astounded at the difference.

This is what I normally see when I go to TypeKit:

This is what you’re supposed to see:

I know it doesn’t look too bad, but basically what I don’t get are the nice, smooth, edges on fonts, so when I read a whole page like that, it’s hard on the eyes. TypeKit works by javascript, so arguably, it should work on all browsers with JS enabled (which is to say all modern browsers). I’m using Chrome (latest and greatest) and I get crap.

That’s from Ed Jeavons’ Beyond web-safe fonts with Typekit, which is a great article. But the whole thing is unreadable to me because of that.

So where is the break down here? TypeKit’s goal is to make their fonts work on every site, regardless of if you have the font installed on your server. Jeavons says “Typekit degrades gracefully so that anyone without JavaScript, or with a browser that doesn’t support the necessary features, will simply revert to your standard CSS rules.” If that was the case, shouldn’t I be seeing a better site?

According to TypeKit, the problem is that the sites I’m seeing didn’t make good standard CSS rules. My anecdotal evidence suggests otherwise. After all, every site I go to has the exact same problem. So I turned off javascript and went back to the site:

Now that looks like you’d expect graceful degradation! At this point, my answer is that something TypeKit does is unwelcome on my office computer. Or more likely, my office firewall. That’s a whole new kettle of fish. I can’t reasonably expect everyone to go find an office behind a firewall made of adamantium and test their site. But clearly this is not the fault of the individual site. Is it reasonable to expect TypeKit to look into this? I went on a search and found they have a cool little checker too typecheck which says I’m fine:

There’s nothing in their FAQ or help desk that mentions Firewalls having this issue, so I decided to check out Google Web Fonts. Lo and behold, I get the same problem. Some more digging and I found someone who ‘fixed’ the problem using css. My Twitter friend @cgrymala suggested I also try ClearType, since I’m on Windows XP at work. That actually helped a lot (seriously, I cannot tell you how much nicer things look) but the main problem is still there.

Where’s my problem? My problem is that TypeKit and Google Web Fonts, while they purports to be a one-size-fits-all/degrades-nicely app, are not. If you’re not on the forefront of technology, if you’re behind a firewall, if you’re on a weird setup, these things are not going to work. This is not really TypeKit’s or Google’s fault. They’ve done an amazing job setting things up so it works most of the time. At best, they could have their javascript detect browser and OS (yes, you can do these things) and if it’s IE 6 or Windows XP (for example), revert to the javascriptless version of the site.

It’s nigh impossible to solve the firewall problem. You can’t detect the firewall easily, and part of the point of them is they obfuscate who and what they are. And if the problem is a combination of OS, browser and firewall, then the best you might be able to do is somehow detect if any one of those three are on the known ‘possible’ trouble list, and shunt them off to a non-js version. And now you’ve added a lot more load to your server.

The best you can do is to avoid using these cool systems and features until they’re more supported, which is where the whole concept of sacrifice comes in. If it’s more important for you to have your site look cool than to work for everyone, you have to find a way to degrade better. For a long time I had an alert bar on my site to tell you that if you were using IE 6, you needed to upgrade. Going back further, we used to regularly make sites that said ‘Best viewed in Netscape Navigator.’ Thankfully sanity struck, web standards started to stick, and we began to design sites that looked good in most browsers.

I cannot advocate a return to ‘Best viewed in…’, but I can suggest that if you’re relying heavily on cool, cutting edge, features, you also have a printer-friendly version of your site that runs without any of the bells and whistles.

16 May, 2011
WordPress: Sticky Posts On Static Front Page
I built my Dad a site, and while he still emails me the content, I still want the code to be easy to use for me and, in theory, for him one day. The original design was (and is) a static front page with the whole company spiel. Dad rarely changed things since 1999 anyway, so I figured I was pretty safe keeping that layout. I did add in a ‘News’ page, which he could use to ‘blog.’ I keep trying to explain that it’s not being a nerdy blogger, it’s a way to reach out to his readers, but … well, it’s a paradigm shift for him.

Then February happened.

Dad lives in Japan, you see, and among other things, works on Risk Analysis for nuclear power plants. This Fukushima disaster is his bread and butter and in his backyard. Obviously he’s involved. This had a round-about way to making he delve into theming more than I normally do, because my Dad wanted to put something on the front of his page. I thought that it would be a one time thing, but last night he wanted to change it with a new thing. Suddenly Dad needs featured posts!

On one of my sites, I use a special category for featured posts, list five in a sort of news/image scroller that swipes across your screen. It works. What Dad needed was a little different:
1. A way to flag a post as ‘featured’ or ‘forward facing’
2. Keep his main ‘page’ stuff below
3. Show videos (embeds don’t work in the_excerpt)
4. Show nothing if you have no featured posts
Thanks to Twitter, I came up with a pretty simple answer. For a brief moment, I toyed with making this a widget, but since I already had a special front page template for the site, instead I added a special loop that runs at the top:
```
 <?php
	$sticky = get_option( 'sticky_posts' );
	rsort( $sticky );
	$sticky = array_slice( $sticky, 0, 1 );

if (is_numeric($sticky&#91;0&#93;)) {
	/* Query sticky posts */
	query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
		while ( have_posts() ) : the_post();
		the_title('<h3>', '</h3>');
		if($post->post_excerpt) :
			the_excerpt();
		else:
			the_content();
		endif;
		endwhile; // End the loop. Whew. 

	wp_reset_query();
}
?>
```
From Justin Tadlock we get the very helpful Get the latest sticky posts in WordPress which I used to show the first (and only) sticky. Obviously change the 1 to the number of stickies you want.
```
<?php
	$sticky = get_option( 'sticky_posts' );
	rsort( $sticky );
	$sticky = array_slice( $sticky, 0, 1 );
?>
```
Once we’re in the meat of the query, I wanted to show the full post if there’s no custom excerpt, and then just the excerpt if there is one. This works around the annoying fact that you can’t embed videos in the excerpt (images and italics, yes, but not videos). Also, I tossed in if (is_numeric($sticky[0])) {} around the whole thing. If there is no sticky post, then $sticky[0] (which is the first item in the array $sticky) isn’t a number, it’s ‘null’ (which means ‘Hey! Nothing here!). My check is simply ‘If there’s any number in here, we’re good!’
```
<?php
	query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
		while ( have_posts() ) : the_post();
		the_title('<h3>', '</h3>');
		if($post->post_excerpt) :
			the_excerpt();
		else:
			the_content();
		endif;
		endwhile; // End the loop. Whew. 
?>
```
At the end I called in wp_reset_query(); so I could reset the query and go back to the regularly scheduled post.

There’s really not a whole lot customized on Woody.com, but what there is works and it’s simple. I try to keep everything such that if Dad every decides he can do this stuff, it will be straightforward so he can do it. Telling him ‘Mark a post as sticky and it’ll show on your home page’ is easy. He can do that.
3 April, 2011
Child Themes – Learn them, love them
As a general rule, I don’t do much help with themes. Not because I can’t, but because themes are a style and preference issue, which means what I think looks good, you may not. Once I find a theme I like, I prefer to spawn a child there-of to modify and customize. I’m going to step a little outside my comfort zone to discuss child themes.

The parent/child relationship in code is something that shows up everywhere. A child inherits from a parent, and only the aspects of the child you change will be different. This is most simply understood in the realm of WordPress themes. The official WordPress Codex doc on Child Themes is mostly straight forward for anyone who’s looked at a theme and played around a little. But the novice can get easily overwhelmed.

The easiest way to get started is to make a new folder in wp-content/themes for your theme. /wp-content/themes/child-of-2010 for example. I like to name my children something that will remind me right away of their parent. For example, on another site, I have a news-style theme, taken from Justin Tadlock’s Hybrid Theme, which I called ‘Hybrid News ala JFO – Blogging’. The folder name is ‘hnj-blog‘ to differentiate it from a very similar, but functionally different ‘hnj-video‘ and ‘hnj-plain‘. Each of the three themes is a small variation on the parent theme, but because of the way I wanted to call things, I decided that it was better to have three themes instead of an extensive functions hack and slash. This was after a lot of testing and tweaking and changing, but in the end, this worked for me.

For a proper child theme, you only need one file in that folder: style.css

You heard me right, just one. That Style file will be what tells your code where to look for your parent theme. Here’s what Child looks like:
```
 
/*
Theme Name: Child of 2010
Theme URI: http://Ipstenu.org
Description: This is a child theme of Twenty Ten (2010), the 'new' default WordPress Theme.
Version: 1.0
Tags: fixed width, widgets, valid CSS, valid XHTML, SEO, SEO friendly, adsense, custom header, three columns, clean,  right sidebar, blue,white, photoblogging, widget ready, simple, gravatars
Author: Mika Epstein
Author URI: https://ipstenu.org/
Template: twentyten
*/

/* Get base CSS */
@import url('../twentyten/style.css');
```
There are two really important parts to this. First is the line Template: twentyten — This is what defines the theme as a child theme. Period. Without this, you have nothing. The second is @import url('../twentyten/style.css'); which tells your CSS to pull down all the CSS from Twenty Ten and use it.

Once you’ve done that, you have a working theme and you can activate it. I know! It’s so easy, a caveman could do it! Any CSS changes you want to make go in your new child theme and, because of how inheritance works in code, they override anything imported from Twenty Ten, so your changes magically take effect, without having to reproduce the whole theme!

But what if you want to change a template file? I wanted to add one line to my comments.php file to turn on a subscription checkbox. This is done by copying the comments.php file from the twentyten folder into your child-of-2010 folder, and making the edits. It works almost the same way that the style.css. The main difference is that with template files, you can’t just have it contain only your changes, it must be the whole file, with your changes added in. This trips people up sometimes.

Now that you’ve seen how easy they are to make, you may wonder what the point is? After all, they are easy, but it’s easier still to tweak the parent theme. Yeah, it is. It’s also easy to lose all your changes when you upgrade WordPress.

For better of for worse, and yes, people argue about this all the time, WordPress upgrades overwrite the Twenty Ten theme, just like they used to overwrite the Default theme. I can’t begin to tell you how many times I’ve see angry posts ‘The upgrade blew away my theme changes!’ And for every one of those, someone’s posted ‘Yeah. It does that. Restore your theme from backup, and by the way, try a Child Theme.’ Now that WordPress lets you upgrade themes from inside the admin screen, you’re going to run into this more and more often. That’s why we’re always saying ‘Don’t change core! Don’t edit themes! Make functions/plugins/children!’ More on the other stuff later.

A child theme is smaller than a copy, and it’s just as fast. A child theme will never be overwritten when your theme is upgraded. Your child theme is safe even from a manual upgrade. Remember the directions for that? Even when we tell you ‘delete your WordPress folders…’ we always say ‘except for wp-content!’ That’s because your uploads, plugins and themes are in that folder, and you should NEVER delete them for an upgrade. And by making your own theme folder, no one but you will use it and no other theme will overwrite it.

So yes, use Child Themes. Learn them. Love them. Your life will be better the next time you upgrade WordPress.
3 August, 2010

Woopra Gravatars

At one point, I used Woopra to monitor my traffic. At the time, I also used Gravatar for avatars. Woopra has this awesome ability to show the gravatars of the person visiting, based on their email. Except it wasn’t working with my theme.

Normally I’d just slap this in my footer.php theme file to make gravatars show up in my Woopra console, but I happen to be using a Theme Parent (ThemeHybrid – which I’m also using here) and I don’t want to have to hack my theme any more than I have. The glorious thing is that Justin, in his wisdom, made a function I could plug into. So I made a new function (my_woopra_footer) which lets me extract the user’s email and ID name, parse it through, and spit back the right data. It’s weird, and I don’t suggest you use it unless you’re using Hybrid’s theme.

/* Woopra */
function my_woopra_footer() {
        global $user_ID, $user_email, $user_identity;
        echo "\n";
        ?>?
                <?!-- Woopra Code Start -->?
                <?script type="text/javascript">?
                var woopra_visitor = new Array();
        <?php

        if (is_user_logged_in()) {
                echo "\n\t\twoopra_visitor['name'] = '$user_identity';";
                echo "\n\t\twoopra_visitor['email'] =  '$user_email';";
                echo "\n\t\twoopra_visitor['avatar'] = 'http://www.gravatar.com/avatar/" . md5(strtolower($user_email)) . 
                "&size=60&default=http%3A%2F%2Fstatic.woopra.com%2Fimages%2Favatar.png';";
        }
        echo "\n";
        ?>
                var _wh = ((document.location.protocol=="https:") ? "https://sec1.woopra.com" : "http://static.woopra.com");
                document.write(unescape("%3Cscript src='" + _wh + "/js/woopra.js' type='text/javascript'%3E%3C/script%3E"));
                <?/script>?
                
        <??php
}

add_action( 'wp_footer', 'my_woopra_footer' );

As a sidebar, I still think Woopra is an amazing tool. It just had all sorts of weird issues on my sites and I backed off, trading it for Google Analytics. Yeah, I know.

13 July, 2010

Tag: themes

Multiple “Share This” On Your Front Page

Website Viewability

WordPress: Sticky Posts On Static Front Page

Child Themes – Learn them, love them

Woopra Gravatars