today’s article, we will explain the concept of starter templates or starter templates in WordPress (WordPress Starter Themes), which is considered one of the important and practical methods that facilitate the process of developing a WordPress theme quickly and flexibly for developers.
Through these templates, developers can obtain the basic WordPress template infrastructure to rely on to develop their own professional templates faster instead of establishing and writing everything from scratch.
What is the meaning of Starter Theme?
The Starter Theme is an empty, primitive WordPress template of any design. This template includes the basic functions of any simple template. In it, you will find custom codes for displaying posts, archive pages, individual posts, and comments, but they appear on the site without formatting at all, or they appear with minimal formatting and layout, leaving the developer to handle the formatting process as he wishes.
The importance of this type of template lies in enabling template developers to quickly start building their templates by providing raw material for a WordPress template that they can rely on and start adding their formats and additional functions and creating their own WordPress templates without having to write all the necessary code from scratch.
advice!
Although starter templates are great and save you a lot of time in developing a WordPress theme, if you are a beginner in developing WordPress templates, it is better in this case, in my personal opinion, to start developing your template from scratch and work on it step by step and write the entire code yourself, because in this way The method will help you better understand how each part of your template works.
The concept of a starter template differs from the concept of a parent theme and the concept of a theme framework. Starter templates come without any custom hooks , template tags, or any additional formats, and are content, as we mentioned, with including the basic code necessary for the template to work.
Read more: Learn about the types of WordPress templates in terms of customization
Best starter templates for theme developers
There are many WordPress starter themes that you can use to develop your own theme. Here is a list of the most popular of these templates:
1.Underscores
The Underscores template is one of the most popular starter templates among WordPress templates. It is a template developed by Automattic, the company that produces hosted WordPress, i.e. WordPress.com.
Underscores provides a simple starter template that is written in clean and simple code based on HTML5 and CSS and does not include any special libraries. You can rely on it to quickly and easily create the perfect WordPress template, which is the template used as the basis for developing default WordPress templates.
2.HTML5Blank
HTML5Blank provides you with an open source responsive starter template. It is based on clean and lightweight HTML5 and CSS3 codes. It is a neatly organized template that you can rely on to create a fast WordPress theme with improved performance.
This template also includes all the basic template files ready to use to develop your own template. It provides the advantage of using API for shortcode.
3.Scaffold
Scaffold is a lightweight, fast, and simple starter template. It doesn’t use any frameworks or libraries, is easy to customize, includes clean and fast code, is SEO compliant, and supports the WPML translation plugin .
4.UnderStrap
The UnderStrap template is an easy-to-customize starter template based on the Underscores template and the Bootstrap framework. It is responsive to mobile screens and supports wireframe layout and other features.
This template also provides support for Jetpack , WooCommerce , and Contact form7 .
5.WP Bootstrap Starter
The WP Bootstrap Starter template is a starter template for WordPress that is built on the Bootstrap framework . It includes Font Awesome fonts in the template, provides a blank page template template, a full-width page template, and templates that include a left and right sidebar, etc.
6.Sage
Sage is a WordPress starter theme based on the Bootstrap framework, Gulp, which automates SCSS file processing, and Bower, a utility for front-end developers.
It uses Theme Wrapper technology that helps you avoid repeating the same code in each theme by compiling the code into a single file that each layout will use.
This template is maintained and updated periodically by many professional WordPress front-end developers so you can rely on it to build your custom theme.
These were some of the popular starter templates and there are of course many other starter templates that you as a theme developer can rely on or you can create your own starter template to rely on in developing your themes.
Developing a WordPress template based on the Underscores starter template
In this paragraph, we will explain in practical steps how to use the famous underscores starter template, or known as the _S template for short, to understand how to develop an actual WordPress template based on the starter template.
The first thing we will do is create a WordPress starter template through the Underscores website and modify it to be our own template. To do this, go to the home page of the Underscores template , and enter in the text box the name of your template (I will call it here, for example, OlaTheme) and you can of course name it whatever you want.
You can optionally click the Advanced Options link to bring up a set of advanced options and enter your name, the name of your website, and a description of your theme.
You can also activate the WooCommerce boilerplate option to make the template support the addition of WooCommerce, and if you know the sass technology, you can also activate the _sassify option to include sass files in the structure of your template.
After you select all the options for the template you want to create, click the Generate button to create all the template files and download them as a zip file to your computer.
After downloading the template is complete, you must upload this compressed file to the themes folder located within the wp-content folder in the root folder of the site and unzip it there.
After decompressing, you will find that this folder includes the usual files for the WordPress template structure, such as the template files index.php, page.php, footer.php, header.php, archive.php, 404.php, etc., the template functions file functions.php , and files. The formats are style.css, style-rtl.css, and all other essential files that the theme needs to function properly.
As a template developer, you must be familiar with these files and know the role of each of them. For more, I recommend reading the following article: Learn about the basic structure of WordPress templates and their hierarchy .
Then you must open this folder with one of your preferred text editors so that you can edit all the files of this template and customize it as you want.
Before you make any modifications to the template code, let’s review the appearance of this template on the actual site. I will go to the control panel admin of my test site and choose Appearance > Templates . You will see, as shown in the following image, the OlaTheme template that you just created. Activate the template as usual by clicking on the Activate button .
Now if you browse the site, you will notice that the menus, articles, pages of the site and all its other elements appear to you, but they look very primitive and do not include any formatting or colors.
The first thing I’m going to do is add a special screenshot of the template. Here I have an image of my own that I will name screenshot.png and move it to the website template folder (in the same location as the style.css file)
note:
The WordPress template image dimensions should preferably be 1200 x 900 pixels or 880 x 660 pixels. It can be either PNG format if it is a simple image with limited colors, or JPG format if it is a complex image with lots of colors or a photograph.
Then I will edit the template files with a text editor such as (VSCode) so that I can edit all the files of this template and customize it as I want.
Now I will change the appearance of this primitive template by editing its files. You will notice in the template folder that there are two template formatting files, the first style.css for languages that go from left to right, and the second style-rtl.css for languages that go from right to left.
Since I am here to display my website in Arabic, I will currently only care about the file style-rtl.cs to add some CSS codes.
You can start by formatting the items on each page from top to bottom in the order they appear on the page (or in the order they are in the layout file).
For example, the main navigation menu items appear closely together on the site, so I will first format the menu items and put spaces between them. To do this, I need to examine the page and find out the menu item tag, ID, and class for this tag. As shown in the following picture
Then I have to adjust the formatting of this element. Here, for example, I will add a gray background color to it and make the elements spaced evenly apart, as follows:
The list now looks like this:
Now I will format the body element, which in the layout file has a margin property with a value of zero. For this reason, the website pages appear without margins around the four sides:
I will change this format and add margins of 50 pixels at the top and bottom and auto margins on the right and left to make the Body tag occupy the available horizontal space evenly and center the element. I will also adjust some other properties of the element as follows:
I will also add a light pink background color to the div element that contains all the page elements. In order to know the class of this element, I examine the page to find that this div has the entry-content class, as follows:
So I add the following code to the layout file to change the background color:
The page will appear after adding this code in the format file as follows:
The last modification I will make is to move the following widgets that appear in the footer of the page, and make them appear as a sidebar adjacent to the main contents of the page:
To do this, add the following code to the format files:
The site will now appear as follows:
Of course, the template still needs a lot of work to look professional, but I will suffice with that for the current article, and of course you have complete freedom to add the formats you want to your template. So feel free to add all the formatting you want to make your template look great and professional.
Conclusion
Developing a WordPress theme from scratch and starting with empty files takes time and effort, so a Starter Theme can help you as a WordPress developer get started by providing the basic structure of a WordPress theme with a simple or empty design that includes only the basic code to make the theme work.
Then you can shape and customize this template in any way you want, add your own design touches, and expand the functionality according to your site’s requirements to create a completely new template with great flexibility and within a short period of time.
