I hope you are well. Today I will share with you, how to do WordPress theme development. You need to know PHP to do their development. If you don’t know PHP, then you need to PHP first, then you can understand by reading this tutorial. 

The Software our need:

The code editor is Software that writes code. We use different code editors to suit our different needs. For example, Note pad ++, Atom, Sublime Text, etc. I will write code with Sublime Text in this tutorial.

You can use any code editor. First, we need to search google for Sublime Text or you can click Sublime Text. Then a page will show when we click on download or visit sublimetext.com.

 You can download for Windows, Mac, Linux cross-platform. We have to download according to each need. My windows so I downloaded it by clicking on Windows. You can download portables if you wish. For those who have no idea about portable, portable halls can be used by extracting them in a pen drive or memory without installing them. 

XAMPP:

Those who have learned PHP have an idea about or local server to convert the computer to a local server. We need to use the Xampp server. 

Those who have not to downloaded can go to be installed in the same way as other software. And if have portables, you can watch this video.

WordPress CMS Download:

CMS is a content management system. This allows you to control your backend. Suppose you have a library. When the book you need or buyers want to didn’t have a bookshelf, it would be very different to find the book, if your books were in sacks or piles of books. 

Similarly, CMS is tidy which helps us to create a website in a very short time.

Let’s download WordPress, go to wordpress.org/download download. Then click on download WordPress 5.8. I’m showing 5.8 here now maybe you can show more when you read this tutorial.

Now we need to open XAMPP and open apache and MySql server or click on the start button. Click on explorer as show top. We need to go to a folder called Ttdocs, then we need to create a folder. I created a folder called project blog.

I will put my WordPress files in this folder. Previously we download WordPress. I ZIP that WordPress and paste it into the blog project folder.

 Extract the ZIP file to be pasted. After extracting, if all the files are inside the folder called  WordPress, then you

 Have to bring it out.

Explorer > htdoces > project > Wp-content > theme

We need to enter according to the location above. We need to go to the theme folder and create a folder. I will name the folder with the name of the Octopus blog. It will take three files inside-

  1. Index.php
  2. Style.css
  3. Screenshot.png

Index.php

Index.php is the start of the WordPress home page. Header, footer, sidebar are added to it. The index page includes the header and footer parts. Index page some coding need, 

123456<?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>

Style.css

The style CSS file reveals the name of the theme, the invention, who created the foundation, etc. 

Screenshot:

This is a demo of the theme screenshot.png. It helps make for professional and lightweight. Theme thumbnail helps theme design and name. It’s our make theme premium quality. 

Database: Inside xampp, we can see MySQL. Let’s click inside admin. Then we will enter the MySQL data server. 

Click on new and then enter the database name to create. I named my database Octopus Blog you can give anything. Now to access the local server, I created a folder called project Blog inside my htdoces entering under that name. I am entering localhost/project-blog and entering the URL bar. Then, we see a page of information needed, as the image blew.

File in the username, password, title, email, information and click on install WordPress. If you want to keep the door of the search engine locked then you can install it.

Explorer > Project > wp-content > Theme > Octopus > Blog

Know the location given above. Then header PHP, Folder PHP creates these two files. Open the index.php file that you created in the code editor. I have created the style.css file before, I have to open it. Now we need to go to the official web page of WordPress visit www.codex.wordpress.org.After scrolling down, write the code in the theme stylesheet.

1234567890 /*Theme Name: Octopus-blogTheme URI: https://wordpress.org/themes/Octopus-blog/Author: Ibrahim KhanAuthor URI: https://wordpress.org/Description: This theme name is Octopus-blog. It has a blog theme. Version: 1.0Requires at least: 5.0Tested up to: 5.4Requires PHP: 7.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlText Domain: Octopus-blog*/

Write down the codes above. Actually, it is for beginners, so I can not present the details here. Let me just say two things about the theme name text-domain. The theme name is the name of the theme. And the various functions of the theme are performed by the text-domain. I will just change these two things and I’ll keep rest.  

One thought on “Xampp and code editor – WordPress theme development tutorial

Leave a Reply

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