How to Create a Barebones WordPress Site

There are many important steps when building any site that are crucial to ensure a successful end product.

• design direction, either by a theme, comp or sample site
• pages in the site
• description for each page type
• discussion with developer to determine ideal plugins to achieve scoped functionality
• scope that brings it all together

Before development begins, the developer should know which sort of page templates may be required based on the design and scope.

Building the Barebones site

Start with a fresh, local WordPress installation and create a child theme. A child theme builds upon the parent theme and can be updated separate from the child. If an override file does not exists in the child theme, it’ll fall back on the parent theme’s code. For this doc, we’ll assume the site will be demosite.com for naming conventions.

Child Theme

• Create a new folder in wp-contentthemes/ called ‘demosite’. This is where all of the base theme overrides will exist. Anything not overwritten in the child theme will use the parent theme’s code template.
• Within that new folder, create an EMPTY style.css file, meaning there’s no other CSS in there, with the following CSS comment:

/**  
 * Theme Name:   DemoSite.com  
 * Description:  Twenty Seventeen Child Theme  
 * Author:       [ primary developer name ]  
 * Author URI:   http://yourwebsite.com  
 * Template:     twentyseventeen  
 * Version:      1.0.0  
 * License:      GNU General Public License v2 or later  
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html  
 * Text Domain:  twenty-seventeen-child 
 */

• If the design is set, also create a screenshot.png file of the homepage in the child theme folder so that it shows up in the wp-admin > themes area
• Log into the WordPress admin and select the the theme. You are now using the demosite child theme on the front end.

Child Theme Directory Structure

As with any site, it’s best to keep code organized. I like to follow the standard organization structure that groups CSS, JavaScript and Images in their own folders.

Keeping code organized not only helps making things easier to find, but is handy when multiple developers are working on the same codebase to avoid two people working on the same file.

/css – unique CSS file for each major group. Plugin will combine and minify for us. Ideally, the child theme’s style.css file is ONLY used for the theme setup comments as described above. Do not use @import unless a web font requires it.

• demosite.css – primary CSS
• responsive.css – media queries for all breakpoints
• grid.css – whichever grid system is being used, e.g. bootstrap, skeleton, etc
• forms.css – formidable styles
• whatever.css – set of CSS for a particular widget or plugin element that should be self contained

/js – unique JS files

• jquery.functions.js – the custom JS for this particular site
• jquery.whatever.js – some third party element, widget or plugin

/images – all non Media images used in the template / theme the admin doesn’t need to manage. Good place for placeholder / fallback images and layout  assets.

Copy code from the parent theme directory to modify as the site requires, which will include things like:

• functions.php – site wide functions, admin limiting functions, define extra function files (more on that below), helpers, etc. Note, you should start with an empty functions.php
• header.php
• footer.php
• page.php
• 404.php
• single.php

Organizing Functions and Shortcodes

Functions.php can become a huge file when not organized well. To better handle large amounts of code, I create a functions folder in the theme directory for things like:

• rewrite.php
• hooks.php
• shortcodes.products.php – for product related shortcodes, others for each unique set of shortcodes

The functions.php file would include the main functions and require() lines for each of the functions/* files that are included in the site.

Building the HTML

As with any site, you are in full control over the front-end HTML and CSS. Just build it like you would any other site.

Pick a Grid system

Popular grid systems such as Skeleton: Responsive CSS Boilerplate, Grid by Example, Bootstrap · The world’s most popular mobile-first and responsive front-end framework., or my favorite Generate your own Grid with the Responsive Grid System calculator. can help get you started with a responsive CSS grid framework. All of these options let you customize the number of columns, margins and responsive breakpoints so that you can build the design as per comp. For the Grid System Calculator, I like using the :not(‘responsive’) CSS attribute to retain columns at mobile breakpoints.

Though it’s ideal that there’s only one grid system in use, some plugins might have their own. Be sure to review these plugins before use to reduce CSS bloat.

Plan your HTML

Throughout the site, there will be common elements that should be structured consistently to share CSS classes. It’s a waste of time to build unique CSS for elements that look and function the same across multiple places, all it takes is good planning to make sure the CSS file is organized and short.

For common elements that are close, but not exact across pages, use CSS subclasses for page-specific instances. Example, homepage might have a news listing grid where the title is 16px, but on a news detail page those boxes have 14px size titles. Simply have a main news-listing title CSS and a news-listing.subclass title subclass to handle those variants.

Build your HTML

However works best for you, build out your HTML comp cutups. You may prefer to do this directly within the WordPress environment or as standalone .html files (my preference so that I can responsive test before implementation). Keep in mind that blocks of HTML should be written in such a way that they can be converted into shortcodes when pulling in dynamic WordPress content.

Though a comp or expected design might have limited placeholder content, the client can always increase or decrease the amount of actual content. A responsive site design should be able to accommodate dynamic amounts of content and imagery.

Integrate with WordPress

Take your header, footer, code blocks and page templates and get them into WordPress.

• header.php
• footer.php
• page-template.php
• functions/shortcodes.whatever.php
• etc.

Page Templates

Each page that might require a unique layout should be set up as a page template. Page templates are able to be selected by the admin on a per-page basis and are added to the codebase by creating a PHP file with a unique name and custom PHP comment at the top of the page.

That’s all there is to it. Easy, right?