In this article will discover about WordPress custom theme and also our own custom theme from scratch but before that will give some basic information about WordPress and it’s theme.
WordPress Theme Basic :
WordPress theme is a collection of PHP files that works together to produce a graphical interface. This files called as Template files. Themes live in a folder inside the
/wp-content/themes/ directory in your WordPress installation.
All you need to start is a website or blog. You don’t need to know any PHP or have any experience with WordPress. Your website can be custom, or built on any other framework.
You do need to know how to set up a local environment or you can say create virtual host. Fortunately, if you don’t know how , please look into THIS about getting setup with one. It will take only few minutes, so go ahead and do that first.
What is WordPress ?
WordPress was originally built as a blogging platform, but is now what is known as a CMS– Content Management System.
Any website that you intend to make updates to can benefit from a CMS. If Someone is paying you to make a website, it’s because they don’t know how or don’t have time to deal with code. It needs to be as simple as possible for the client. WordPress can help with all this and more.
Creating theme and all the stuff is very hug thing so what i am gonna do, I am going to dived this whole thing into 3 parts. So you can simply follow the steps and do some practise with it.
Step 1: Install WordPress
There are so many articles out there about how to install WordPress but you can simply follow THIS article. In this article i have write some simple steps to install WordPress on Ubuntu 16.04.
Step 2: Creating Your Custom Theme
Let me tell you something before we create our custom theme almost everything we do in WordPress will be in wp-content folder, everything else is core code and we don’t need to mess with that core code.
In the wp-content you can find the theme folder, in the theme folder you can find WordPress default themes – twentyseventeen, twentyfsixteen, twentyfifteen – and index.php file.
Create a new directory for your theme; I called mine programmingschool
A theme needs only two files to exist – style.css and index.php
You can download sample file by clicking ProgrammingSchool
In your theme folder, create one file as style.css. style.css file simply contains a comment that alert WordPress that a our theme exists here.
You can simply copy this below code and paste it into your style.css file. Change name, author, description and so on.
Theme Name: ProgrammingSchool
Author: Chirag Patel
Description: A complete WordPress blog theme
For index.php file, You can simply copy index.html file from source code and paste it to our theme directory and change name to index.php.
Your theme has now been created. You can check on WordPress by going Appearance > Theme.
You will seethe theme in the collection with all the default theme.
Active our theme and now go back to your site url. yes is that simple. we have technically created our custom theme already. Yes, it does not do anything yet.
But i think there is one thing we need to care about – blog.css is not being loaded. Bootstrap’s file are loading via CDN but our local file is not loading, WHY ?
Our local URL may be programmingschool.io, but files are pulling from our theme folder. if we link to blog.css <link href=”blog.css”> it tries to load from our theme folder, which does not exist.
Don’t worry it is quiet simple, open index.php file and you can find below code at the top
<link href="blog.css" rel="stylesheet">
We just need to tell WordPress to dynamically link to the theme folder. Replace that code with below code.
<link href="<?php echo get_bloginfo('template_directory'); ?>/blog.css" rel="stylesheet">
If we reload our page will see that our Js and css files are now loading properly.
If it is not loading in, press clt+R or clt+f5 for hard refresh.
Note that this is not the most correct way to load scripts into your site but It’s the easiest to understand and it works.
This is it for this blog post next part will see in out next part, till then keep experimenting and do practice.