Documentation

Sepal and Seed was designed and developed with one singular focus in mind: be the go-to theme for organizations with third world audiences. Why?

Because most WordPress themes render pages which are huge (at least, if you count 350kb as huge). And for people with extremely narrow bandwidth like you find in the developing world, 350kb will take a finger-tapping amount of time to download.

Also, generally the websites of these organizations are not terribly complex, and therefore don’t need all the bells and whistles of more feature-rich themes. When it comes to serving these audiences, all these features are really just bloat.

Sepal and Seed solves this issue with extremely small page sizes (less than 80kb, even with lots of content), without losing the basic feature-richness that modern internet users anywhere should be able to expect: responsive layouts, beautiful typography and a great user experience.

From an aesthetic standpoint, the default look of the Sepal and Seed design is incredibly deceptive – the theme appears to be very simple.

This apparent simplicity masks both enormous efficiency in the code and substantial forethought as to how to deliver a quality user experience with such a small code base.

Sepal and Seed is, however, quite feature rich given its small size, and makes a great choice for organizations with third world audiences with low bandwidth internet connections. Read about some of its main features below.

Performance

I think this is pretty good:

To be fair, I was getting that performance (175ms for a blog post) before I HTTPS’d the site. Don’t feel like undoing it, so it’s more like 360ms now. Still.

#Mobile first

This theme is based on Bones, which has a mobile-first approach to CSS and layout. I made sure to maintain this.

Theme activation: A quick note

After you activate Sepal and Seed, edit functions.php to remove jQuery and comments-reply.js:


/************* Remove comment-reply.js *************/
function clean_header(){
  wp_deregister_script( 'comment-reply' );
}
add_action('init','clean_header');

/************* Remove jQuery *************/
function dequeue_jquery() {
  if ( !is_admin() ) wp_deregister_script('jquery');
}
add_action( 'wp_print_scripts', 'dequeue_jquery', 100 );


Why don’t I remove these myself? I had, but WordPress requires that these files be included in themes for inclusion to the theme repository. When I realized this, I gave serious though to skipping submission. But, I think Sepal and Seed being included in the WordPress will give it the widest possible audience, so I opted to remove the …removal, and provide simple instructions for users to reapply the modifications themselves.

Open to other suggestions.

SEO

Eddie Machado did a great job of setting up Bones theme to be very SEO-friendly. The main improvement I’ve made here is page size and speed.

No backlinks to my site

I’m not linking to my site anywhere on the front-end of this theme. There are some helpful links (to this page and the blog post I wrote about the theme) on the theme settings page accessible via wp-admin.

Schema.org

A full implementation of Schema markup, which is supposed to be good for search engine rankings.

SCSS

To use this theme, you’ll need a developer, though not necessarily an ace. I didn’t add in the hooks for admin-based edits. Didn’t have time, and would have been more research than I had time for.

But, good news here is that it is well setup for a modern developer’s workflow, with all CSS being compiled and prefixed from SCSS (I used CodeKit for this project). If you don’t use SCSS / SASS, come on, it’s 2016, get with the program.

On Minified CSS

For the setup of this example site, I am using Ubuntu 16.04, with Nginx 1.10 and PHP 7. Caching is through W3 Total Cache (a pretty common choice for this setup), but I’m not minifying the CSS through W3TC.

A bit of a long story here, but W3TC hasn’t been updated in over six months as of this writing, and it doesn’t work well with PHP 7. Some nice folks have a project where they are trying to fix it. Their version is actually what I’m using on this server.

CSS minification, either in standard W3TC or new to in their version, is done via an application call, i.e. served as the output from some PHP file. This seems like too much overhead to just serve a minified file. So I’ve opted to minify the css in my development environment using Gulp.

You can easily get up an running with this setup by running npm install in the theme directory, and then gulp watch. Any changes you make to style.scss (also watching in CodeKit, ignoring gulpfile.js) will be automatically updated and minified to style.min.css.

I know this setup is:

  1. Probably a lot to handle for less experienced developers
    1. Take heart here, as long as you have Node.JS installed, it’s really as straightforward as described above.
    2. If it seems crazy to you to run a Node.JS server to run Gulp to compile minified CSS, I hear you, it’s a lot of setup compared to what WordPress developers are used to. Feel free to edit /library/bones.php to use style.css instead of style.min.css if you prefer to minify via a plugin.
  2. Strange because I’m currently using CodeKit and Gulp. I’ll be addressing this in short order, moving entirely to Gulp (watching the various SCSS files with Gulp as well.

The end result will be a simple gulp watch where you can then edit any of the SCSS partials in the /library/scss/ folder.

High-quality code

Seems like a bit of a strange thing to include in documentation, but I know that there is a lot of poorly coded WordPress themes out there, especially free ones. While this theme is and will remain completely free, it was my goal to make the code base for this theme something that organizations of any size could feel confident with.

Responsive

The theme is fully responsive and vendor prefixed. Even the typography is responsive.

Good to go here.

Flexbox

The theme which Sepal and Seed is based on, Bones, does it’s layout with classic CSS float-style positioning. Which is fine, but requires lots of code made unnecessary by the simple beauty of flexbox.

Flexbox can be tricky at first, and as I’ve come to say, it’s a bit like life: it never really makes sense, you just get used to it.

It took me quite a bit of practice to get my head around Flexbox, but now that I’ve got it, I love it and would never consider going back to floats. Check out this great, free course from Wes Bos.

RTL

RTL support, check.

Menus

Menus are pretty straightforward in this theme, and there are only two, with a couple of notes to get things to layout exactly as you see them in the footer.

The header menu location is called Main Menu. Menu is flexboxed, so should handle a variable number of links quite well. Not excruciatingly tested here, though, so YVVM.

The footer menu location is called Footer Links. A screenshot will do the best job of how to set it up:

footer-menu-screenshot

Also, to get the menu title to look the way it does, add the following classes: no-hover menu-parent.

You’ll need to go to Screen Options in wp-admin and toggle CSS Classes, then click on the name of the menu item (About, Support, Contact, in the case of the screenshot above), and then the last item in the list of options will be CSS Classes. Add the two classes above, save.

Hero

For a hero section already well-styled with the them, check out the theme’s main index.php file. It’s what powers the responsive layout for the hero section on the home page of this site.

Widgets

I made a slightly customized version of the standard Recent Posts widget, called Recent Posts, Custom. If you want the comment count in your sidebar, deactivate the Recent Posts widget, and activated the Recent Posts, Custom widget.

Plugins

The theme comes with two plugins being required: Google Analytics and Yoast SEO. Pretty basic.

jQuery

jQuery is kind of huge. The only possible way to get to sub-100 KB pages was to tear it and many other not-completely-necessary things out of the source. I’ve coded the rest of the theme to not require it. You’d be amazed how far you can get with document.querySelector().

Social links

To update the social links in the footer, pull up footer.php. Didn’t have time to widgetize these.

Logo

The logo is pretty much a dead rip of a cool little placeholder logo I found when Google  image searching ‘placeholder logo’. It was a cached result from something the developers of Clean Air Chicago used when building that site. If anyone responsible for the site has a problem with my using such similar art, let me know and I’ll figure something else out.

Fonts

So I set out to use Verdana and Georgia, since they come standard on pretty much every machine. But I got about 50% of the way through the project and just couldn’t look at the terrible kerning on Verdana, at least as it was rendering for me. Plus, I guess I’ve been completely spoiled by the bountiful web typography options we have available these days.

So I opted for Google Font-served Open Sans and Merriweather. Most people will already have at least one of these fonts cached in their browser, so shouldn’t add much bulk.

Comments

To keep the page size down, I removed comment-reply.js (what?!). Not as big a deal as you might think. When you hit reply, the page just goes down to the form. Not worth the bulk in my opinion.

Embeds

Same here. Embeds are overkill IMO.

Gravatars

Not on a fast theme.

License

Take. Use.