Building Elemental 2: Simplifying Through Reduction

One of the key things I wanted to do with Elemental was simplify it – and I mean this from a few different viewpoints. I use Elemental on this very website. Over time I have added new features and functionality as and when I have needed it – in fact the functionality I have added has largely been influenced by my own needs.

However, in hindsight, I have spent too much time trying to make Elemental do everything – where I would have been better off using free plugins to do the heavy lifting so that I can concentrate on making an awesome theme.

I think this is a common issue with WordPress themes in general – premium ones specifically. Themes are becoming bigger and more complicated and this is making them slower and more difficult to maintain. At the start of this year there were a lot of conversations about reducing theme options – in fact a lot of my thoughts are mirrored, and partially inspired, by this post on ThemeShaper about themes in 2012.

As an example – I have spent time trying to improve the SEO in the theme. This might sound strange but I now wonder if this was a false economy. The WP SEO plugin by Yoast is far better than anything I can do, and so with Elemental 2 I plan to simplify the SEO functionality.

Please don’t think this means I will forget about SEO – far from it – however I won’t go adding half baked SEO features that would be much better controlled through a plugin. So, I will still include good semantic html, optimize page loading speeds, ensure the content is well linked together – but after this I will hand things over to plugins like WP SEO to take care of the on page elements.

Simplify what?

When rebuilding Elemental I want to…

Simplify the design of the default style. This will make creating child themes much easier
Simply the HTML. Again, this will help with child themes
Simplify the PHP code. This should help with debugging and make the theme a bit faster. Code is Poetry.
Simplify theme options. There has been a trend in the WordPress community recently to do with removing theme options, and this comes down to making things easier for theme users, and making themes more streamlined. I like this so am ruthlessly editing the options in Elemental.

Because of this I have been able to pull out an awful lot of the code in the theme – so far I’ve probably removed over 1000 lines of old code – and I’m not done yet. Below is an example of the old header.php (this is the file that displays the header section of each webpage), and the new header.php so you can see how things have changed.

Old header.php

<?php
	global $bm_options;
	bm_preContent();
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset=<?php bloginfo('charset'); ?>" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title><?php bm_title(); ?></title>
<?php
	bm_displayStyles();
?>
	<style type="text/css" media="print">
		@import url("<?php echo BM_BLOGPATH; ?>/lib/styles/print.css");
	</style>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<link rel="shortcut icon" href="<?php echo $bm_options['faviconRaw']; ?>" />
<?php
	wp_head();
	bm_head();
?>
</head>
<body <?php bm_bodyClass(); ?> itemscope itemtype="http://schema.org/WebPage">
<?php
	bm_doAction('bm_pageTop');
?>
<div id="page">
	<a href="#mainContent" id="skipToContent" class="no-print"><?php _e('Skip to Content', BM_THEMENAME); ?></a>
	<p id="printpreview"></p>
	<div id="fullWrapper">
		<div id="pageHeaderNav" class="static">
			<div class="container">
				<?php bm_navigation('navBeforeHeader'); ?>
			</div>
		</div>
		<div id="wrapper" class="container">
			<div id="innerWrapper" class="clear">
				<div id="headerWrapper">
					<div id="header">
<?php
	bm_doAction('bm_headerBefore');
	bm_pageHeading();
	bm_blogDescription();
	bm_doAction('bm_headerAfter');
?>
					</div>
				</div>
<?php
	if ($bm_options['navAfterHeader'] != '0') {
?>				
				<div id="menu" class="static clear">
<?php
		bm_navigation('navAfterHeader');
		bm_themeSearch();
?>
				</div>
<?php
	}
?>
				<div id="mainContent" class="clear">
<?php
	bm_doAction ('bm_mainContent');
?>

New header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<title><?php bm_title(); ?></title>
<?php
	wp_head();
?>
</head>
<body <?php bm_body_class(); ?> itemscope itemtype="http://schema.org/WebPage">
<?php
	bm_do_action( 'bm-page-top' );
?>
	<a href="#content" id="skip-to-content" class="no-print"><?php _e( 'Skip to Content', BM_THEMENAME ); ?></a>
	<div id="wrapper" class="container clear">
		<?php bm_navigation( 'header-above' ); ?>
		<header>
<?php
	bm_do_action( 'bm_header' );
?>
		</header>
<?php
	bm_navigation( 'header-below' );
	bm_do_action( 'bm-main-ontent' );
?>

Posted in: Web Design WordPress