Tag: design

MP6uccess – Tips and Tricks
Notice: Since WordPress 3.8 came out, you DO NOT need to install MP6 for anything to work. Promise. If you want the extra color schemes, use Admin Color Schemes, but everything else works in core WP.

I like MP6. It’s far, far, far easier for me to read the back end of WordPress with it. It has legible fonts, larger fonts, and best of all, it’s mobile friendly.

The biggest complaint has been that it’s too dark. And I get that, I really do. I personally have trouble seeing white on black (computers only), and white on green (yes, road signs). So for me, the black sidebar was a little heavy, but something I could live with. Then version 2.0 came out and behold, color schemes!

I immediately ran this update, zipped to my profile page (where I knew it had to be), and saw this:

The other options right now are Blue (looks like the old blue), Seaweed, Pixel, and Ectoplasm. Seaweed is my favorite, but I decided to make each site a little different and distinct, so I have Ectoplasm running right now on one site and Seaweed on the other. I can tell right away which is which. My only wish is the toolbar was colorized on both ends.

Tips & Tricks

Okay, okay, I’ll stop selling the plugin, and instead tell you what’s cool to do with it.

Styling Menu Items

The items on your menu sidebar default to some pretty boring icons. Bleah. For years we’ve always uploaded our own images to change things in our plugin and custom post types. Here’s an example for my own code for an old Custom Post Type, because I wanted a custom video icon to show up on my sidebar:
```
function cptname_post_type_css() {
   echo "<style type='text/css' media='screen'>
           #menu-posts-CPTNAME .wp-menu-image {
                background: url(/path/to/CPTNAME.png) no-repeat 6px -17px !important;
        }
           #menu-posts-CPTNAME:hover .wp-menu-image, #menu-posts-CPTNAME.wp-has-current-submenu .wp-menu-image {
                 background-position: 6px 7px!important;
        }
    </style>"
}
add_action( 'admin_head', 'cptname_post_type_css' );
```
Now that I’m using MP6, I have access to Dashicons, which already has a video icon included, so I can use this:
```
function cptname_post_type_css() {
   echo "<style type='text/css' media='screen'>
           .mp6 #adminmenu #menu-posts-CPTNAME .wp-menu-image:before {
                content: '\\f126';
            }
         </style>";
}
add_action('admin_head', 'cptname_post_type_css');
```
No need for a hover image, because this is a font and not an image, so the hover is automagically taken care of. The result is exactly what I wanted. It looked just like it was built into WordPress from day one, and my co-authors know right where they’re supposed to go to make a new video post.

There are a lot of options to nab from, and there’s a double edged sword to having some ‘standards’ built in. While it’s super easy for me to make a plugin or CPT use what I want, the same goes for other people. I imagine a lot of shopping cart plugins will want to use '\f174' (the shopping cart) if they don’t have their own. Also it means that to ‘match’ you’ll have to use Font Icons yourself, and they’re not super easy to make. Not that everyone worries about matching.

Force a Choice

Okay, what if you want to force a choice for everyone?
```
add_filter('get_user_option_admin_color', 'change_admin_color');
function change_admin_color($result) {
    return 'ectoplasm';
}
```
This is the same as it’s always been, actually. But now everyone gets to use purple and green, yay! Keep in mind, this is a hard force. Everyone uses this. There’s no changing. I have this on one site, since the ecotplasm color actually matched the theme. I set it, went away for the weekend, and found the users laughing and loving the perfect match.

Also check out…

I’m sure I’m not the first person do dig out these tricks for MP6. At WordCamp Chicago I remarked that a cool plugin would be “MP6SS” – it would let you pick four colors (similar to the blocks the current MP6 plugin offers), and you could make your own colors on the fly. A little dangerous, but the next option up from that would be a fork of the CSS plugin in Jetpack, which lets you totally customize your MP6 CSS 100%.

Here’s some links I’ve found to more MP6 fun:
Do you have any tricks? Post links to your code!
3 September, 2013
DreamCon In Review

The weekend after WCSF I talked at DreamCon, which was our own little Webhost convention/camp for technology and other things. As Matt said, we’re kind of the wacky Webhost, and I love it that way here at DreamHost.

Some of my coworkers talked about the technical stuff, like WP-cli and how DreamPress works, but I talked about some slightly more esoteric and conceptual things, no coding involved topics, because I tried to think about the questions people who host with us asked me the most.

Choosing WordPress Plugins

This was the more geeky of the two, but was an overview on how I search for plugins, value the devs and their work, and determine which ones I use. I mentioned needs and wants a couple times, which makes me think I’ll end up giving people a talk on that one of these days…

The questions I got after this session were interesting. I preemptively answered the long standing question I had never been able to answer before, which is “What is your favorite plugin?” I finally have an answer, and it’s MP6. My eyes suck, and for me, MP6 finally made the back end of WordPress totally readable for me, without having to increase my browser’s font size. The font was better, and larger, and clearer. Normally I hate black backgrounds, but for some reason MP6 doesn’t give me headaches.

The best question I got was how to search effectively. My answer was to be more exact with search terms. Too often we go for broad terms and narrow down, but I like to go the other way. “wordpress plugin calendar event list” – I pick every major term I need in that plugin, and more precise results follow.

Get Out Of The Monkey House

Besides the fact that all the devs in the room cheered when I stated “code is art” I think this one really opened people’s eyes. Remembering that the design of your site doesn’t stop at the pretty stuff, that your content and the flow of how the site works is also a major impact, is huge.

By the way, code is totally art. You’re making something out of nothing, inventing and building a concept that never existed before. It’s just like writing music. Be proud of it. The most standout question from this talk was what do I do when a customer demands they stay in that monkey house? I put my foot down. When I get into contract work, I have always stated up front “You’re hiring me to be your expert, which means you may suggest things for your website that I, out of my experience and expertise, know to be bad ideas. When that happens, I will tell you that we should not do these things, and why. This is my power of veto. I will only use it when I have proof, via research, that what you are proposing is not in your best interests. If that’s not okay, then we don’t sign the contract. If it is, then you will accept my actions on web design, just as I will accept yours about your product. You know more than I do about that, I know more than you about this.”

Thus far, no ones walked away, and I’ve never made a website with a blink tag (except for the gag website, where the contract was to make it look like Ling’s cars…).

5 August, 2013
To Fork Or Not To Fork

Sometimes the question you have to ask yourself is if you should fork. With a plugin, this is a fairly easy conversation. You want functionality, the original author doesn’t, you fork. But when you look at a theme, you start getting into messier territory.

In many ways, a theme is ‘simpler’ than a plugin. Theme devs, don’t shoot me! What I mean is that a plugin can be or do anything, but a theme is always a theme. While it may change how your site looks in amazing ways (and I am constantly in envy of people who can visualize like that), it really is just a theme. This is why reviewing themes is easier to monitor and manage than plugins. But that’s another conversation. The point here is that when you want to extend a theme, you make a child theme. Done.

What happens when you’re already using a child theme, though? StudioPress, a theme shop I love, makes child themes and sells those. This site is using a child theme, though it’s currently one of my own devising. Previously, it was using a child theme called Streamline, however, and it had a lot of changes.

So when do you make a child theme, and when do you extend it in other ways? It really depends on what you’re doing. While I sat and tried to figure out where my personal breakpoints were, I realized that since the best themes know they are a theme, and not a plugin, it was really easy. A great theme lets you seamlessly use a plugin to add in functionality. They may even tell you what the best ones are. Recently, Coen Jacobs wrote about how good themes never bundle plugins and he’s right. A plugin is a plugin, a theme is a theme. Keep ’em separate, keep ’em safe.

I’ve done it in three different ways for three different sites, and I’ll explain my rational below.

The Simple

One site is simple. Every ounce of functionality I needed, and more, was in the core code of StudioPress, not even a child theme was needed. All I wanted was to change some colors and add in a couple CPTs and shortcodes. That was easily done via Jetpack, which has a CSS editor, and a couple plugins. Actually, 99% was the CSS, once I sat down and looked at it. All the weird stuff was normal plugins.

Sometimes simple is a teeny bit complicated, and when that happens, I may make a custom mu-plugin or two, but in general, not so much needed unless I want a Custom Post Type. And anyway, I never put a CPT in my theme if I can help it.

The Complicated

On the other hand, one site is hella complex. I found a theme I really, really, liked. Almost. And worse, this was a child theme. It was exactly what I was afraid of. There was no way I would get what I wanted out of this theme unless I edited the functions.php file, a lot of the CSS, and a ton of the images. Could I still have done this via CSS and a couple plugins? No. Well, the CSS yes, but not the code. I had need for some crazy functions, a total re-write of comments, and the list went on.

In this case, I forked. I ripped out the small amount I never wanted. I added in the medium amount I did want. I directly edited the theme’s CSS, added in a post template, and changed all the images to my chose color. I even added in a different font. Could I have re-written from scratch? Of course, but the theme had 90% of what I already wanted to do.

There actually is a step before forking, and that would be using plugins. I know I mentioned plugins before, with the simple themes, but actually most theme frameworks are extra special. They often have custom plugins like Simple Hooks, which fundamentally lets me do everything I might do in a functions.php file for that theme. This means most of the time, I don’t fork. But. This theme really was so complex that I needed more than just the simple hooks. Genesis Complex Hooks may have done it, or another plugin to make a transient functions.php (ala CSS editing). And that would have done it except for when I wanted to change a lot of images, add in JS, and then a custom page template …

Well you see how it goes. The point here, however, is that I sat and thought about it, studied my setup, and made a long term decision. Originally I was using the plugin way, but when it stopped being extendable, I decided to do this, and I regret nothing.

The Original

The last option I had was I theme I kind of liked, but it was old. It was pre-HTML5, it didn’t have microformats, but more-over, it wasn’t aging as well as I would have liked. I made a list of what I liked about it, what I didn’t, and what I really wanted. While the list was short, it was also clearly not going to just be CSS. I wanted a custom front page, an extra page template, images, and Genericons built in. In short, I wanted this theme to be something that could carry me onward, regardless of a plugin, even one I wrote.

I have not made my own, 100% from scratch, child-theme in a long while, and this one may not really count since I was designing it to look like something else. This took me an afternoon to bang out the basics, and a couple days of minor fixes here and there to perfect them. Release and iterate, as they say. Certainly, I could have taken someone else’s theme, but it was going to be a surprising amount of work to do that. Instead, I made a list of my needed features and my desired options, and went to town. It’s still a pretty simple child-theme (which speaks well to the inherent extensibility of the parent), but now it’s mine, and it’s easy to extend it and expand it.

The Rest…

What about you? What do you think about when deciding how to handle a theme that needs changing?

17 June, 2013
Genericon’d Menus

Quick and dirty, I wanted a menu to have Genericons. Menus are crazy extendible and I use them in sidebars all the time to make a list of links formatted in a nice way. So why not a Genericon? After all, I know menus are really glorified Custom Post Types.

Don’t they look pretty? It’s stupid easy.

URL: http://facebook.com/you
Navigation Label:
Title Attribute: Facebook
CSS Classes (optional): social-buttons

Then all I had to do is fiddle with CSS. li.social-buttons .genericons is applicable here, and that’s why I gave it the CSS class. If I wanted to have it be a genericon plus text, then the Navigation Label would have been Facebook instead. If you don’t want the genericon to be part of the link, make the label just the link name, and add genericon genericon-facebook to the CSS classes.

31 March, 2013
A Theme By Any Other Name
When I redesigned my sites earlier this year I struggled with some concepts that later drove me away from child themes and into the arms of custom plugins. The issue at heart is that the term ‘theme’ is used in far too broad and encompassing a manner, which confuses people when they find out there are different types of themes. And no, I don’t mean responsive vs static vs mobile. I touched on this earlier in the year when I reviewed the very concept of managed themes, but apparently I didn’t do it well enough.

After some talks on WP-Hackers, I’ve got a better list.
- Theme – The traditional theme.
  - Child/Parent Themes
- Theme Framework – Can be used as a traditional theme, normally used as a parent.
  - Starter Theme – Never used as a standalone theme, only used to build themes.
  - Managed Theme – A theme that acts like a framework and a child at the same time.
So let’s look at them in order.

Theme

Example: TwentyEleven, Buttercream, pretty much anything in wordpress.org

This is the most basic, simple, normal theme in the world. It works right out of the box. You can make a child if you have to, but most people don’t. Themes may or may not be built off of a Theme Framework, but they can all be used as is, no alterations needed.

Child / Parent Themes

The short version here is that child themes are built off a parent. A parent can be any of the themes here (Theme, Managed, or Framework). A child theme can never be a ‘theme’ however, it can never stand on it’s own. And there are some themes that don’t support children at all. The parent/child relationship muddies the waters quite a bit when it comes to understanding what type of theme you have, but I would go with the basic rule of “If a theme requires another theme to be installed separately, it’s a child theme.”

Theme Framework

Examples: Hybrid, Genesis

These themes are crazy robust. It’s like taking a normal theme, giving it steroids, and then handing you toolkits to expand it. Theme Frameworks can be used as a theme themselves, but often are treated as either Starters or Managed (see below). Frameworks come with a bunch of new, extra functions, along with documentation. Oh yes, these babies are documented so the theme guru can carry on, or the newbie can learn all about how themes work.

There are two types of Frameworks (and this is where people will disagree with me a lot).

Starter Theme

Example: _s, Bootstrap, Hybrid

These are used to build a parent theme off of, and cannot stand on their own as a theme (they’re skeletons). No one actually uses the theme as a theme on it’s own without forking and adding in their bells and whistles. These are turned into full-blown themes, and use the normal parent/child relationships from there out (which is why they’re a subset of frameworks). The starter theme itself is not a stand-alone theme, however, and the person who builds their parent theme off these ‘framework’ is responsible for updating their theme when the framework is updated.

Managed Theme

Example: Genesis, Thesis

A managed theme is usually built on a framework, but unlike a starter theme, these can be used as is if you want. The real difference is not that, however, but that everything that you should be doing is within the WP Dashboard. All CSS tweaks, and even functions, can be added there-in, and not the functions.php files. Sometimes these are just parent themes that you don’t make children off of, ever, and others are children themselves of a framework. The best ones have a way to export your theme settings. To make things easier, you’ll find a lot of plugins that do what most people want, and they never need to edit code.

Drawing The Lines

What is a theme and what is a plugin, then? I was trying to explain this to a non-techy the other day, and jokingly said “You know how Barbie has all those clothes you can put on her, like the ski outfit? That’s a theme. A plugin is the Barbie Camper.” As horrific as the metaphor is, it’s not inaccurate. The theme changes the design, the plugin changes the function. Many theme developers hate putting code like Custom Post Types into their themes, because they feel that code should be separate from theme, and you should be able to keep your content, no matter what theme you’re using.

For a long time I never used ‘starter’ as a theme designation, because to me the word ‘framework’ meant ‘a frame I build off of.’ With the conversations I had on wp-hacker in mind, I have reclassified themes into two types. Themes and Theme Frameworks. That’s it. That’s all you get. And yes, that means I think a Starter Theme is a framework. Look, Genesis, Hybrid-Core, and Bootstrap are all themes that someone uses to build other themes. They’re all frames that people can use to paint their own masterpiece.

When you start looking at managed vs starter, it gets clearer. I call Genesis managed because that’s how the end users will see it. It’s not a starter, because people don’t fork Genesis to make a new theme, they use it and make children.

The following explanation is using the two frameworks I’m most familiar with.

Hybrid is a Starter Theme Framework. People download it, extend it into their own theme (see Oxygen, News, etc, all of which are stand-alone themes in the repository), and use those themes as full born ‘traditional looking’ themes. They can make children theme, but the point is not that Oxygen (built off Hybrid) is a theme or not, but that Hybrid, it’s source, is not a theme, but a Framework. They are separate things.

Gensis is a Managed Theme Framework. It remains a separate parent theme, and technically can be used as is (it’s a very nice basic theme), so in that way it’s a Framework, but people don’t take that as a base theme and extend it like they do Hybrid. When you make a child theme of Genesis, it’s a true child theme, and never a copy of Genesis, renamed, and extended. Thus, Genesis could be a framework, but it’s really a managed theme because you never fork it, you always manage it via the dashboard or a child theme. Genesis is a theme built off a framework, and no one else uses that framework but Genesis.

If you treat everything like a nail, you’ll always use a hammer. And a nail will go wherever you want if you hit it hard enough. I don’t suggest that, by the way, and as a principle of forcing your way on everyone, it’s not a good one. Treating all theme types as exactly the same will get you into trouble. If I extend one the nail/screw metaphor, one reason themes take on so much is that they can’t install plugins. Managed themes are a great example of themes crossing the line between being a hammer (theme) and a screw (plugin).

A starter theme framework is Home Depot. All the tools are there, there’s even some help, but you’re going to pick out your tools and your lumber and build what you want. When you need more, you can invent and create anything you want. You may have to go back to the store and buy more nails and screws, but your limit is your own ability and imagination.

A managed theme framework is Ikea, with that Ikea Toolkit. It has all the parts you need, and while you can hack the bookshelf into a standing desk with little work, and no extra parts, you’re meant to use it out of the box and follow their directions to design differently. And when you need more, there are plugins to add on to what you have to make it more. Within limits.

My Recommendation

Use what you like, but understand what you’re using.

Themes are very personal. A plugin is easy, you want something to fit a specific niche, you find it, you use it. You may pick one over another based on ease of personal usability, but the final function is the real deal breaker. A theme, on the other hand, has to look right and feel right to use, and that’s very, very hard. No matter which one I use, and I use a theme, a framework, and a managed all on my sites, I make sure it meets my feel-good and my needs. I know I’m perfectly comfortable hacking functions to bend to my whim, but if I was handing over a theme to someone less techy, I would think twice.

When you’re making a site for someone else, think about how much you want to support. The more complex a theme, and the harder for the users to edit it, the more calls you get. Even when you’re making a site for yourself, you have to know what kind of theme you have, and the best way to edit it. If you’re using a stand-alone theme, built on a framework or not, once you know how to use child themes you’re good to go. But a managed theme may be a new learning curve for you, so remember to take time and ask around for how to use this theme the best way.

The best thing about learning to use a managed theme is that they’re usually used to the newbies, so for an experienced theme dev, that learning curve is short and shallow. You already know how to find the docs, read them, and apply them. You know that there will be options, between editing functions.php and using a plugin, and you can weigh the pros and cons for yourself and your clients.

Understand what you’re using, understand how it works, and use what makes you happy.
28 November, 2012
Permalink Elephants
The best permalink format for your site is so simple, you’re going to wonder why you never thought of it before. It’s obvious, intuitive, and perfect. In fact, I dare say it’s genius. Want to know what it is?

The best permalink is the one your visitors can remember.

I told you it was obvious.

Look, you can waste immesurable hours and days trying to determine if /postname/ is better than /2012/postname, or you can sit down and remember you’re not making a site for search engines, but for your visitors.

SEO does have a point, don’t get me wrong. If it’s easy for people to find your site, you get more traffic. One of my sites, following the recent Panda and Penguin updates on Google, jumped from 5th place to 3rd on a search for the major keyword. Another went from 12th to 9th (we’re working on that). None of that has to do with me changing anything, or even picking the best SEO plugin. It was done the traditional way.
1. I wrote good copy
2. I networked with related sites for links
3. I advertised
4. I was memorable
Those three things, when done correctly, are how you get your site to rank high. And it’s that last item, being memorable, that should drive your URL choices.

A URL like http://example.com/12897342134/jkahsdu.aspx isn’t memorable. It tells me nothing of what your site’s about, what the topics are, what the subject is.

On the other hand, a URL like http://example.com/2011/how-to-save-elephants tells me quite a bit. I know when the post was written, so if there was a big to-do about elephants in 2011, it probably is related. But it’s not always easy to tell someone that URL, nor is it a given I’ll remember it tomorrow. I may remember that example.com had a cool posts about saving elephants, however. It’s certainly more likely I’ll remember it than the other link!

This is where WordPress does something cool, though. See, I can tell someone to go to http://example.com/how-to-save-elephants/ and that will redirect them to the right URL! You can do this on Drupal as well with a module called Global Redirect (Drupal folks, correct me if I’m wrong/there’s a better one).

To me, that says the issue isn’t what permalink pattern you pick, but what permalink slug you use! On that train of thought, what if I made my URL http://example.com/2011/save-elephants instead? Naturally then http://example.com/save-elephants would also work.

Now we can clearly see that ultimate issue is not the permalink structure. The only thing I don’t like about how WordPress defaults URLs is that I have to tell people ‘it’s example dot com slash save dash elephants’ and that’s not as easy as ‘example dot com slash elephants.’ Or even ‘saveelephants, all one word’ (I don’t know why that’s easier, but people tell me it is).

The whole reason people like short URLs is that they’re short and easier to remember. If I told you to get to a site you used http://bit.ly/elephant, you’d have a much higher likelihood of remembering. Invariably, however, we look at branding and think “I don’t want bit.ly to have my name.” That’s a case for Yourls, and now, as long as you customize all your Yourls, you’re in it to win it. I know most people use short URLs for Twitter and such, but I find that making a handy short URL to tell someone ‘go to foo dot in slash facebook’ works astonishingly well. Of course Facebook knows that too, and lets you use http://fb.com/username to find people.(I don’t have a yourls setup here because I’m incapable of finding a short URL I like.)

Sadly, there is one problem with this, and it’s that you can only use each ‘slug’ once, so once you’ve use ‘elephant’ you’re never able to use it again.

Name your slugs wisely and plan, as best you can, for the future.
21 May, 2012