After created the most base theme,
(If you missed that, you can visit this
link to view )
Let move to making the interface:
=============================================
There are around 4 parts within a wordpress
theme, they are header, content, sidebar and footer part.
At usual, header
part is for showing the “HTML head Elements”, your site logo and site
description, and also the menu bar,
Content is dynamic generated by the wordpress,
Side Bar is for your blog information (for
e.g. blog archives, categories and so on. )
Footer is placing your copyright
information.
And these is the structure in image:
An overview:
1. Header (header.php)
1. Header (header.php)
2. Content (dynamic display)
3. Side Bar (sidebar.php)
4. Footer (footer.php)
* * *
Step 1)
Now let create some blank pages named “header.php”,
“sidebar.php”, ”footer.php” first.
For me I would like to make all the code
into a file (index.php) and then divide the code to others file (header.php,
sidebar.php, footer.php):
index.php
<html>
<head>
<title>Leobo theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content">Theme tutorial testing.</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
And now let add some more content into the theme:
index.php
<html>style.css
<head>
<title>Leobo theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="main_wrapper">
<div id="header">This is the header.</div>
<div id="content">Theme tutorial testing.</div>
<div id="sidebar">Side Bar</div>
<div id="footer">Text is available under the Creative Commons Attribution-ShareAlike License; <br />
additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. <br />
CopyRight © wordpress and terrapin sky</div>
</div>
</body>
</html>
/*After added the code to index.php and style.css,
Theme Name: Leobo's Theme
Theme URI: http://www.terrapinssky.blogspot.com/theme/leobo
Author: Xenia Law
Author URI: http://www.terrapinssky.blogspot.com/
Description: This is the most base theme.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blank, base
Text Domain: leobo
*/
div {display:block;}
html {}
body {background:#000;}
#main_wrapper {float:left; background:#fff; width:960px; }
#header { float:left; width:960px; height:100px; background:#000; color:#fff; padding:20px 10px;}
#content { float:left; width:580px; color:#000; padding:20px 10px;}
#sidebar { float:left; width:340px; color:#000; padding:20px 10px;}
#footer { float:left; width:960px; height:100px; background:#000; color:#fff; font-size:11px; padding:20px 10px;}
Go to your blog and refresh again,
and found the interface changed :
And now let divide the code from index.php
to others page:
header.php
<html><head> <title>Leobo theme</title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"></head><body><div id="main_wrapper"> <div id="header">This is the header.</div>
index.php
<?php get_header(); ?>
<div id="content">Theme tutorial testing.</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<- add text in green, keep text in black
sidebar.php
sidebar.php
<div id="sidebar">Side Bar</div>
footer.php
<div id="footer">Text is available under the Creative Commons Attribution-ShareAlike License; <br />additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. <br />
CopyRight © wordpress and terrapin sky</div></div>
</body>
</html>
Finsh , let add some more complicated in next post:
Continue Reading
[Wordpress][Tutorial with image] Wordpress theme tutorial for beginners (3)
No comments :
Post a Comment