== NO LONGER IN ACTIVE DEVELOPMENT, USE AT OWN RISK ==
Author: Pieter Bos
soblossom is a WordPress starter theme that is based on Foundation on the frontend and Underscores sass on the backend.
We first started developing soblossom in 2013 under a few different names (with Foundation 3 and 4). Then when Foundation 5 was released, instead of updating the lot, we started over and in August 2014 we went through another of those quite extreme makeovers/reorganisations...
The default mobile navigation is with the off canvas. We have kept the navigation as flexible as possible though, so you can also choose the "conventional" topbar navigation (where the menu slides down) or any variation you might think of.
soblossom also comes with a footer navigation menu and a social media menu which comes with an iconfont walker (inc/walkers/iconfont-walker.php) that has the FontAwesome font-icon-set integrated.
All Featured Images, for example those on a Single Post, come with the builtin Foundation Interchange. The main advantage of this is that the image shown (AND loaded) is different per device: medium sized for small devices, tablets and laptops and the large image for everything wider than 1280px. You can customise the code by adding your own image sizes and call those instead. The function that deals with this is the soblossom_featured_image() function on lines 278-313 of inc/soblossom.php.
For the soblossom theme we have completely overhauled the default WordPress Gallery shortcode. You won't find any inline styling either. We have replaced the functionality with Foundation Blockgrid. Since v1.6.5 we have removed the clearing from the soblossom gallery shortcode, due to too many inconsistencies and ongoing (or recurring) conflicts.
By default the blockgrid shows small-block-grid-2 medium-block-grid-3 large-block-grid-4, which means that on small devices (up to 640px wide) it shows 2 thumbs; on medium devices (640-1024px wide) it shows 3 thumbs and on large devices (anything over 1024px) it will show 4 thumbs.If you want to adjust anything, you can do so in inc/classes/gallery.php and the scss/_gallery.scss files.
If you want to have a lightbox effect we recommend using the WP Featherlight plugin.
Showing your galleries this way means that whatever you choose as amount of columns in the WordPress interface will have no effect on the frontend. That is the "price you pay" for awesomeness. Of course you can remove the function and let WordPress do it its own way too.
Foundation comes packed with features and although we have not actively implemented all of them, they are all readily available to you. You can ready all about them via the Foundation Documentation.
We have tried to keep most of the functions together. The main functions.php file in the theme root is where we do all the inclusions of other files as well as registering the 3 navigation menus and the 2 widget areas.
Then there is the inc/soblossom.php file, the core functions file and without it the blossom cannot bloom :)
The rest of the functions files you can find in the inc/functions folder. There are the dashboard-functions.php for functions and filters that have to do with the admin or backend of the site, there are sample cmb.php and cpt.php files for Custom Meta Boxes and Custom Post Types resp. and you will also find the functionality.php file in the inc/functions folder.
The purpose of this file is to add your own functions and filters to the theme and at the same time to ensure portability if you ever want to switch themes. Of course you can also get rid of that file and start hacking away in the inc/soblossom.php file or any of the other files that add functionality to the theme.
Apart from the default ones, soblossom comes with 4 additional page templates. One is the full width template. Two are based on Foundation templates, Banded and Workspace. There is also a sample template which you can use to build a new template from/on.
In the templates folder you can find these 4 page templates.
The soblossom theme comes optimised for the following plugins:
- Formidable Pro (aff.link) - turn off the CSS output of the plugin to fully enjoy the Foundation Forms styling
- Gravity Forms (aff.link) - turn off the CSS output of the plugin to fully enjoy the Foundation Forms styling
- Meta Box - the
inc/functions/cmb.phpfile has been generated with the demo code of this plugin. - Yoast SEO - title tags in the head section, breadcrumb code already added
- WPML (aff.link) - language code is added to the body class if WPML is active (filter in
inc/soblossom.php)
In the languages folder you will find the soblossom.pot file and any translations that have been completed.
2014.12.27 - Dutch added - by myself 2015.11.25 - German added - by Tina
Since v1.5.1 we are loading the Font Awesome icon font via Bower. This means that you don't need to separately enqueue it anymore which saves a call to an external source. We have added two lines to the main scss file (scss/style.scss line 25-26). If you don't want to use it, you can just remove the lines and even delete the fontawesome folder from the bower_components if you want.
Sometimes it seems that FontAwesome doesn't update when running bower update. If that is the case, then running bower install --save fontawesome might do the trick source
If you're new to Grunt, then we would like to suggest to start off by reading this amazing article by Chris Coyier.
As a quick reminder (if only for ourselves) to start a new project you will first need to install everything:
- start with installing Foundation according to the Get Started instructions over at Zurb
- then copy over everything from this Repo into your new project (overwrite everything except the
bower_componentsand thenode_modulesfolders and don't forget to remove the.gitfolder that comes with the Foundation install) - if you want to use FontAwesome, you will hoever need to copy that folder over from the soblossom
bower_componentsfolder to your new install - when Foundation is installed the grunt-sass and grunt-contrib-watch tasks are already installed, so you don't have to install those anymore
- grunt-contrib-concat:
$ npm install grunt-contrib-concat --save-dev - grunt-contrib-uglify:
$ npm install grunt-contrib-uglify --save-dev - grunt-wp-i18n:
$ npm install grunt-wp-i18n --save-dev
For LiveReload to work, you will need to install the browser extension for the browser you use for your dev work.
Included is a sample Gruntfile.js that you can use as a start.
Yes, of course you can! Then you can just ignore all the stuff about Grunt. At the top of the soblossom_scripts() function, which enqueues the styles and scripts, you can find an explanation and an alternative. You can find this function in the inc/soblossom.php file.
Nowadays there are plenty of WordPress themes built on Foundation and we have looked at a few of them: Reverie by Zhen Huang, Required+ (discontinued) by Required+, WPForge by T. Vasquez and last but not least JointsWP by Jeremy Englert. Thanks all for your guidance, tips and inspiration!
- License: GNU Version 2 or Any Later Version
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
- Donate link: https://so-wp.com/donations
- bug fix, bug #22 language files were named wrong and could not be picked up. Thanks for reporting and correcting this Tina!
- add German language files - credits Tina
- generate new .mo files for Dutch and German
- update to FontAwesome 4.5.0
- update to Foundation 5.5.3
- update to Modernizr 2.8.3
- remove clearing from
inc/classes/gallery.phpdue to too many recurring conflicts with Foundation clearing functionality. For an always working responsive lightbox we recommend to use WP Featherlight instead, which looks almost the same and is much more consistent and reliable.
- critical update, fixes bug that made it impossible to change site description
- improve Grunt file to separate vendor scripts and theme scripts
- therefore edited soblossom_scripts() function (inc/soblossom.php)
- removed redundant line in “sans-Grunt”sample (inc/soblossom.php)
- remove redundant compiled js files
- compile js files with new file-names
- add previously missing FontAwesome inclusion instructions (readme.md)
- add alternative enqueueing of scripts/styles together with better documentation for if people want to use something other than Grunt.
- revert to semantic versioning
- update to FontAwesome 4.4.0
- remove functions related to removing parts of the Yoast SEO plugin. Instead install our own SO Clean Up Yoast SEO plugin.
- add adminbar specific styling, see scss/_adminbar.scss
- change footer copyright text (replace back to top link with sitename/link)
- add script for back to top transition
- add script that removes sometimes conflicting body class of f-topbar-fixed
- update to Foundation 5.5.2
- include Font Awesome icon font via Bower
- switch to Grunt
- update to Foundation 5.5.1
- update to FontAwesome 4.3.0
- add missing div in soblossom_featured_image() function
- adjust $content_width to 970px
- address issues #2-#18 by Emil Uzelac after his official Theme Review
- complete Dutch translation
- update to Foundation 5.5.0
- update to Foundation 5.4.7
- update to Foundation 5.4.6
- move comments styling to its own sheet
- fix typo on comments.php
- add selection styling
- update to Foundation 5.4.0
- remove function "Remove Query strings from Static Resources" as number of caching plugins already have that builtin
- rewrite inclusion print stylesheet
- add #link to off-canvas-toggle to enable for iOS
- update readme.md
- add page templates banded and workspace
- more tweaking
- nth overhaul, but we're getting somewhere now
- complete theme overhaul; many parts reorganised
- integrate latest changes from _s
- massive theme overhaul with lots of additional function (as I commited too fast, you can see the changes to all files where it says "add gitignore")
- changed arrows of continue reading, next/previous post/posts/pages into Font Awesome long arrows
- clean up
- initial commit