Setup custom wordpress theme X files

Setup custom wordpress theme X files

David Cruwys IdeasMen, Procedures Leave a Comment

Setup custom wordpress theme files on Theme X using pre-defined LESS/CSS, JS, PHP & Images files for a new wordpress installation. This step by step guide to setting up a base set of Themes & Plugins for a new Content Constellation Website.

This guide is for our internal developers:

  • Shows how to copy common assets from a template folder to the new website
  • System we follow to customize wordpress theme using Theme X
  • How to setup WinLess configuration or Clone an existing configuration

In this example I will be working with www.FirstHomeBuyers.co

This is part of the “How to create a website” professional series, this includes best practices that and processes that we follow to “Make a wordpress website” for building out the IdeasMen – Content Constellation system which allows niche markets such as Financial Broker Networks, Accounting Groups and Medical Practices to dominate SERP’s (Search Engine Ranking Positions) within their local & geographic regions.

Copy default files to child template folder

wpid1131-Copy_default_files_to_child_template_folder.png

Merge Functions.php

wpid1132-Merge_Functions.php_.png

I use Beyond Compare for merge functionality, but there are others

Configure WinLess

wpid1130-Configure_WinLess.png

Configure WinLess so that:

  1. Your primary CSS files end up in css
  2. Your generated CSS files end up in generated-css

How to clone WinLess Configurations

This video shows a quick way to clone your WinLess settings so that you can get a new website up and running using .LESS and know that your configurations are consistent with previous website installations.

Original + Altered by Base Css

wpid1133-Original___Altered_by_Base_Css.png

Alter Colours for every common component from Variables.less

wpid1129-Alter_Colours_for_every_common_component_from_Variables.l.png

All colours, fonts, shadows, accents etc… can generally be controlled from this single file

Sample Custom WordPress Theme

wpid1134-Style_Guide_using_default_Variables.Less_.png

Style Guide using default Variables.Less

Sample Style Guide

This video show a sample Style Guide using the default Variables.Less

David CruwysSetup custom wordpress theme X files

Leave a Reply