Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
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 working on a PC), or MAMP if you are working on a Mac. All of these tools allow for a local testing environment for WordPress and can make it so that you don’t have to constantly transfer files through FTP while working on a project.
In terms of code editing I would highly suggest Notepad++. With syntax highlighting, and an easy and clean user interface for coding, I would have to say it is my personal favorite (plus, you can’t beat free), but Notepad or Notepad 2 also work as well.
Getting the Necessary Folders and Files Ready
In the folder containing your WordPress installation, go to wp-content/themes/ and create a folder named “New 3.0 Theme”. This is where we will hold all of our files during this tutorial. Now create the following files and folders:
|
1
2
3
4
5
6
7
8
9
10
|
/imagesstyle.cssheader.phpindex.phpsingle.phpfooter.phparchive.phppage.phpsidebar.phpfunctions.php |
Step 1 – Style.css
The style.css will contain all of the elements that style our WordPress template. First though. we will use it to declare the name of our template as well as the author name and link, and description and version. Now remember when creating a WordPress theme, the style.css is one of the two files required to make the theme work, and the other, which we will be creating later, is the index.php.
|
1
2
3
4
5
6
7
8
|
/*Theme Name: New WP 3.0Theme URI: http://www.onextrapixel.comDescription: A clean and minimal theme that is completely compatible with WordPress 3.0Author: Keenan PayneAuthor URI: http://slackrmedia.comVersion: 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
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 used to declare the specifications for fonts used on the website, as well as the background color (this can be changed to your own liking). We then declare the style attributes for links as well as some of the headers that we will be using throughout our theme.
The #wrapper is going to be the full size of the web page, with #header obviously being the header, and #blog containing just the recent blog posts on the site. Lastly we have .sidebar and #footer which will both just contain the basic definitions for those given areas, which we will get into more depth about later.
Step 2 – Header.php
Next we will create the header.php, which at the moment will contain our website logo, as well as our custom navigation.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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 code doesn’t really need to be explained in much depth, but just remember 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 standard that will be used to show the name of your website as you type it in your WordPress settings, and then your style.css and the PHP code that will enable WordPress 3.0’s threaded comments.
Hi, this is a comment.
To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.
homeo statis