Author: Ipstenu (Mika Epstein)

Giving WordPress That New Car Smell (Part 2)
In Part One I talked around what I did. Here are the themes I picked, what I feel about them, and what I loved and hated.

All three themes are frameworks, and I’m using children there of. Unlike just making a child theme from TwentyEleven, these are true, robust, themes, designed by artists. This took me maybe 10 hours of work, total, to do everything on all three sites, and as most of that wasn’t me sitting down and concentrating, but multitasking and bouncing around, so it may have been 4 hours serious work.

Oh and all these themes are ‘premium.’ And worth it.

Origin – In use on Half-Elf On Tech

Origin was the first theme I picked, from DevPress, and I decided on it after playing with a bunch of different DevPress themes. I’m partial to them (and ThemeHybrid) because I’ve been using Hybrid Core since before it was released, and I know it. I’ve memorized the hooks, and I like being able to quickly spin up my functions.php for it. All the serious changes are done in a pretty small file, actually, and mostly have to do with inserting FaceBook and Google into the header and footer, my comments ‘rules’ and that cool clickable (and hoverable) asterisks in my site description. I also really like the ‘full page’ view, and used it on some of my content-only-no-comments pages like Licensing.

Since I have a mini rant later on about favicons, Origin lets you update the favicon right there in the theme settings.

This is especially important for Multisite installs, where each site will want their own favicon. Now I don’t need a plugin. And if anyone can think of a cooler favicon for this site than the Spock Eye, let me know.

Balance – In use on Ipstenu.org

Balance, from StudioPress, was next. This was a huge departure for me, and oddly it’s the theme I love the most and have the most issues with. Let me explain.

While I’m perfectly comfortable bashing away at a functions.php file, unlike Origin, Balance is a child theme. See, HybridCore is a ‘starter’ parent theme, where you make your own child off it. Balance is a true child theme. When I got it, it came with a copy of Genesis, which is the parent. So while with Origin I made ‘HalfElf Origin’, I couldn’t do that here. I would have to edit the Balance theme directly, which goes against my nature.

Back in the day when I used Hybrid News, Justin made a massive upgrade. I hated it, as I’d made all sorts of tweaks to the theme, and it was a bitch to fix. Now, I happened to agree 100% with the choice to make those changes, you had to upgrade the menus for WordPress 3.0, but it was painful. This sort of hassle scarred me for life. I don’t like to edit themes directly. So I pinged Andrea and asked her ‘How often do these themes update? She said ‘rarely’ which isn’t the same as ‘never’ and, while calming, wasn’t the best thing in the world for my neuroses.(Nacin makes ‘tin foil hat’ jokes about me for a reason. I don’t trust anything.) Personally I’d love to see Genesis go the same way that Hybrid did, and to make a ‘core’ that is included in all their themes. Then Balance would include all the files for Genesis and Balance, and people could happily make their own children.

With that in mind, I did a smart thing. Instead of editing the child theme, I made two files: ipstenu.css and ipstenu.php (I told you I’d get back to why there was no style.css(Actually, there is a style.css in the folder, but only to stop WordPress from throwing silly errors. It does nothing.)) and put them in a fake theme folder called ipstenubalance. Those I included into the style.css and functions.php of the actual child theme.

Calling the CSS was easy:
```
@import url("../ipstenubalance/ipstenu.css");
```
And the special functions is just this:
```
require_once( get_theme_root() . '/ipstenubalance/ipstenu.php' );
```
Now all I have to remember is that if the default style or functions gets edited in Balance, to re-add those calls in.

The reason I dislike Balance, however, is not my own personal issues (and I’m well aware they’re just mine). It’s that there was a favicon forced on me. I hate that with a passion. You see, everything else is really a small change. I want a larger font, a darker blue, a bigger curve. But a favicon is … your site is naked without it. And it should resemble who you are. That’s why I have my ‘me’ image as my favicon most of the time.

But at the same time I love Balance, because I was able to overwrite the favicon with this:
```
remove_action( 'genesis_meta', 'genesis_load_favicon' );
add_action( 'genesis_meta', 'ipstenu_load_favicon' );
function ipstenu_load_favicon() {
	echo '<link rel="shortcut icon" href="https://ipstenu.org/favicon.ico" />';
}
```
Other than that, Balance is my first go-at with a ‘managed’ theme, and I have to say I’m really astounded. If you didn’t know anything about functions and hooks, you could still make this site (in fact, I did, via a Genesis Hooks plugin). It’s crazy customizable, without feeling clunky. And yes, some of the other ‘pro’ themes I looked at felt that way. StudioPress impressed the hell out of me. If you need a ready-to-go theme and don’t want to mess around with code, StudioPress is the way to go. They set the bar for parent themes. And like Origin, they too have a full-screen template, which I used on my terms of use. I suppose this is why the don’t go the route of Hybrid Core. Most of their users aren’t going to play with child themes, and instead will use the built in features, or the Genesis Plugins to customize things from the WordPress admin dashboard.(This morning it occurred to me that having ‘hybrid core’ as a non-parent theme means that if Hybrid updated, Origin would need to be, and now someone has to edit that. The difference is I’m only editing my child theme. When Origin gets updated, it doesn’t impact my child, and a trained theme guru will make the edits, not a newb. On the other hand, if Balance is updated… Yeah. I suspect at this point it’s too much work to say ‘Make a child theme!’ for the Genesis users, but I’d love to be a fly on the wall for that conversation!)

It’s a step ‘back,’ in terms of me being a developer, but at the same time I feel a burden lifted when it comes to managing things. A strange balance.(The pun was totally intended.)

Dotos- In use on Ipstenu.Photos

The last one was for my Photo site, Ipstenu.Photos, and I wanted it to look like a photoblog. This was really easy, since as Dotos is also from DevPress, I could cheat and make a child theme called photodotos and copy my Origin functions over, renaming halfelf for photos. I did one minor css tweak on Dotos, and that was to hide the ability to comment on photos. Didn’t want it or need it. I have a lot less to say about it, since everything I said in Origin applies here, and I did less tweaking.

So there you have it. My sites got a facelift, and I’m so happy, I load them up just to smile at how sexy they look. My site feels bright and new, and I want to blog more. And that is a win, no matter how you look at it.
23 April, 2012
Giving WordPress That New Car Smell (Part 1)

It’s been a while since I redesigned my sites, and this isn’t something I do very often. I also have a tendency to stick to a ‘theme.’ For the longest time, I was really homogeneous with the sites on this server. All my Ipstenu sites ran Retro Fitted and then Twenty Eleven. As we got near 3.4 I was all set to shift to Twenty Twelve, but when that was kiboshed, I sat and thought “Well, what do I want?”

Redesigning a site is not to be taken lightly. As I mentioned before, too many changes confuse your visitors. For the last few years, I’ve kept my sites pretty much the same, and this is normal for me. I mean, look at the designs for JFO! Clearly I find a style and stick by it. I don’t consider myself a ‘theme designer’ person, either. I can tweak the hell out of a theme, but inventing them? No way. I’ve never been very good at the part of art where I’m supposed to take an idea and make it visual. Oddly, I can do it with words and ‘people’ (think directing a play), but while I can see these things in my head, putting it down on paper fails me.

So why the dramatic change from everything the same to everything different?

There’s a theme through these themes, actually. They’re all simplistic, focusing on the content in a way that I can, easily, shove the sidebars out of the way when needed, and showing you what’s important. I didn’t want to get distracted by bells and whistles, but I also wanted a theme that was easy to tweak. Ipstenu.org I wanted to look a little more grown up, Half-Elf needed to be more professional (but still as irreverent as I am (In talking to Dana Severance, she asked what my ‘voice’ was for my ebooks. I said ‘Ms. Frizzle, after 10 years in corporate America.’ And it’s true.)), and my photos needed to be about photos and nothing more. I also didn’t want to fuss with colors too much, they can be a big distraction, and just putting up a black/white with accents felt ‘right.’

Once I committed to simplification, I cut down my menus while keeping them similar to what they were, and I kept my favicons as they were (though Half Elf has been sporting a Spock eye for a week now). Menus are tricky. You want people to find what they want, quickly, but you also want to guide them to where you want them to be. By cutting down the clutter, and having a little down-arrow on menus with drop-downs, I can gently nudge people around.

Buzz-words annoy me, and I try to avoid terms like ‘call to action’ whenever possible. Instead I thought of as the purpose. I like using ‘static’ content on front pages for that, as they can explain why you’re here, show you what’s new, and grabs you. The new Half-Elf page really does that, with the big honking ‘ad’ for the book. The haiku keeps you thinking ‘This is Mika,’ and the rest confirms that. On Ipstenu.org, the sales pitch is smaller, but you still have a little ‘who am I?’ blurb to get you started. While I wanted it to look grown up, I really felt the ‘feel’ of me had to stay. That’s the only site where you’ll see my Twitter stream, for example. As for the photos, well, they were simple.

I drew out what I saw in my head on paper a few times. A header, a menu, a ‘grab you’ blurb, and the content. It’s a good layout for me, I felt the eyes naturally flowed. Sorting out where on Half-Elf to put that ‘recent post’ inset was tricky, as I wanted it to be ‘above the fold,’ if you’ll pardon the archaic reference. Speaking of, all these themes are ‘responsive’ so if you shrink your browser, they adjust. Except for the leaderboard ad in the footer. I need to sort that out.(What I want is for if your screen is less than X wide, it vanishes. Maybe I’ll play with hiding the overflow.) This does not contradict my drawing deficiencies I mentioned before, by the way. When I ‘drew’ my layout, what I did was grid it out. That part wasn’t ‘art’ and I didn’t try to make anything pretty. I just made a list of what the themes needed in black, what I wanted in blue, and what I knew would be custom work in red.

I ended up with three premium themes that I’ve added functions and style to, but that’s it. While I may have made child themes, there’s no duplication of code. That is, my child themes have two files (functions.php and style.css) and possibly some images. That’s. It. halfelforigin is the child for Half-Elf, ipstenubalance is for Ipstenu.org, and photodotos is for the Photo site. The first half of the name is the site, the second half is the theme. I’ve always done it this way, which is why I also have an ipstenu2011 folder in there.

Oh, and why does the ipstenubalance not have a style.css? We’ll get to that.

But that will have to wait for the next post, where I break down each theme, what I liked and disliked, and what code I wrestled with. It’s a little longer than this post, which is why it’s split up.

By the way, the title is thanks to Ryan, who took my joke seriously.

http://twitter.com/Ipstenu/status/193061445762691072

http://twitter.com/ryangiglio/status/193061904686649344

19 April, 2012

Mailman Newsletter Widget

I read How to Add a Newsletter Signup Box After Your Posts by Brian Gardner and thought to myself “Self,” I said, “I really would love to be able to add a signup widget for my mailman newsletter.”

And so I did. The following code is plain HTML. Just drop it into a text widget wherever you want it to show up, and magically it will. If you’re using a Genesis theme, this is your replacement for Step 3.

&lt;div id=&quot;newsletter&quot;&gt;
    &lt;div class=&quot;white-border&quot;&gt;
        &lt;div class=&quot;newsletter-wrap&quot;&gt;
            &lt;h4&gt;Newsletter&lt;/h4&gt;
            &lt;p&gt;Get my awesome newsletter!&lt;/p&gt;
            &lt;form action=&quot;http://example.com/mailman/subscribe/newsletter_example.com&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot;&gt;
            &lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;email&quot; class=&quot;email&quot; id=&quot;mce-EMAIL&quot; placeholder=&quot;Email Address&quot; required&gt;
			&lt;input name=&quot;pw&quot; type=&quot;password&quot; class=&quot;password&quot; id=&quot;mce-PASSWORD&quot; placeholder=&quot;Enter Password&quot; required&gt;
			&lt;input name=&quot;pw-conf&quot; type=&quot;password&quot; class=&quot;password&quot; id=&quot;mce-PASSWORD&quot; placeholder=&quot;Confirm Password&quot; required&gt;
			&lt;input type=&quot;hidden&quot; name=&quot;digest&quot; value=&quot;No&quot;&gt;
            &lt;input type=&quot;submit&quot; value=&quot;Sign Up&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

One important thing to note here, I wanted everyone to get the emails as they happened, no digest, so I set this: . If you want to make it an option, the down and dirty way is to use this:

Digest: &lt;select name=digest&gt;
&lt;option value=1&gt;Yes&lt;/option&gt;
&lt;option value=0&gt;No&lt;/option&gt;
&lt;/select&gt;

The rest is pretty much Brian’s CSS, tweaked a little since my size requirements were different. Don’t change the ‘name’ values, as it makes Mailman cry. And how does it look?

Looks nice, don’t it?

18 April, 2012

Don’t Use WWW

It was asked why I don’t recommend using www in your URL for Multisite in WP Multisite 101.

To quote me:

You should not use www in your URL
A lot of people complain about this. The simple fact is that any well built server will automatically redirect www.example.com to example.com seamlessly. By removing it from our install, we avoid any possible conﬂicts with subdomains. Your SEO will not be impacted.

What I didn’t say, but I told the fellow with the question, is that some servers see www as a subdomain, and not an ‘alias’ (for lack of a better term) of example.com, which is my main reason for not using it. I’ve also seen a very rare, but infuriating, problem where, after upgrading, a site that happens to use www in their URL can no longer get to the network admin page, and instead gets a redirection loop. Since this only happens with www in the URL, and never when it’s not, it’s safer to drop the www.

I’ve never yet heard a good technical reason to use it, though I do totally accept ‘But I like it!’ as a justification. Everyone has a preference. I don’t feel that the www makes your site more or less professional, mostly because I don’t think anyone really looks except, maybe, you. As long as the redirect is seamless, the user will never notice, and 99.999% of them won’t care. Yes, Google and Facebook both use the www, though newer sites like Tumblr and Twitter don’t. WordPress doesn’t, but I’ve been advocating no-www longer than I’ve used WordPress.

My technical reasons for not using it stem from the No WWW guys.

By default, all popular Web browsers assume the HTTP protocol. In doing so, the software prepends the ‘http://’ onto the requested URL and automatically connect to the HTTP server on port 80. Why then do many servers require their websites to communicate through the www subdomain? Mail servers do not require you to send emails to recipient@mail.domain.com. Likewise, web servers should allow access to their pages though the main domain unless a particular subdomain is required.

Succinctly, use of the www subdomain is redundant and time consuming to communicate. The internet, media, and society are all better off without it.

To explain what that means, www used to be the protocol to say ‘If data comes for www.example.com, it’s web traffic.’ Similarly, mail is the protocol for email, and mail.example.com sends traffic to your mail server. You could email me at mail.halfelf.org. And the point of all that all web browsers today know that http://example.com is a website. In fact, you can just type example.com into any browser, and it’ll know ‘Oh, this is a website.’ How does it know that? Because you’re in a web browser.

It’s like when you dial a phone number, you don’t have to press a button to say ‘Phone number.’ Look at your cell phone. If you open up your text messaging app, enter a cell phone number, and send a message, the phone magically knows ‘This is a text!’ and sends it. But if you open the phone app and enter the exact same number, it knows ‘This is a phone call!’ You, the user, have to do nothing.

That www in your URLs is telling the browser something it already knows. It’s redundant, it takes up space, and it’s unnecessary.

Now people I respect, like Michael Hampton, maker of Bad Behavior (my out and out favorite add-on to any PHP web app), is the brain behind Yes WWW. His counter argument concludes with:

The main reason I argue for leaving the www. in URLs is that it serves as a gentle reminder that there are other services than the Web on the Internet. Some of these, such as FTP and DNS, users typically use transparently without even realizing it. Others, such as e-mail, users access through separate applications. Even so, I know of many users who will claim with a straight face that e-mail is not part of the Internet.

While I disagree (mostly since, if that holds true, we should use mail.example.com and so on), the question comes up that if we’re not using www, how do we differentiate between http://example.com and ftp://example.com in cases where they’re not on the same server? You can, easily, redirect ftp.example.com to a different IP, if needed, via DNS. Thankfully, there are some easy answers to this. First, you can route the requests via ports. If a request comes via FTP, that’s a different port, send it to the other server. What you can’t do, however, is serve HTTP and FTP over the same port, but … you shouldn’t do that anyway.

There are many personal reasons to use www or non-www, and they are all perfectly valid. But there’s on big technical reason I would never consider it on a Multisite install of WordPress. Once in a blue moon, after an upgrade, someone finds out they can’t get to their network admin. This is, normally, due to a miss-match in URLs, where they’ve put http://example.com and http://www.example.com for their site and home URLs, back before they turned on Multisite. Fixing that is a monumental effort, and it doesn’t always take. (This is probably related to http://core.trac.wordpress.org/ticket/9873 now that I think about it.) Also, even more rare is the case where just having the www forces your subdomains to be subdomain.www.example.com.

Both situations are frustrating. Both are avoidable by using just http://example.com

As long as you redirect the www to non-www, your users will never notice. Except the geeks like me. And while we may disagree, it’s unlikely we’ll stop using your site over something that trivial. Go www free. It’s the way to be.

17 April, 2012

Jetpack Menu Stats

If you run a Multisite, you have a list of all your sites in the ‘My Sites’ menu. Adding your own custom menus to that isn’t all that complicated. Here’s a quick, practical, bit of code:

<?php
/*
Plugin Name: Jetpack Menu Stats
Plugin URI: https://halfelf.org/hacks/jetpack-menu-stats/
Description: Show 'stats' in the per-site menu bar.
Version: 2
Author: Mika 'Ipstenu' Epstein
Author URI: https://ipstenu.org/
*/

function jetpack_stats_my_sites( $wp_admin_bar ) {
        global $wpdb;

        foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {

                $menu_id  = 'blog-' . $blog->userblog_id;
                $args = array(
                   'parent' => $menu_id,
                   'id'     => $menu_id . '-stats',
                   'title'  => __( 'Site Stats', 'jetpack' ),
                   'href'   => get_admin_url( $blog->userblog_id ).'admin.php?page=stats',
                );
                $wp_admin_bar->add_node($args);
        }
}

add_action( 'admin_bar_menu', 'jetpack_stats_my_sites', 90 );

?>

You can tweak this to anything you want, obvious. If you change the numerical value in the add_action() call, you can move it up or down the menu. A value of 10 will put it at the top. You could probably toss in a check if the plugin was activated per-site as well (I didn’t bother for Jetpack, since I know how to tell if Jetpack’s active via is_plugin_active(), but not a sub-plugin).

As with all my code, is licensed GPL2. Use, abuse, tweak and customize. Don’t expect support, though.

Edited to fix i8n and use add_node, thanks to Thomas and kessiemeijer!

15 April, 2012

Author: Ipstenu (Mika Epstein)

Giving WordPress That New Car Smell (Part 2)

Giving WordPress That New Car Smell (Part 1)

WordPress Site Description

Mailman Newsletter Widget

Don’t Use WWW

Jetpack Menu Stats