Frank is an open source WordPress theme designed for speed
- About Frank
- Using Frank
- Development Setup
- Browser Compatibility
- WordPress Compatibility
This theme has been the personal project of P.J. Onori with the gracious help of many. The theme was designed to provide a lightweight theme focused on the reading experience. Frank is the parent theme of Frank of Some Random Dude, the theme I use on somerandomdude.com
Frank is fast
Frank is flexible
Frank has several different layouts to choose from for your home page. Most layouts let you specify the number of posts to show and from what categories. Templates can be stacked by any amount and order to give you the structure you need. Additionally, there are plenty of well-placed widgets that will give you that extra level of customization.
Frank is forward-thinking
Frank fits on your phone
Frank uses a subset of Foundation to provide a responsive layout for desktops, tablets and phones. Add this to the theme's small footprint and you have a mobile-optimized blog.
Frank is for you
This theme is 100% open source and developer friendly. The parent theme (/frank) is under the GNU Public License.
Frank ain't finished
There is always more to do, but I need help. This project relies on community support, so if you find this theme helpful, please contribute.
By default, the
defer-image-load.js script is not loaded in the theme. You'll need to add the script within the
<img data-defer-src="/path/to/image.png" width="300" height="300" alt="Deferred Image" />
The Frank slideshow will be replaced with Gallery CSS in the upcoming 0.9.4 release.
The Frank modal will be replaced with CSS Modal in the upcoming 0.9.4 release.
Frank supports all the basic WordPress theme options you expect (plus more). All basic options (Widgets, Menus, Header & Background) can be found in the Appearance section. Frank also comes with theme-specific options found under Appearance > Frank Theme Options.
Frank's General settings allow for small site adjustments, when you don't want to open up the hood and get your hands dirty.
Custom Header Code
The Custom Header Code setting allows you to add code in the
Custom Footer Code
The Custom Footer Code setting allows you to add code above the closing
Tweet This/Twitter Handle
Home Page Settings
The Frank homepage template is set up to have customizable, modular content sections to display your posts in different ways.
Adding Content Sections
A new content section can be added by clicking the Add New Section button. This will add a blank section to the bottom of the section list. The section will not be displayed on your home page until you save the settings.
Removing Content Sections
Any section can be deleted by clicking the × button on the top right corner of the section pane. The section will not be removed from your home page until you save the settings.
Changing the Order of Content Sections
Sections can be dragged into the desired order by dragging the handle on the top left corner of any settings pane. The order will not be changed on your home page until you save the settings.
Display Section Header
Each section can have an individual title and caption. Checking this setting will allow you to enter a title and caption to be displayed at the top of the section.
A title for the content section.
A description for the content section.
Frank has various loop types for the home page, depending on your needs.
Default Loop: This loop is the basic loop found in most WordPress themes. It incorporates none of the options found in other loops, such as custom post counts, category filters etc. The Default loop also displays a sidebar on the right hand side.
One Up (Regular): The One Up loop displays one post per column with with no sidebar. The typographic size of the header and copy closely resemble that of the Default Loop.
One Up (Large): The One Up Large loop displays one post per column with with no sidebar. The typographic size of the header is much larger, making it suitable for a featured section.
Two Up: The Two Up loop two posts per column with with no sidebar.
Three Up: The Three Up loop two posts per column with with no sidebar.
Four Up: The Four Up loop two posts per column with with no sidebar.
Number of Posts
This setting allows you to define how many posts you want displayed in the loop. Note: This setting does not work for the Default Loop as it will use the number of posts defined in by the Blog pages show at most setting in Settings > Reading.
Categories to Display
If you only want to show specific categories in a section, you can choose which to display in the checklist. Note: If no categories are selected, the section will default to displaying all categories (I know, this is a little wonky, I will be working on this in future versions). This setting will also not work for the Default Loop.
Remove WordPress version meta tag
There are potential security risks associated with exposing your version of WordPress. Removing this meta tag will also shave a few bytes off of the generated HTML.
Remove version URL parameter from scripts
The version URL parameter can prevent files from caching in certain browsers. If you want more reliable caching of your scripts, turn this feature on.
Remove version URL parameter from stylesheets
The version URL parameter can prevent files from caching in certain browsers. If you want more reliable caching of your stylesheets, turn this feature on.
Frank uses Compass for SCSS compilation and takes advantage of its mixins and functions. Installing Compass is necessary to successfully compile the theme's SCSS, but it's quite easy. The theme includes the Compass config file to make life a little easier.
The styles for Frank are broken up by subject matter. The style.scss file is the only file you should compile. It takes all the SCSS files and builds it into the theme's style.css. All colors, typefaces, font sizes and other visual attributes can be altered in the variables.scss file. Site-wide styles can be found in the global.scss file. All template-specific styles are found in the SCSS file with its matching name.
Frank uses a pared-down version of Foundation v2 for its grid system. The Foundation framework was modified to remove unneeded styles and features. All Foundation code is found in stylesheets/scss/grid.scss.
The Frank theme is pretty lean by default, but there's a lot you can do to make it faster. Below are some simple tips for keeping Frank fast.
By default, the style.css file is not minified for legibility. Minifying your stylesheet should be the first thing you do. The easiest way to accomplish this is to change the Compass SCSS compilation setting. To do this, open the config.rb file and change the
output_style variable from :expanded to :compressed.
Use Widgets Wisely
Frank has various widget spaces for you to customize your theme. Used correctly, widgets can theoretically improve performance. The Navigation widget is one way to lower the amount of database queries WordPress makes (6 -7 queries in my experience). By using a text widget in the Navigation widget section and adding an unordered list like the example below, you can save quite a few database queries.
<ul id="menu-primary" class="menu"> <li class="menu-item"><a href="/page-1">Page 1</a></li> <li class="menu-item"><a href="/page-2">Page 2</a></li> <li class="menu-item"><a href="/page-3">Page 3</a></li> </ul>
Avoid jQuery (or any other JS framework for that matter)
Install Alternative PHP Cache (APC)
Install W3 Total Cache (W3TC)
W3TC is the easiest way to take full advantage of APC. W3TC has a wide range of features, but if you build your theme correctly, you shouldn't need to use most of them.
W3 Total Cache Tips
- Manually combine and minify your CSS/JS files. Relying on W3 Total Cache for this process will require extra CPU cycles.
- W3TC offers the option to connect to content delivery networks (CDNs). CDNs are great, but if you keep your site small, they become unnecessary. If your site is getting serious traffic or contains a large amount of images or video, a CDN may make sense, but for the rest of you, save your time and money.
If you have cloned Frank from the Github repo, you will need to build the files for it to run properly. There are two different methods to do this:
Method #1: Less Steps, Less Awesomeness
Sometimes you just need the basics. If running commands in the terminal is a little too much for you, we suggest you use a tool like CodeKit to help you with the preprocessor compiling.
CodeKit will ask you to add a project. Just select the 'frank' theme folder and CodeKit should do the rest. Note: You're going to have much less control and ability to optimize the theme through with method. This approach is advisable if you just want to build Frank the quick-and-dirty way.
Method #2: More Steps, More Awesomeness
If you want to get into the nitty-gritty and really get Frank running as fast as possible, you'll need to use our Grunt tasks.
Frank's automation tools use Node.js, Ruby, Compass, SASS, CSSCSS, Composer and WebP. Phew, that's a mouthful. We're constantly working to whittle this list down, but for now, this is what's necessary.
If you'd prefer to use a package manager, here's a full run-down on all the ways to do it.
Install Ruby 1.90+
Many of the Grunt tasks rely on Ruby gems to do some of the heavy lifting. The gems used depend on Ruby 1.90+. To see what version of Ruby you're running, run the following command in your terminal:
$ ruby -v
We rely on Compass to make SASS preprocessing all that more awesome. Install Compass by running:
$ gem update --system && gem install compass
All CSS for the theme is generated from SASS. Install SASS on your machine by running:
$ gem update --system && gem install sass
Frank uses CSSCSS to check for CSS rule redundancy. Install CSSCSS by running:
$ gem update --system && gem install csscss
Install WebP binary
Open up a terminal window,
cd into the Frank theme folder and run the following commands:
$ php composer.phar install
$ npm install
Once that's complete, you'll need to install the WordPress Coding Standard for PHP_Codesniffer.
And with that, you're finally done.
For basic compilation of SASS and CoffeeScript files, run the following command in your terminal:
Automatic SASS/Coffeescript Compilation
If you're modifying Frank and want your SASS and CoffeeScript to build when a file is modified, run:
$ grunt watch
Testing, Linting and Code Quality
We don't have a ton of tests running just yet, but have a lot more in store for the future. To test your files, run:
$ grunt test
Frank is all about optimization, so a lot of the magic happens here. To run all the optimization tasks, run:
$ grunt opt
To build the documentation, run:
$ grunt docs
If you'd like a clean copy of the theme without any of the files for development or preprocessor files, run:
$ grunt dist
Frank is focused on modern desktop and mobile browser support. Frank works decently on Internet Explorer 8+. No guarantees are given for any earlier IE versions.
Frank was built and tested on WordPress 3.4.3. Any future development of the theme will be focused on supporting the most current version of WordPress.