Hello Friends,
Today i bought a new tutorial for the beginners who want to learn how we can install a custom theme in Wordpress. First of All i have download a new theme name business from the online website.
To install a new custom theme in wordpress you need two things one is the html template and the other is the css file. don't take pressure on your brain i am going to tell you how you can install the theme into the wordpress.Now as you now i have downloaded the html wordpress theme you can easily find on the google through searching. Now i am going to tell you how you can install a new theme in the wordpress go to the theme Folder of the wordpress as shown in the screenshort given below..
The above screenshort is the Wordpress folder structure and in this you have to go into the folder name wp-content inside wp-content you can find the folder with the theme name business in the theme folder and inside this you can paste your business theme folder as shown below.
As you seen above in the screenshort there is a folder name Business given there this is the folder of our custome theme as you see in the url the url is something like this wpproject -> wp-content -> themes -> business.
Now when you click on the business folder you can find the html file but for your need i have converted into the index.php as shown in the screenshort given below.
Inside the business folder you can find the files related to this. as when you downloaded the theme from the online website you can find the all the files related to the theme.To activate the theme in the wordpress you want to tell the wordpress about your theme.Now the question is how you can tell this to wordpress For this you have to take two important steps one step will be to change the index.html file which your theme folder contain change it to index.php and second one is to make a blank file and name it as style.css . The second file which you have created named style.css is very important as without css file your theme is not visible in the admin section of theme as shown below.
Now let's i am going to tell you what the problem if you cannot create the css file name sttyle.css file in youe theme folder as shown below.
To show you what the problem we face if we cannot create the css file i have deleted the style.css file from our theme folder now when you login to the admin panel in wordpress and go to the theme section you can find the a error message with a name Broken Theme if you cannot create css file.
Now I think you can get your answer. Now again i have created the file name style.css file you can find you theme as shown below in the screenshort given below.
When you add the style.css file you can find your theme as shown in the screenshot given above. and after this you can click on theme and activate it as shown below.
The above is the screen short of the Demo Theme which i am using in the wordpress as a custom theme template. But when we access our theme on wordpress on the wp-project we find put theme looking like this as shown in the screenshot given below.
The above is the screenshort see on the home page when we activate our theme the problem here is that the theme is not able to load the css which the theme is using as it is not getting the url of the css which it is loading so now to solve this problem we open the index.php page which is looking like this as shown below.
Now as you see the screenshort above the url before the assets folder is not give as we have change the name of the file and also the path of the theme we are using. Now suppose we take the first line of css as shown in the screenshort above.
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
This is the core css of the Bootstarp and it is not loading when we seen on the home page now we can add a new line of code before assets as shown below.
change the css path as shown below
<link href="<?php echo bloginfo
('template_url');?>/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
As you can seen we have use a piece of code that is bloginfo('template_url') function . This is a function in wordpress which return the path where your template is installed Now you can add this line on all the css as well as js file after adding the path refresh your page and reload the page you can find the Home page of the template like this as shown below.
I hope you like the post i try to bring more tutorials post based on Wordpress for Beginners.
Today i bought a new tutorial for the beginners who want to learn how we can install a custom theme in Wordpress. First of All i have download a new theme name business from the online website.
To install a new custom theme in wordpress you need two things one is the html template and the other is the css file. don't take pressure on your brain i am going to tell you how you can install the theme into the wordpress.Now as you now i have downloaded the html wordpress theme you can easily find on the google through searching. Now i am going to tell you how you can install a new theme in the wordpress go to the theme Folder of the wordpress as shown in the screenshort given below..
The above screenshort is the Wordpress folder structure and in this you have to go into the folder name wp-content inside wp-content you can find the folder with the theme name business in the theme folder and inside this you can paste your business theme folder as shown below.
As you seen above in the screenshort there is a folder name Business given there this is the folder of our custome theme as you see in the url the url is something like this wpproject -> wp-content -> themes -> business.
Now when you click on the business folder you can find the html file but for your need i have converted into the index.php as shown in the screenshort given below.
Inside the business folder you can find the files related to this. as when you downloaded the theme from the online website you can find the all the files related to the theme.To activate the theme in the wordpress you want to tell the wordpress about your theme.Now the question is how you can tell this to wordpress For this you have to take two important steps one step will be to change the index.html file which your theme folder contain change it to index.php and second one is to make a blank file and name it as style.css . The second file which you have created named style.css is very important as without css file your theme is not visible in the admin section of theme as shown below.
Now let's i am going to tell you what the problem if you cannot create the css file name sttyle.css file in youe theme folder as shown below.
To show you what the problem we face if we cannot create the css file i have deleted the style.css file from our theme folder now when you login to the admin panel in wordpress and go to the theme section you can find the a error message with a name Broken Theme if you cannot create css file.
Now I think you can get your answer. Now again i have created the file name style.css file you can find you theme as shown below in the screenshort given below.
When you add the style.css file you can find your theme as shown in the screenshot given above. and after this you can click on theme and activate it as shown below.
Now as shown above this is how you can activate your theme . Now our Demo theme which we are using is looking like this as shown below.
The above is the screen short of the Demo Theme which i am using in the wordpress as a custom theme template. But when we access our theme on wordpress on the wp-project we find put theme looking like this as shown in the screenshot given below.
The above is the screenshort see on the home page when we activate our theme the problem here is that the theme is not able to load the css which the theme is using as it is not getting the url of the css which it is loading so now to solve this problem we open the index.php page which is looking like this as shown below.
Now as you see the screenshort above the url before the assets folder is not give as we have change the name of the file and also the path of the theme we are using. Now suppose we take the first line of css as shown in the screenshort above.
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
This is the core css of the Bootstarp and it is not loading when we seen on the home page now we can add a new line of code before assets as shown below.
change the css path as shown below
<link href="<?php echo bloginfo
('template_url');?>/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
As you can seen we have use a piece of code that is bloginfo('template_url') function . This is a function in wordpress which return the path where your template is installed Now you can add this line on all the css as well as js file after adding the path refresh your page and reload the page you can find the Home page of the template like this as shown below.
I hope you like the post i try to bring more tutorials post based on Wordpress for Beginners.
