Hello everybody, I am writing the following post from my client on Code giant with some modification. For more coding related article, you can visit their website.
Okay, to build an WordPress theme, you need to have great knowledge about HTML and CSS. A knowledge of JavaScript and jQuery will be huge advantage. Plus you need to know basic PHP and MySQL querying.
Now at this point, I believe you know all the things mentioned above. We are going to jump into the development now.
To Make a theme you need to make a folder with the name of that theme (Better to have exact name as the theme name). Make sure the name is one word. If not, we have to use the “-” in between words. Then, inside that folder we need to have at least following files in order to make it work as an WordPress theme.
- An index.php file
- style.css
That’s it. Technically it will work as WordPress theme. But making a real life WordPress theme is not that easy. In fact we need to create more files and split the code into them for various sections. The common files contain in a modern standard themes are:
- index.php
- style.css
- header.php
- footer.php
- functions.php
- archive.php
But before digging inside the header.php file I would like you to know the basic information to set up a design as WordPress theme.
In your style.css, you need to have the following lines to work it as an WordPress theme.
/*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 */
Above written lines must reside at the very top of the style.css file. This indicates the name of the theme, URI, a short theme description, version of the theme, Author(s) Name, Author URI and Theme tags. Please remember that you need to keep the comments for this theme to work.
For Reference as the full page design, we will be using the following code:
<!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>
Okay now the header.php:
We normally create the full webpage design in one document like index.html / home.html etc. But in WordPress, we split the code that is repetitive for all pages and used for navigation and common linking of various files into the <head> section of a webpage. This files are stylesheets, script file etc.
A typical header portion code will be something like the following:
<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>
Then we need to put the code of the repetitive portion of the body section into the header.
That code will be something like the following:
<body> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header>
So the final header.php will be something like the following code:
<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>
Still the theme won’t work because we haven’t finished creating all the files necessary plus the main file that will call all the files like header.php, footer.php etc. That file is the index.php. But as this is a series in next tutorial we will be discussing about the style.css file.
Until next tutorial , I am Mizanur Rahaman Mizan, saying you good bye. Please feel free to leave any comment below. Thanks!