Before the start of every WordPress theme that I develop, I use a simple basis. This is a theme with a number of patterns that I always use.
The files and directories
CSS directory
My css directory consists of 3 files; grid.css, responsive.css and reset.css.
Grid.css
My grid.css file is the Unsemantic Grid CSS Framework. I like this css grid because it is easy to use, does not have unnecessary classes and is desktop first, which I like since I am a desktop first thinker most of the time.
Responsive.css
In my responsive.css file I have 4 breakdown points:
- Mobile (max-width: 767px)
- Tablet (min-width: 768px) and (max-width: 1024px
- Tablet and Mobile (max-width: 1024px)
- High resolution devices (to load high quality images for retina displays)
Reset.css
My reset.css file resets all the default css settings such as margins, paddings, borders, backgrounds, font sizes and text decorations so I have a clear start without effects of default browser styles.
Includes folder
In my includes folder I put files which I all include into my functions.php file. By default I have 2 files already in there; helpers.php and script-enqueue.php.
Helpers.php
In the helpers.php I put functions that can help ease the process through my whole theme such as a function to get menu items by location instead of menu name and a function to get the first term by post id.
Script-enqueue.php
My script-enqueue.php file enqueues all the javascript and css files for my theme. By default there are 2 javascript files; jQuery and main.js (my core theme javascript/jQuery file and 4 CSS files; reset.css, grid.css, style.css, responsive.css.
<?php
/**
* Enqueue theme scripts and styles
*/
function _enqueue_scripts() {
$version = '1.0.0';
// Stylesheets
wp_enqueue_style( 'reset_css', get_template_directory_uri() . '/css/reset.css' );
wp_enqueue_style( 'grid_css', get_template_directory_uri() . '/css/grid.css' );
wp_enqueue_style( 'main_css', get_stylesheet_uri(), false, $version );
wp_enqueue_style( 'responsive_css', get_template_directory_uri() . '/css/responsive.css', false, $version );
// Scripts
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), $version );
}
add_action( 'wp_enqueue_scripts', '_enqueue_scripts' );Js folder
My js folder has by default only 1 file included.
main.js
Because I use a lot of jQuery for WordPress theme development, my main.js has a jQuery ready event handler to start.
jQuery(document).ready(function($) {
// Let's start!
});Functions.php
My functions.php file has a part that loads the files from the includes folders.
/**
* Loads all the files from the includes directory
*/
$files = glob( TEMPLATEPATH . '/includes/*.php' );
foreach ( $files as $file ) {
require_once $file;
}And a autoloader function for loading classes from my class folder.
/**
* Autoloads classes
*/
spl_autoload_register( function( $class ) {
// Suitable to load namespaces
$file = get_template_directory() . '/class/' . str_replace('\\', '/', $class ) . '.php';
// Include class if file exists
if ( file_exists( $file ) )
require_once $file;
});Header.php
My header.php file has by default a meta charset tag, a viewport tag to scale on multiple devices, a meta title tag, a pingback url link, a favicon tag pointing to an image in the root directory and the wp_head() function to load all the WordPress head functionality and be able to hook into this section later.
At last I have an opening body tag with the body_class() function to load WordPress body classes and hook into the body class later.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title><?php echo trim( wp_title( '', false ) ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>Footer.php
In footer.php I have a closing body and html tag and the wp_footer() function to load WordPress footer functions and be able to hook into this section later.
<?php wp_footer(); ?>
</body>
</html>Style.css
In my style.css I have the WordPress theme details comments such as Theme name, author, version and text domain.
/*
Theme Name: Base Theme
Author: Robbert Vermeulen
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: base_theme
*/Download the theme
If you also want to use my theme as a quick start for your future WordPress themes, then visit the git repository to download it from: https://github.com/Robbertvermeulen/wordpress-base-theme
