Naming Your WordPress Theme<\/h2>\n
First things first, we have to give your theme a unique name, which isn\u2019t necessary if you\u2019re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation.<\/p>\n
General assumptions at this point:<\/strong><\/p>\n Let\u2019s 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<\/strong> in your theme folder. Add the following information at the very top of the newly-created style.css<\/strong>:<\/p>\n This tutorial further assumes you have your HTML template arranged left to right: header, content, sidebar, footer. If you have a different design, you might need to play with the code a bit. It\u2019s fun and super easy.<\/strong><\/p>\n 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\u2019t expect them to do anything. For illustration purposes, I am using the following index.html and CSS stylesheet files:<\/p>\n INDEX.HTML <\/p>\n <\/p>\n CSS STYLESHEET<\/strong><\/p>\n You can grab both codes if you have nothing to work with. Just copy-paste them into your code editor, save them, create the four PHP files we just mentioned and get ready for the next part. Open your newly-created (and empty)header.php<\/strong>. Login into your existing WordPress installation, navigate to Appearance \u2013>> Editor <\/strong>and openheader.php<\/strong>. Copy all the code between the <head> tags and paste it into your header.php file. The following is the code I got from the header.php file in Twenty Fourteen theme:<\/p>\n Then open your index.html<\/strong> file and copy the header code (i.e. the code in the <div class= \u201cheader\u201d> section) to your header.php just below the <head> tags as shown below:<\/p>\n Then add\u2026<\/p>\n <\/p>\n Your HTML template is about to morph into a WordPress theme. We just need to add your posts. If you have posts on your blog, how would you display them in your custom-made \u201cHTML-to-WordPress\u201d theme? You use a special type of PHP function known as the Loop<\/strong>. The Loop is just a specialized piece of code that displays your posts and comments wherever you place it.<\/p>\n source : http:\/\/www.wpexplorer.com\/create-wordpress-theme-html-1\/<\/p>\n\n
![\":)\"](\"http:\/\/www.wpexplorer.com\/wp-content\/themes\/wpexplorer-twenty-fourteen\/images\/smileys\/icon_smile.gif\"){kind=icon}
<\/li>\n<\/ul>\n\/*Theme Name: Your theme's name\nTheme URI: Your theme's URL\nDescription: A brief description of your theme\nVersion: 1.0 or any other version you want\nAuthor: Your name or WordPress.org's username\nAuthor URI: Your web address\nTags: Tags to locate your theme in the WordPress theme repository\n*\/<\/pre>\n<\/div>\n
Breaking Up Your HTML Template into PHP Files<\/h2>\n
\n<\/strong><\/p>\n<!DOCTYPE html>\n<head>\n\t\t<meta charset=\"UTF-8\">\n\t\t<title>How To Convert HTML Template to WordPress Theme - WPExplorer<\/title>\n\t\t<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\"\/>\n\t<\/head>\n\t<body>\n\t\t<div id=\"wrap\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<p>This is header section. Put your logo and other details here.<\/p>\n\t\t\t<\/header><!-- .header -->\n\t\t\t<div class=\"content\">\n\t\t\t\t<p>This is the main content area.<\/p>\n\t\t\t<\/div><!-- .content -->\n\t\t\t<div class=\"sidebar\">\n\t\t\t\t<p>This is the side bar<\/p>\n\t\t\t<\/div><!-- .sidebar -->\n\t\t\t<footer class=\"footer\">\n\t\t\t\t<p>And this is the footer.<\/p>\n\t\t\t<\/footer><!-- .footer -->\n\t\t<\/div><!-- #wrap -->\n\t<\/body>\n<\/html><\/pre>\n
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}\n.header{width:99.8%; border:1px solid #999;height:135px;}\n.content{width:70%; border:1px solid #999;margin-top:5px;}\n.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}\n.footer{width:99.8%;border:1px solid #999;margin-top:10px;}<\/pre>\n<\/div>\n<head>\n\t<meta charset=\"<?php bloginfo( 'charset' ); ?>\">\n\t<meta name=\"viewport\" content=\"width=device-width\">\n\t<title><?php wp_title( '|', true, 'right' ); ?><\/title>\n\t<link rel=\"profile\" href=\"http:\/\/gmpg.org\/xfn\/11\">\n\t<link rel=\"pingback\" href=\"<?php bloginfo( 'pingback_url' ); ?>\">\n\t<!--[if lt IE 9]>\n\t<script src=\"<?php echo get_template_directory_uri(); ?>\/js\/html5.js\"><\/script>\n\t<![endif]-->\n\t<?php wp_head(); ?>\n<\/head><\/pre>\n<\/div>\n
<html>\n\t<head>\n\t\t<meta charset=\"<?php bloginfo( 'charset' ); ?>\">\n\t\t<meta name=\"viewport\" content=\"width=device-width\">\n\t\t<title><?php wp_title( '|', true, 'right' ); ?><\/title>\n\t\t<link rel=\"profile\" href=\"http:\/\/gmpg.org\/xfn\/11\">\n\t\t<link rel=\"pingback\" href=\"<?php bloginfo( 'pingback_url' ); ?>\">\n\t\t<link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text\/css\" \/>\n\t\t<!--[if lt IE 9]>\n\t\t<script src=\"<?php echo get_template_directory_uri(); ?>\/js\/html5.js\"><\/script>\n\t\t<![endif]-->\n\t\t<?php wp_head(); ?>\n\t<\/head>\n\t<body>\n\t\t<header class=\"header\">\n\t\t<p>This is header section. Put your logo and other details here.<\/p>\n\t<\/header><\/pre>\n<\/div>\n<link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text\/css\" \/><\/pre>\n<\/div>\nAdding Posts<\/h2>\n
<\/span>This Demo Content Brought to you by Momizat Team<\/a> <\/blockquote>\n
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates<\/h2>\n\n\n
Review Overview<\/h2>\n
\n\t\t