Slider Addiction Recovery: You Can Do It!

Back in the big 80s, we thought it was cool to have Duran Duran hair.

John Taylor

In hindsight, that’s an obvious mistake.

Then again, De gustibus non est disputandum.

More recently people thought it was cool to have sliders on their websites.

It’s the same kind of mistake. The only reason to have a slider on your website is that you think it looks cool and you’re not taking fashion advice from sane people who know better.

I confess that by now I’ve done more than a few sites with sliders. For that I can only beg forgiveness.

I’m doing what I can to make amends. As sites come up for review, I’m removing sliders wherever I can.

It’s a little like being in addiction recovery. You have to figure out what could possibly take the place of that jolt you got from the smoke or booze. What could possibly replace that monkey on your home page? What could fill the gaping space left empty by that former abusive lover?

There are plenty of better options. The ManageWP blog has some fine advice on slider replacements. Start there. Google “slider alternatives.” You’ll find lots more.

There is life after sliders, I promise. Just like there were still good haircuts after December 31, 1989.

New iCaspar Theme

A couple weeks ago at WordCamp NYC I heard that the Underscores ('_s') starter theme was going to start using SASS for it’s CSS.

Fantastic! That was just the kick in the butt I needed to do a WordPress theme using SASS.

It was also the kick I needed to redo the theme for iCaspar.

So here it is!

A few notes:

  1. The new iCaspar theme is extremely simple. “Ultra Minimalist,” you might say. There are no options to fiddle with. There are no fancy-pants images. There is just one column that focuses on written content. All the widgets are at the bottom. It’s for reading without distraction. It’s a Zen thing.
  2. With SASS in charge, all the theme CSS is compiled into a single compressed file. (If you actually bother to look, you’ll find a few other CSS files are loaded, but those are all from plugins.) It’s a Zen thing.
  3. Fonts are from Google fonts. Headers are Raleway. Content text is Lusitana. Just two fonts. It’s a Zen thing.

I’m calling it version 0.1 — clearly not a finished product yet, except for use on this site.

As soon as it’s a little more ready, I’ll share the code on Bitbucket.

Bloat Is Easy. Clean Is Harder (and maybe worth it).

For the last week or so, I’ve been checking out WordPress starter themes. By starter, I mean starter. As in, down to bare bones. The starters I’ve been working with are Toolbox and Underscores.

Both of these starter themes come from people at Automattic (the WordPress parent organization), so they both provide a solid foundation for theme build-outs. The major difference between them is that Toolbox assumes you’re going to build a child theme on top of it. Underscores, however, is right up front about saying, “Don’t build a child theme on this.”

Even Starter Themes Have Some Bloat

By far, the most surprising thing about both these starters is how much they give you to start with. They both come with quite a few functions already defined, and a surprising amount of CSS. You’d never suspect it, given the spartan look of them out of the box.

It’s an eye-opener to see what the Automattic theme folks consider essential to include. Theme support for post types and backgrounds, head links and body classes for various feed types, CSS for screen readers, right-to-left language support. It’s all there.

WordPress Has Even More Bloat

As I was working on these, though, what began to bother me was the amount of extra stuff WordPress itself inserts into each page. Stuff that might or might not be useful, depending on what the site is about. Once you start adding plug-ins, things really start to expand rapidly. It’s like the big bang happening in your browser.

I started finding myself slightly obsessed with figuring out where all this stuff was coming from and seeing if I could get rid of it. If you firebug this page, you’ll see a huge load of crap in the <head> section of the HTML. Take a look at all this:

<head>
    <meta charset="UTF-8"/>
    <link rel="pingback" href="http://icaspar.net/xmlrpc.php"/>
    <title>iCaspar</title>
    <meta name="author" content="Caspar"/>
    <meta name="description" content="Caspar Green. Thoughts on technology, theology, faith and church in the 21st century."/>
    <meta name="keywords" content="Caspar,Caspar Green,theology,technology,faith,church"/>
    <link rel="shortcut icon" href="http://icaspar.net/wp-content/uploads/2013/06/favicon.ico"/>
    <link rel="alternate" type="application/rss+xml" title="iCaspar » Feed" href="http://icaspar.net/feed/"/>
    <link rel="alternate" type="application/rss+xml" title="iCaspar » Comments Feed" href="http://icaspar.net/comments/feed/"/>
    <link rel="stylesheet" id="admin-bar-css" href="http://icaspar.net/wp-includes/css/admin-bar.min.css?ver=3.7.1" type="text/css" media="all"/>
    <link rel="stylesheet" id="wordpress-popular-posts-css" href="http://icaspar.net/wp-content/plugins/wordpress-popular-posts/style/wpp.css?ver=2.3.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="jetpack-widgets-css" href="http://icaspar.net/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-theme-css" href="http://icaspar.net/wp-content/themes/suffusion/style.css?ver=4.4.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-theme-skin-1-css" href="http://icaspar.net/wp-content/themes/suffusion/skins/minima/skin.css?ver=4.4.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-child-css" href="http://icaspar.net/wp-content/themes/iCaspar/style.css?ver=4.4.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-rounded-css" href="http://icaspar.net/wp-content/themes/suffusion/rounded-corners.css?ver=4.4.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-generated-css" href="http://icaspar.net/wp-content/uploads/suffusion/custom-styles.css?ver=4.4.7" type="text/css" media="all"/>
    <link rel="stylesheet" id="suffusion-included-1-css" href="http://fonts.googleapis.com/css?family=Varela+Round|Lusitana:400,700" type="text/css" media="all"/>
    <link rel="stylesheet" id="sharedaddy-css" href="http://icaspar.net/wp-content/plugins/jetpack/modules/sharedaddy/sharing.css?ver=2.5" type="text/css" media="all"/>
    <script type="text/javascript" src="http://icaspar.net/wp-includes/js/jquery/jquery.js?ver=1.10.2"/>
    <script type="text/javascript" src="http://icaspar.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"/>
    <script type="text/javascript">
    <script type="text/javascript" src="http://icaspar.net/wp-content/themes/suffusion/scripts/suffusion.js?ver=4.4.7"/>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://icaspar.net/xmlrpc.php?rsd"/>
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://icaspar.net/wp-includes/wlwmanifest.xml"/>
    <link rel="shortlink" href="http://wp.me/1KGkX"/>
    <meta property="og:type" content="blog"/>
    <meta property="og:title" content="iCaspar"/>
    <meta property="og:description" content="To Code Is Divine"/>
    <meta property="og:url" content="http://icaspar.net/"/>
    <meta property="og:site_name" content="iCaspar"/>
    <meta name="twitter:site" content="@jetpack"/>
    <style type="text/css" media="print">
    <style type="text/css" media="screen">
    <style type="text/css">
    <style type="text/css">
    <script type="text/javascript">
    <style type="text/css"/>
    <link rel="stylesheet" type="text/css" id="gravatar-card-css" href="http://s.gravatar.com/css/hovercard.css?ver=2013Novaa"/>
    <link rel="stylesheet" type="text/css" id="gravatar-card-services-css" href="http://s.gravatar.com/css/services.css?ver=2013Novaa"/>
</head>

After a while tinkering around, starting from underscore and with the help of Darren Miller’s ThemeWrangler class, I got the installation on my development server down to just this:

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>iCaspar Web Development | Custom Web Development</title>
    <link id="rule-them-all-css" media="all" type="text/css" href="http://townfool.dev/assets/css/thering.css?ver=3.7.1" rel="stylesheet">
    <link id="right-sidebar-layout-css" media="all" type="text/css" href="http://townfool.dev/assets/css/rightsidebar.css ver=3.7.1" rel="stylesheet">
    <style id="custom-background-css" type="text/css">
</head>

To be fair, in a real-life installation, you’re probably going to need a few more things going on. And I’m also not showing you a few scripts that I moved into the footer on the development site (which is where most of the scripts really should go).

I’m not saying that all this stuff isn’t useful. If you want social media connections and you believe in OpenGraph as a SEO essential, you’ll need to bring some of them back in. If you want easy access to feeds of various sorts, you probably need to tell browsers where to find them. It’s just that a lot of it is there whether it’s actually being used for anything or not, and it gets loaded with every page. And, if you’re not careful which plug-ins you’ve installed, it can get plenty worse. I’ve seen sites that have jQuery getting loaded 4 or 5 times, all different versions.

For most people, it probably doesn’t make a bit of difference. Very few people see it, and even fewer care. Shoot, it doesn’t even make enough difference for me to clean it up on this site.

The point is if you’re going to bother starting from scratch, less is more, and it’s better to add judiciously than to just toss everything in willy-nilly. And, for the average person, if you’re still reading this, the moral of the story is: be careful what you plug in.