WordPress Theme development Tutorial-1 |
X

Congrats, You are Subscribed to Receive Updates.

WordPress Theme development Tutorial-1


Hi,

I hope you are here to learn WordPress theme development. Stay with me and read with passions you can get more skills to start making your own theme. Let’s start from the basics of files and necessary things.

You need basic php, HTML and CSS skilss to write your own codes. I hope you can do much more  so  lets move to the necessary files.  Which are,

  • index.php
  • style.css
  • functions.php
  • screenshots.png

These are all necessary files to understand the WordPress that you are writing a new theme.  We need  additional files  we will discuss it slowly when It requires in the middle.  If we see the lists of files we feel  little fussy and  got bored.  So lets check with basic files.

wordpress-theme-development

Now,  just open your  newly created style.css and add the following comment line codes which will help yoyr WordPress to understand your theme details. Dont write much just add few things thats enough.

/*
Theme Name: Kvcodes
Theme URI: https://kvcodes.com/wp/theme/wordpress-theme-development
Author: Kvvaradha  admin of kvcodes
Author URI: https://www.kvcodes.com
Description: My first theme development tutorial theme
Version: 1.0
*/

Here just replace with your desired things. Which will help you to get some interest on theme development. Right next we gonna work with index.php and functions.php.

Just add some empty php tag there. Thats enough to activate a theme.

Than add a good looking image Which is bigger than 300×225. And not much bigger.

Than move to your WordPress backend. Example if your site is http://localhost/kvcodes/ just add the “wp-admin” at the end. It will take you to login page. Than login there. And move to Appearance-> Themes

Here you can see your awesome image and theme details Which you entered on style.css and activate it. Your theme is ready now. If you goto front end. You can see a blank page there.

Now come to index.php and add the following codes.

get_header();
get_sidebar();
get_footer();

And save it than move to front-end and refresh it. You can see some texts and contents there. Its WordPress front end contents. Now we need to beautify it by adding some CSS.  Our Next part we will look at a html template and how to convert it to WordPress theme. Rather than creating a new theme, we can easy to convert a HTML page to Our WordPress theme.  Also which will reduce your working time.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

Comment Below

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

*

Current ye@r *

Menu

Sidebar