Setting Up the Work Station
To get started with this tutorial we should set up a server on our computer
using either XAMPP or WAMP (usually if employed on a PC), or MAMP if you are
working on a Mac. All of these tools permit for a local checking natural natural
natural environment for WordPress and can make it so that you don't have to
certainly move documents through FTP while employed on a task.
In periods of cipher revising I would highly suggest Notepad++. With syntax
highlighting, and an very simple and clean user interface for coding, I would
have to state it is my personal favorite (plus, you can't trounce free), but
Notepad or Notepad 2 furthermore work as well.
Getting the essential Folders and documents prepared
In the folder containing your WordPress setting up, proceed to
wp-content/themes/ and conceive a folder entitled “New 3.0 Theme”. This is
where we will contain all of our documents during this tutorial. Now create the
following documents and folders:
/images
style.css
header.php
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.php
Style.css
The style.css will comprise all of the components that style our WordPress
template. First though. we will use it to affirm the name of our template as
well as the scribe name and link, and recount and type. Now remember when
conceiving a WordPress topic, the style.css is one of the two files needed to
make the theme work, and the other, which we will be conceiving subsequent, is
the index.php.
/*
Theme Name: New WP Theme
Theme URI: http://wordpress.org
Description: A clean and minimal theme that is completely
compatible with
Author: Hasibul Islam
Author URI: http://www.webdeveloperszone.com
Version: 1.0
*/
All of this information can be changed at anytime, but it is important that
it is all contained within the comments so that it doesn't affect any of the
definitions created.
Now we will create some basic definitions that we will later implement in
some of the template's PHP files.
body{
font-family:
Arial, Helvetica, Georgia, Sans-serif;
font-size:
12px;
background:
#d9d9d9;
color:
#000000;
}
a:link, a:visited{
text-decoration:
none;
color:
#000000;
}
a:hover{
color:
#5f5f5f;
}
h1 {
font-size:
54px;
}
h3 {
font-size:
24px;
}
#wrapper{
margin:
0 auto;
width:
750px;
text-align:
left;
background:
#fff;
padding:
20px;
}
#header{
width:
750px;
height:
100px;
}
#blog{
float:
left;
width:
520px;
padding:
0 10px 10px 10px;
}
.sidebar{
float:
left;
width:
200px;
margin:
0 0 0 10px;
font-size:
14px;
list-style:
none;
}
#footer{
clear:
both;
text-align:
center;
height:
50px;
background:
#ccc;
padding:
10px;
}
The tag is just utilised to affirm the specifications for
fonts utilised on the website, as well as the background color (this can be
altered to your own liking). We then affirm the style attributes for
connections as well as some of the headers that we will be utilising throughout
our theme.
The #wrapper is going to be the full size of the web page, with #header
obviously being the header, and #blog encompassing just the latest blog posts
on the location. finally we have .sidebar and #footer which will both just
comprise the basic delineations for those granted areas, which we will get into
more deepness about later.
Header.php
Next we will create the header.php,
which at the moment will contain our website logo, as well as our custom
navigation.
<!DOCTYPE html>
<html <?php
language_attributes(); ?>>
<head>
<meta
charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
wp_title ( '|', true,'right' );
?></title>
<link
rel="profile" href="http://gmpg.org/xfn/11"
/>
<link
rel="stylesheet" type="text/css"
media="all" href="<?php bloginfo( 'stylesheet_url' );
?>" />
<link
rel="pingback" href="<?php
bloginfo( 'pingback_url' ); ?>" />
<?php
/*
*
Add this to support sites with sites with threaded comments enabled.
*/
if
( is_singular() && get_option(
'thread_comments' ) )
wp_enqueue_script(
'comment-reply' );
wp_head();
wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
<div
id="wrapper">
<div
id="header">
<h1><a
href="<?php echo get_option('home'); ?>"><?php
bloginfo('name'); ?></a></h1>
</div>
All of this cipher doesn't actually need to be explained in
much deepness, but just recall that the above code should be in the header.php
of all of your themes. First we declare the doctype, as well as use the
benchmark that will be utilised to show the name of your website as you kind it
in your WordPress settings, and then your style.css and the PHP code that will
endow WordPress 3.0's threaded comments.
supplementing Custom Navigation
Now that we have coded up our header.php with our rudimentary data and our
blog's title, we can add our custom navigation list, a characteristic that was
introduced in WordPress 3.0. Before we actually add the cipher to our
header.php though, we have to first open up the functions.php, and add the
essential code to endow the made-to-order menus.
<?php
//Add support for
WordPress 3.0's custom menus
add_action( 'init',
'register_my_menu' );
//Register area for
custom menu
function register_my_menu() {
register_nav_menu(
'primary-menu', __( 'Primary Menu' ) );
}
?>
As you can see by the commented parts of the code, the first
part, with add_action is utilised to add support for custom meal lists, and
next we register a custom list and title it “Primary Menu”. Now, we will move
on to implementing the list into our topic.
To do this, we will have to add this line of code below at the end of our
header.php document.
<?php wp_nav_menu(
array( 'sort_column' =>
'menu_order', 'menu_class' =>
'nav', 'theme_location' =>
'primary-menu' ) ); ?>
Now on to comprehending precisely what this means. The
primary function that is being utilised is wp_nav_menu, with sort_column,
container_class, and theme_location as the contentions being used. What
sort_column does is makes certain that the alignment you pick in your WordPress
dashboard is followed. container_class will allow for you to select the CSS
class that you have conceived to be utilised to method your list. Lastly,
theme_location just assigns the list to while we select, which at the moment happens
to be primary-menu.
Styling the Navigation
We have our made-to-order header navigation up and running, but at the moment
it just looks like a dull old register of connections that regrettably, are
aesthetically unappealing. To rectify this, we will conceive a class called nav
in our style.css.
.nav{
width:750px;
background:
#000;
display:block;
float:left;
position:relative;
}
.nav ul{
list-style:none;
}
.nav li{
float:left;
position:relative;
}
As you can glimpse in our .nav we have made some rudimentary
affirmations, such as the breadth of the navigation, backdrop, where it will
align, as well as the display worth. Next we method the rudimentary unordered
register by just making certain that no projectiles are shown with our links.
For our register we ride high the pieces to the left, as well as place it
relative.
Now we will complete the styling of our navigation by supplementing styles to
the links and dropdown menus.
.nav a{
display:block;
text-decoration:none;
color:#fff;
padding:0
15px 10px 0;
font-size:13px;
font-weight:bold;
}
.nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
float:left;
z-index:99999;
background:
#212121;
}
.nav ul ul ul{
top:
30%;
left:100%;
background:
#343434;
}
.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}
.nav li:hover >
a,.nav ul ul:hover > a{
color:#ccc;
}
.nav ul li:hover >
ul{
display:block;
}
As you can glimpse we start by fashioning our links for the
list, and now we get into fashioning our drop-down meal lists. In .nav ul ul we
set the position to unconditional, and put the top house to 100%, so that it is
exactly under it's parent link. We also altered the backdrop to make the
drop-down connection stand out a little bit, as well as set our z-index to
99999 so that no issue what's underneath it or in the menu's way, it will
habitually stay on top of all other components.
For that third drop-down list, we have changed the backdrop hue afresh just
slightly so that it stands out, as well as made left 100% so that it is all the
way right of our first drop-down, and set the peak to 30% so that it is still
adhered to that second drop-down, but is divided from the entire list.
finally we method the links for our drop-down menus, as well as the what our
navigation will gaze like when a user hovers over a granted connection and its
drop-down.
Index.php
The index.php will be the home sheet of our website, and will comprise cipher
to encompass our header, footer, and sidebar, which I will interpret
underneath, as well as the cipher to encompass the most latest mails from our
blog and take benefit of WordPress 3.0's mail thumbnails feature.
<?php get_header();
?>
<div
id="blog">
<?php
if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div
class="post">
<h3><a
href="<?php the_permalink(); ?>"><?php the_title();
?></a></h3>
<div
class="entry">
<?php
the_post_thumbnail(); ?>
<?php
the_content(); ?>
<p
class="postmetadata">
<?php
_e('Filed under:'); ?> <?php the_category(', ') ?> <?php
_e('by'); ?> <?php the_author(); ?><br />
<?php
comments_popup_link('No Comments »', '1 Comment »', '%
Comments »'); ?> <?php edit_post_link('Edit', ' | ',
''); ?>
</p>
</div>
</div>
<?php endwhile;
?>
<div
class="navigation">
<?php
posts_nav_link(); ?>
</div>
<?php
endif; ?>
</div>
<?php get_sidebar();
?>
<?php get_footer();
?>
These lines of code are used to output all of the
information in the header.php,
sidebar.php, and footer.php wherever you place them in
your theme files.
<?php get_header();
?>
<?php get_sidebar();
?>
<?php get_footer();
?>
Other than that, the cipher here is attractive easy to
realise. After we call the header.php, we use our #blog that we created just a
little bit before, and we call the loop that will be utilised to bring up the
newest posts on our WordPress blog. After that we cover the name of our posts
in
, which we also styled earlier.
The one part of cipher here that displays how we're going to be taking
advantage of WordPress 3.0's post-thumbnail feature is the . As it stands, this
code won't do anything, until we cause the feature in our functions.php which
we will do in the next step.
Enabling Post Thumbnails
We have supplemented our cipher to display the mail thumbnails on the homepage,
but at the instant nothing happens as we have not really endowed the characteristic
to work. Now open up the functions.php that we worked on before, and the
underneath code should be supplemented after your list navigation code.
// Enable post
thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520,
250, true);
The cipher overhead is pretty self-explanatory as it magic
charms out nearly precisely what it does. The second line will add the support
for mail thumbnails in our topic, while the third line characterises the exact
dimensions of our thumbnail, which for this item, will be set at 520 pixels for
breadth, and 250 pixels for height.
Sidebar.php
The sidebar.php is, as you estimated, the document that will brandish all of
the information we desire in the sidebar. Since we have currently included the
document in our index.php, all we have to do is put the code in this file and
our sidebar will display up on the homepage.
<div
class="sidebar">
<?php if
( function_exists('dynamic_sidebar')
&& dynamic_sidebar() ) : else : ?>
<?php endif; ?>
</div>
Yup, that will be all of the cipher that's added to our
sidebar.php to make it purposeful. We call the div that we created in our
style.css, and the code underneath will make it so that we can add widgets to
our sidebar in the alignment and way we want them by the WordPress backend.
although, like numerous characteristics, we have to modify our functions.php
document first to make this characteristic work properly.
//Some simple code for
our widget-enabled sidebar
if ( function_exists('register_sidebar') )
register_sidebar();
The code just notifies WordPress to list a sidebar which we
called in our sidebar.php. WordPress can handle multiple sidebars attractive
effortlessly if you want more than one, but for the sake of holding this
already-long tutorial relatively short, we'll let Google answer the inquiry on how
to do that for you.
Single.php
The single.php is what will be utilised for a single mail sheet, and most of
the cipher should look pretty alike since we've already coded up our index.php.
Really the only thing that's distinct is that we have added in our
comments-template div, and the cipher to include the comments.php.
<?php get_header();
?>
<div
id="blog">
<?php
if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div
class="post">
<h3><a
href="<?php the_permalink(); ?>"><?php the_title();
?></a></h3>
<div
class="entry">
<?php
the_post_thumbnail(); ?>
<?php
the_content(); ?>
<p
class="postmetadata">
<?php
_e('Filed under:'); ?> <?php the_category(', ') ?> <?php
_e('by'); ?> <?php the_author(); ?><br />
<?php
comments_popup_link('No Comments »', '1 Comment »', '%
Comments »'); ?> <?php edit_post_link('Edit', ' | ',
''); ?>
</p>
</div>
<div
class="comments-template">
<?php
comments_template(); ?>
</div>
</div>
<?php endwhile;
?>
<div
class="navigation">
<?php
previous_post_link('< %link') ?> <?php next_post_link(' %link >')
?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar();
?>
<?php get_footer();
?>
Comments.php
With the release of WordPress 3.0 has meant the standardizing of comments
forms throughout all WordPress themes making it easier for theme authors to and
plugin developers since the comments form can be modified via hooks.
Below will be the code you will want to put in your comments.php file in your theme template.
<?php
comment_form(); ?>
This will brandish a remarks form that examines well on our
theme, but if you would like to discover more about customization of the
commentary pattern, you might desire to ascertain out WordPress 3.0 topic Tip
the Comment pattern.
Page.php
When you conceive a sheet in WordPress, a distinct document is used to brandish
the content of what you drafted into the page, and that is page.php. The cipher
will gaze almost absolutely equal to what we typed up in our single.php, except
since it is a sheet we are going to omit the remarks template, and change the
post navigation slightly to handle a sheet rather than of a mail. Other than
that, the code will be precisely the same.
<?php get_header();
?>
<div
id="blog">
<?php
if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div
class="post">
<h3><a
href="<?php the_permalink(); ?>"><?php the_title();
?></a></h3>
<div
class="entry">
<?php
the_content(); ?>
<p
class="postmetadata">
<?php
_e('Filed under:'); ?> <?php the_category(', ') ?> <?php
_e('by'); ?> <?php the_author(); ?><br />
<?php
comments_popup_link('No Comments »', '1 Comment »', '%
Comments »'); ?> <?php edit_post_link('Edit', ' | ',
''); ?>
</p>
</div>
</div>
<?php endwhile;
?>
<div
class="navigation">
<?php
posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar();
?>
<?php get_footer();
?>
Category.php
The category.php will assist as the document that, when a client examines at a
specific post category, time for posts, or specific scribe, will be the
document that serves up the data to display mails. As with our page.php, most
of the code here is going to be the exact same as the single.php we created
before, except for a chunk right at the beginning.
<?php get_header();
?>
<div
id="blog">
<?php
if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php
$post = $posts[0]; // Hack.
Set $post so that the_date() works. ?>
<?php
/* If this is a category archive */ if (is_category()) {
?>
<h2>Archive
for the ‘<?php
single_cat_title(); ?>’ Category:</h2>
<?php
/* If this is a tag archive */ }
elseif( is_tag() ) { ?>
<h2>Posts
Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php
/* If this is a daily archive */ } elseif (is_day())
{ ?>
<h2>Archive
for <?php the_time('F jS,
Y'); ?>:</h2>
<?php
/* If this is a monthly archive */ } elseif (is_month())
{ ?>
<h2>Archive
for <?php the_time('F,
Y'); ?>:</h2>
<?php
/* If this is a yearly archive */ } elseif (is_year())
{ ?>
<h2>Archive
for <?php the_time('Y');
?>:</h2>
<?php
/* If this is an author archive */ } elseif (is_author())
{ ?>
<h2>Author
Archive</h2>
<?php
/* If this is a paged archive */ } elseif (isset($_GET['paged'])
&& !empty($_GET['paged'])) { ?>
<h2>Blog
Archives</h2>
<?php
} ?>
<div
class="post">
<h3><a
href="<?php the_permalink(); ?>"><?php the_title();
?></a></h3>
<div
class="entry">
<?php
the_content(); ?>
<p
class="postmetadata">
<?php
_e('Filed under:'); ?> <?php the_category(', ') ?> <?php
_e('by'); ?> <?php the_author(); ?><br />
<?php
comments_popup_link('No Comments »', '1 Comment »', '%
Comments »'); ?> <?php edit_post_link('Edit', ' | ',
''); ?>
</p>
</div>
</div>
<?php endwhile;
?>
<div
class="navigation">
<?php
posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar();
?>
<?php get_footer();
?>
This piece of code right here will be the only thing that is
added, and we have included it right after our WordPress loop.
<?php $post
= $posts[0]; // Hack. Set $post so that
the_date() works. ?>
<?php
/* If this is a category archive */ if (is_category()) {
?>
<h2>Archive
for the ‘<?php
single_cat_title(); ?>’ Category:</h2>
<?php
/* If this is a tag archive */ }
elseif( is_tag() ) { ?>
<h2>Posts
Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php
/* If this is a daily archive */ } elseif (is_day())
{ ?>
<h2>Archive
for <?php the_time('F jS,
Y'); ?>:</h2>
<?php
/* If this is a monthly archive */ } elseif (is_month())
{ ?>
<h2>Archive
for <?php the_time('F,
Y'); ?>:</h2>
<?php
/* If this is a yearly archive */ } elseif (is_year())
{ ?>
<h2>Archive
for <?php the_time('Y');
?>:</h2>
<?php
/* If this is an author archive */ } elseif (is_author())
{ ?>
<h2>Author
Archive</h2>
<?php
/* If this is a paged archive */ } elseif (isset($_GET['paged'])
&& !empty($_GET['paged'])) { ?>
<h2>Blog
Archives</h2>
<?php
} ?>
What this does is use a assortment of if/elseif statements
in PHP to show what we are actually browsing on our blog. So if we're looking
at a exact category called “Test class 1”, it will display in the h2 heading
“Archive for the ‘Test Category 1’ Category:” before all mails, and it will do
this for certain dates, authors, and so on.
made-to-order Backgrounds, Feed connections
As recounted before, one feature that has been applied in WordPress 3.0 is the
ability to conceive or change the backdrop of your location, be it an likeness
or rudimentary hue, just through the WordPress backend. All we need for this
characteristic to work fully?
This one little line of code:
add_custom_background();
And like that, custom backgrounds are now enabled. Next, we are going to be
adding some equally simple code to make it so that relevant feed links are
available everywhere on the site. Be it the standard feed, comments, tags,
categories, all of these will be added to the header without any extra code.
Let's add the following code to our functions.php,
to make this feature work as it should.
add_theme_support(
'automatic-feed-links' );
Footer.php
To complete off our work here, we are going to conceive our footer.php file,
which too will use the #footer that we announced in our style.css, and will
just contain some rudimentary copyright data as well as a link to the tales and
remarks RSS feed at the bottom.
<div id="footer">
<p>
<strong>Copyright
2011 <?php bloginfo('name');
?> | All Rights Reserved.</strong> </a>
</p>
<p><a
href="<?php bloginfo('rss2_url');
?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed');
?>">Comments RSS</a></p>
</div>
</div>
</body>
</html>
.jpg)
Navigate to widgets page in administration area and activate it. To do
that press add button next to your widget. It should appear at current
widgets column, you can press edit button next to it too see the control
panel. Don't forget to press save changes button!
The text from your widget method should appear in your blog sidebar.
