You know HTML, CSS, and JavaScript. You can make beautiful websites. Maybe you’ve heard about WordPress. WordPress is an online, open source website creation tool written in PHP. But in non-geek speak, it's probably the easiest and most powerful blogging and website content management system (or CMS) in existence today. Maybe a client asked for WordPress, but you’re not really familiar with it. Maybe you’ve worked with it before, but don’t know how to make your own theme from scratch. Whatever the case, this article is for you.
All you need to start is a website. Any website will do. You don’t need to know any PHP, or have any prior experience with WordPress. Your website can be custom, or built on Bootstrap/some other framework. Or WordPress Development Company can help you in doing so.
More than 25% of all the websites in the world use WordPress as a CMS. So it will be easy for you to develop your website from Wordpress.
Here you will find a article to create your custom WordPress Theme from scratch:
First of all we have to give your theme a unique name, which isn’t necessary if you’re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation. Then you will have your index.html and style.css ready.
Let’s get back to naming your WordPress theme. Open your code editor and copy-paste the contents of your stylesheet into a new file and save it as style.css in your theme folder. Add the following information at the very top of the newly-created style.css:
/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/
Do not leave out the (/*…*/) comment tags. Save the changes. This info tells WordPress the name of your theme, the author and complimentary stuff like that. The important part is the theme’s name, which allows you to choose and activate your theme via the WP dashboard.
Now the next step involves creating four PHP files. Using your code editor, create index.php, header.php, sidebar.php and footer.php, and save them in your theme folder. All the files are empty at this point, so don’t expect them to do anything. For illustration purposes, I am using the following index.html and CSS stylesheet files:
Your previous index.html file will look like this:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!-- .header -->
<div class="content">
<p>This is the main content area.</p>
</div><!-- .content -->
<div class="sidebar">
<p>This is the side bar</p>
</div><!-- .sidebar -->
<footer class="footer">
<p>And this is the footer.</p>
</footer><!-- .footer -->
</div><!-- #wrap -->
</body>
</html>
And your style.css file:
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
Now you don’t have to do anything just take the code paste it into the code editor. Now open your newly-created (and empty) header.php. Login into your existing WordPress installation, navigate to Appearance –>> Editor and open header.php. Copy all the code between the <head> tags and paste it into your header.php file. The following is the code you will get from the header.php file in Twenty Fourteen theme:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
Now open your index.html file and copy the header code (i.e. the code in the <div class= “header”> section) to your header.php just below the <head> tags as shown below:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header>
Now copy the second section (i.e. <div class=”content”>…</div> from index.html to the newly-created index.php , and add this code at very top
<?php get_header(); ?>
And
<?php get_sidebar(); ?>
<?php get_footer(); ?>
At the bottom side.
That was easy, right? You can style your theme however you want but most of the features we love in WordPress are still inactive since…this article covers the basics of converting HTML templates into WordPress and should be of great value to you as a beginner.
All you need to start is a website. Any website will do. You don’t need to know any PHP, or have any prior experience with WordPress. Your website can be custom, or built on Bootstrap/some other framework. Or WordPress Development Company can help you in doing so.
More than 25% of all the websites in the world use WordPress as a CMS. So it will be easy for you to develop your website from Wordpress.
Here you will find a article to create your custom WordPress Theme from scratch:
First of all we have to give your theme a unique name, which isn’t necessary if you’re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation. Then you will have your index.html and style.css ready.
Let’s get back to naming your WordPress theme. Open your code editor and copy-paste the contents of your stylesheet into a new file and save it as style.css in your theme folder. Add the following information at the very top of the newly-created style.css:
/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/
Do not leave out the (/*…*/) comment tags. Save the changes. This info tells WordPress the name of your theme, the author and complimentary stuff like that. The important part is the theme’s name, which allows you to choose and activate your theme via the WP dashboard.
Now the next step involves creating four PHP files. Using your code editor, create index.php, header.php, sidebar.php and footer.php, and save them in your theme folder. All the files are empty at this point, so don’t expect them to do anything. For illustration purposes, I am using the following index.html and CSS stylesheet files:
Your previous index.html file will look like this:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!-- .header -->
<div class="content">
<p>This is the main content area.</p>
</div><!-- .content -->
<div class="sidebar">
<p>This is the side bar</p>
</div><!-- .sidebar -->
<footer class="footer">
<p>And this is the footer.</p>
</footer><!-- .footer -->
</div><!-- #wrap -->
</body>
</html>
And your style.css file:
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
Now you don’t have to do anything just take the code paste it into the code editor. Now open your newly-created (and empty) header.php. Login into your existing WordPress installation, navigate to Appearance –>> Editor and open header.php. Copy all the code between the <head> tags and paste it into your header.php file. The following is the code you will get from the header.php file in Twenty Fourteen theme:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
Now open your index.html file and copy the header code (i.e. the code in the <div class= “header”> section) to your header.php just below the <head> tags as shown below:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header>
Now copy the second section (i.e. <div class=”content”>…</div> from index.html to the newly-created index.php , and add this code at very top
<?php get_header(); ?>
And
<?php get_sidebar(); ?>
<?php get_footer(); ?>
At the bottom side.
That was easy, right? You can style your theme however you want but most of the features we love in WordPress are still inactive since…this article covers the basics of converting HTML templates into WordPress and should be of great value to you as a beginner.
