WordPress themes is the most used and popular blogging platform around the web. Its flexibility, usability and customizability are the main reasons people regard WordPress so high. Another reason is the huge array of themes available for WordPress – you can create almost anything, from online magazines to advanced e-commerce businesses. wordpress themes You can either get themes for free or pay for them. Of course, you get what you pay for — yet don’t be too eager to spend your money on something you might not even need. If you’re just starting out with WordPress I suggest reading Choosing a WordPress Theme: Free or Premium? After that you might consider whether you really want to pay for that premium theme. wordpress themes If the answer is no, continue reading and check out these 80 professional, beautiful and free WordPress themes from 2012 — the best free themes that can be found!
If you started with an HTML ( + CSS) website, you don’t have to throw it all away when moving to WordPress. You can convert your HTML into WordPress and run your (now more powerful) website on the dynamic WordPress platform.
Or maybe that’s not the case. Perhaps you are just wondering how to convert a client’s HTML design into a fully-fledged WordPress theme. Or maybe you would like to learn basic WordPress (+ PHP) programming from the more-familiar HTML side.
Whatever the reason you are here today, this WordPress tutorial will introduce you to the basics of creating a WordPress theme from HTML. So, get a code editor (I use and recommend Notepad++, and SublimeText is another great option) and a browser ready, then follow this simple guide to the end.
Naming Your WordPress Theme
First things first, 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.
General assumptions at this point:
- You have your index.html and CSS stylesheet ready. If you don’t have these files, you can download mine for illustration purposes
- You have a working WordPress installation with at least one theme e.g. Twenty Fourteen
- You have already created a theme folder where you’ll be saving your new WordPress theme
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 */
Breaking Up Your HTML Template into PHP Files
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’s fun and super easy.
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:
INDEX.HTML
<!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>
CSS STYLESHEET
#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;}
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. Login into your existing WordPress installation, navigate to Appearance –>> Editor and openheader.php. 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:
<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 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>
Then add…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
Adding Posts
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 “HTML-to-WordPress” theme? You use a special type of PHP function known as the Loop. The Loop is just a specialized piece of code that displays your posts and comments wherever you place it.
source : http://www.wpexplorer.com/create-wordpress-theme-html-1/
This Demo Content Brought to you by Momizat Team
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates
Review Overview
Summary:
I’m getting used to the core tenets of iOS 7. I still don’t like the slow animations or the often-needless representations of layers and transparency, but I’ve come to understand the OS for what it is. As we discovered with the iPad Air, though, iOS 7 isn’t finished or polished.Summary:
I’m getting used to the core tenets of iOS 7. I still don’t like the slow animations or the often-needless representations of layers and transparency, but I’ve come to understand the OS for what it is. As we discovered with the iPad Air, though, iOS 7 isn’t finished or polished.
WordPress themes
A while ago, we introduced to you the concept of creating a WordPress theme from HTML. We split the tutorial into two parts, and you can check out the first installation here and the second here. Today we are all about fleshing out the two tutorials, so feel free to regard this post as the third serving in the post series. My objective is to take apart the WordPress theme to give you a clear picture of how it (the theme) works.
This post assumes you have a working knowledge of HTML and CSS. I will go ahead and declare that having HTML and CSS skills is a prerequisite in designing WordPress themes. One more thing, this post will stay clear of big words and difficult concepts – it will be easy to comprehend, so be ready to have fun and learn.
A Little HTML Priming
Every HTML web page is split into different parts using the <div> tag. For instance, you can break the body (<body>) of your website into several sections such as navigation, header, main content, sidebar and footer amongst others.
Once you have your web page in sections, you can order (or arrange) the sections as you wish using CSS. This process is known as styling, and it involves adding other style elements such as color, size, borders, special effects etc. Such is the power of CSS, which – by the way – is short for Cascading Style Sheets. When you put your HTMl and CSS files together and throw in a couple of images, you end up with a complete website.
Things are not very different with WordPress themes. As we saw in part 1 of How To Create A WordPress Theme from HTML, WordPress themes are split into different files. If you cannot spot some similarity at this point, allow me to explain.
Static HTML web pages are split into divisions (what we called sections earlier on) using <div> tags (or tables if you’re really old school). On the other hand, WordPress themes are split into different php files, which are then put back together using template tags.
Therefore, instead of having all body elements (header, main content, sidebar, footer etc) living in a single file (as is the case with static HTML), each of the body elements (in WordPress themes) lives in a separate files.
So, the header will live in header.php, the sidebar will find home in sidebar.php, the main content will live in index.php, or single.php (if it’s a post) or page.php (if it’s a page). The footer section will live in footer.php and so on.
Are you following? Check out the illustration below:
Proin tristique elit et augue varius pellentesque. Donec enim neque, vulputate et commodo in, tristique sed velit. Phasellus adipiscing faucibus felis eget hendrerit. Vestibulum aliquet mauris sed felis convallis, sed tempus augue malesuada. Vivamus mauris lorem, laoreet sed suscipit nec, dapibus at elit. In in augue lobortis, eleifend tortor et, varius eros. Vivamus dignissim sed justo vitae suscipit. Mauris mi sem, malesuada sed sapien ut, sagittis condimentum urna. Nullam lacus mi, vulputate sed sollicitudin in, semper ut elit. Phasellus nec est at leo euismod placerat a porttitor est. Curabitur vel varius nunc, nec tincidunt magna. Proin eros mauris, lobortis id quam non, euismod fringilla nulla. Fusce vel nisi et turpis tempor molestie sit amet a dolor.
THEMATIC (CHILD) THEMES
Thematic uses Child Themes, these are essentially stripped down versions of a full WP theme, that needs the Thematic Framework for functionality. Upon download, Thematic comes packaged with a basic child theme, but you can download many more from the Thematic homepage. Download Thematic Child Themes.
Below, you will find a small selection of themes available for Thematic.
This Demo Content Brought to you by Momizat Team
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates
WordPress Themes Development Frameworks
If you build and develop WordPress themes often, you will probably be fed up of all the repetitive code writing, the constantly checking of your mark-up and all you really want to do is focus on the design and the project-specific features. The answer is a WordPress development framework. A framework is designed to speed up the process of designing and coding a WordPress theme by minimizing your time, and balancing your patience, on WordPress’ back-end code that is repeated within every theme.
This post is not about finding the best framework, it is about finding the right framework that works for you. If you are an experienced developer then you will probably go for the powerful and feature rich Thematic or Carrington, or if you are a novice, you could try the Whiteboard framework or , even easier, download a stripped out and bare bones blank canvas theme, which you will find at the bottom of the post.
Which would you use?
Thematic – WP Framework
Thematic is a highly polished WordPress Theme Framework that is built upon the 960.gs. At first glance, its backend may look daunting and complex, but you will soon realise just how well organised it is and easy to use. Its power is based upon its flexibility and its simple customisation, you would be very hard pushed to find a project you couldn’t use the Thematic WP Framework for.
- Thematic Homepage.
- View Thematic Demo.
- Download Thematic WP Framework.
- Thematic Support Forums.
- Thematic Customisation Guide.
THEMATIC FEATURES
- Optional 2 or 3 column layouts.
- Up to 13 widget ready areas.
- Modular CSS with pre-packaged resets and basic typography.
- Fully Search-Engine Optimized.
- Can be used as it is, or as a blank WordPress theme.
- Dynamic post and body classes make it a hyper-canvas for CSS artists.
- Options for multi-author blogs.
- Great support available from the customisation guide and forums.
- Child Themes are available for upgrading the theme.
THEMATIC (CHILD) THEMES
Thematic uses Child Themes, these are essentially stripped down versions of a full WP theme, that needs the Thematic Framework for functionality. Upon download, Thematic comes packaged with a basic child theme, but you can download many more from the Thematic homepage. Download Thematic Child Themes.
This Demo Content Brought to you by Momizat Team
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates
Recent Comments