Develop a WordPress Theme, 2021 -part 1, environment


This series will show you how to build a WordPress theme from scratch. It uses Laragon to create a local Apache server and the Visual Studio Code text editor.

Developing on a local machine is a lot faster and more convenient than using a live server. Laragon makes this simple. It creates a local server that will install WordPress in a few clicks.


Installing Laragon

1/ Go to the Laragon site and click on download . you will redirected to Sourceforge. Download the .exe file and click on it. Check auto virtual hosts this will create a pretty URL to make it easier to find the site in your browser.

2/ Right click on the app and select Quick app>Wordpress

3/ Next, type in a name for the project, in this case portfolio, and click on OK

The site will be created with a matching pretty URL. The image shows another project being setup.

Project directory

The Laragon installer creates a folder named Laragon on the C drive. In this folder another folder named WWW is the web root folder. This folder contains any WordPress projects created by the Laragon installer, as detailed above.

Go to the URL of the site you created, usually http://yoursitenane.test, in a browser and the WordPress setup page will be displayed.

Go through the setup process for WordPress. Notice that the database has already been setup by Laragon.

Once installed type the name of the project you created earlier into the browser, and you should see the home page. http://portfolio.test.

Clean up the install and set the Home page

1/ Go to Settings>general and delete the just another WordPress site text, also set you time zone and language.

2/ Go to the pages section and delete any pages that are present. Also go to Posts and delete the Hello world post.

3/ Go to Settings>permalinks and set them to post name this makes the links SEO friendly.

4/ Go to the plugins section and search for Dummy text. Install the plugin by Naeem Ahmed Opu.

5/ Create a new page and name it Home. If the page editor opens in full screen mode click on the three dots icon at the top right corner and uncheck full screen mode.

Create a heading and use the shortcode [dummy-text], in a paragraph block, to create some dummy text for the page

6/Go to Settings>Reading and set the home page to the home page you just created. Click on save settings at the bottom of the page.

Your home page should now look as below.

That completes the initial setup. In part two we look at the structure of a theme.

Leave a Reply

Your email address will not be published. Required fields are marked *