Quark is your basic building block for creating beautiful, responsive custom themes. It’s not a convoluted or confusing framework that’s hard to learn. It’s a simple and elegant starter theme built on HTML5 & CSS3. It’s based on the Underscores (_S) and TwentyTwelve themes, so that means not only is it flexible, it’s extremely easy to customise. There’s no need to make a child theme (unless you really want to), just dig in to the code & use it to give yourself a kickstart in creating your next awesome theme.

Its base is a responsive, 12 column grid. It incorporates the latest version of Normalize.css (v2.1.0) for making sure that browsers render all elements more consistently and in line with modern standards. As well as the latest version of Modernizr (2.6.2) for detecting HTML5 and CSS3 browser capabilities.

Creating Theme Options is super easy with the inclusion of the Options Framework by Devin Price and it includes over 300 gorgeous, retina friendly icons. Powered by Font Awesome, these icons are infinitely scalable and extremely easy to style using css.

The main navigation uses the standard WordPress menu. Support for dropdown menus is inluded by default. If you’d like to envoke a button toggle for the main navigation menu on small screens, simply uncomment the two lines from the quark_scripts_styles() function within functions.php to register and enqueue the necessary javascript file.

View the Demo

Download Quark

Templates

Quark includes a set of your most common theme templates, including templates for Full-Width pages, Left Sidebar, Right Sidebar (default), Front-Page, Tag, Categories, Authors, Search, Posts Archive and 404.

Post Formats

All the standard WordPress Post Formats are supported. These include; Aside, Gallery, Link, Image, Quote, Status, Video, Audio, Chat and of course, your std post.

Widgets

Widgets are a great way of adding extra content to your site and Quark has a whole assortment of them.

Main Sidebar: Appears in the sidebar on posts and pages except the optional Homepage template, which has its own widgets
Blog Sidebar: Appears in the sidebar on the blog only
Single Post Sidebar: Appears in the sidebar on single posts only
Page Sidebar: Appears in the sidebar on pages only

The Front Page Banner Widget areas are dynamic! You can use up to two of these and they’ll magically space themselves out evenly. For example, if you only add widgets into the First Front Page Banner Widget Area, then it will expand the full width of the page. However, if you add widgets to both Front Page Banner Widget areas, they’ll magically space themselves out over two columns.
First Front Page Banner Widget: Appears in the banner area on the Front Page
Second Front Page Banner Widget: Appears in the banner area on the Front Page

The Homepage Widget areas are also dynamic! You can use up to four of these and they’ll magically space themselves out evenly. For example, if you only add widgets into the First Homepage Widget Area, then it will expand the full width of the page. However, if you add widgets to all four Homepage Widget Areas, they’ll magically space themselves out over four columns.
First Homepage Widget Area: Appears when using the optional homepage template with a page set as Static Front Page
Second Homepage Widget Area: Appears when using the optional homepage template with a page set as Static Front Page
Third Homepage Widget Area: Appears when using the optional homepage template with a page set as Static Front Page
Fourth Homepage Widget Area: Appears when using the optional homepage template with a page set as Static Front Page

The Footer Widget areas are dynamic too! You can use up to four of these and they’ll magically space themselves out evenly. For example, if you only add widgets into the First Footer Widget Area, then it will expand the full width of the page. However, if you add widgets to all four Footer Widget Areas, they’ll magically space themselves out over four columns.
First Footer Widget Area: Appears in the footer sidebar
Second Footer Widget Area: Appears in the footer sidebar
Third Footer Widget Area: Appears in the footer sidebar
Fourth Footer Widget Area: Appears in the footer sidebar

Custom Header

The Default logo can be easily changed using the Custom Header feature. You change this in the Appearance > Header menu option

Custom Background

The background pattern can be changed using the Custom Background feature. You change this in the Appearance > Background menu option

Theme Options

Additional Theme Options can be found in the Appearance > Theme Options menu option. These include options for:
Specifying the URL’s for various social media networks
Specifying the banner background image & color
Specifying the footer color
Changing the footer credit text

Installation

There are three ways to install your theme. It can be installed by manually uploading the files to the themes folder using an FTP application, it can be installedby downloading from the WordPress Theme Directory within the Dashboard or it can be installed by uploading the theme zip file that you downloaded.

Use the following instructions to install & activate Quark using your preferred method.

Manual installation:

Unzip the files from the Quark zip file that you downloaded
Upload the Quark folder to your /wp-content/themes/ directory
Click on the Appearance > Themes menu option in the WordPress Dashboard
Click the Activate link below the Quark preview thumbnail

Install from the WordPress Theme Directory:

Click on the Appearance > Themes menu option in the WordPress Dashboard
Click the Install Themes tab at the top of the page
Type ‘Quark’ in the search field, without the quotes, and then click the Search button
Click the Install Now link below the Quark preview thumbnail
Once the theme has been installed, click the Activate link

Install by uploading the theme zip file:

Click on the Appearance > Themes menu option in the WordPress Dashboard
Click the Install Themes tab at the top of the page
Click on the Upload link just below the two tabs at the top of the page
Click the Browse button, browse to the folder that contains the theme zip file, select it and then click the Open button
Click the Install Now button
Once the theme has been installed, click the Activate link

Getting Started

Since Quark is a starter theme to kick of your own awesome theme, the first thing you want to do is copy the quark theme folder and change the name to something else. You’ll then need to do a three-step find and replace on the name in all the templates.

Search for quark inside single quotations to capture the text domain.
Search for quark_ to capture all the function names.
Search for quark with a space before it to replace all the occurrences of it in comments.
(You’d replace this with the capitalized version of your theme name.)

or, to put it another way…

Search for:’quark’
Replace with:’yourawesomethemename’
Search for:quark_
Replace with:yourawesomethemename_
Search for: quark
Replace with: YourAwesomeThemeName

Lastly, update the stylesheet header in style.css and either update or delete the readme.txt file.

License

Quark is licensed under the GNU General Public License version 2.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

Credits:

Quark utilises the following awesomeness:

Options Framework, which is licensed under the GPLv2 license
Modernizr, which is licensed under the MIT license
Normalize.css, which is licensed under the MIT license
Audio.js, which is licensed under an MIT License
jQuery Validation, which is dual licensed under the MIT license and GPL licenses
Font Awesome icon font, which is licensed under SIL Open Font License and MIT license
PT Sans font, which is licensed under SIL Open Font License 1.1
Arvo font, which is licensed under SIL Open Font License 1.1

Copyright & License

Quark is licensed under the GNU General Public License, version 2 (GPL).

Find out more

View the Demo

Download Quark