Creating and Styling our first theme from scratch.

CSS Styles

In order to get our new style to accept and read our new css style sheet we have to configure just a few comments.

like below

/*
Theme Name: cssOrigins.com
Description: the second iteration of the cssOrigins website
Author: Hunter  Brelsford
Author URI: http://www.cssOrigins.com
version: 1.0
Tags: Design, WordPress, Css
Optimization: Css Optimization done by Hunter  Brelsford 4/23/09
*/

Make sure at this point we save our style sheet. The style sheet fortunately is ready to be read in by our new blog, even though it does not contain any kind of actual style information. All plugins, and stylesheets in wordpress are detected this way, and auto generated into their respective themes, and plugins sections under the admin panel.

If we go on over to see our new theme, we can see that unfortunately that its listed as a broken theme.

Index.php

The reason we have a broken theme is because we have no files other then the style sheet associated with our theme, wordpress needs at least one for it to recognize its theme as a valid workable theme. So we will indulge it by creating a new file and naming it “index.php ”

1. create a index.php
2. add a title
3. save the page

if you want to add your own screen shot for your theme you can additionally upload a 4×3 .jpg up to your themes directory.

Template Tags – 10:05

WordPress has many built in functions that you can use on your site. the ones used in this screen cast are covered and defined here.

1. bloginfo(‘name’)  – Uses the name of your blog thats been defined in your wordpress settings
2. bloginfo(‘stylesheet_url’) – Uses the current URL where your activated themes stylesheet is located
3. language_attributes(”) – Gives the default language and type direction of the wordpress instalation
4. bloginfo(‘html_type’) – Gives the page content type
5. bloginfo(‘charset’) – Displays the character set of the page

Template tags are nothing more then php functions in wordpress, these tags are available to access functions and variables from within wordpress.

More information on template tags can be found on the wordpress codex

This article was originally brought to you by Drew Douglass at ThemeForest

No related posts.

The series will be separated into days, starting with day two… ok lets get started.

Day 2 : WordPress Admin panel.

Introduction

In our video here we quickly reviewed all the necessaries that we would be using in order to use and edit our new WordPress install. He quickly went over the WordPress file structure. The necessary changes that needed to be made to the wp-config.php file when we upload, and the location of our all important theme files.

www.example.com/wp-content/themes/theme1

Body

Moving on through the video the main bulk of this video was getting the understanding of the different template files in your wordpress theme, what they do and how they work, so lets move through a few of them.

As described in our video if we go to APPEARANCE | EDITOR we will be able to see all the template files included in the wordpress theme currently activated.

If we start by importance usualy index.php would come to mind in a wordpress site. We can see there’s no doctypes or much html data in our file at all, but rather many simple php requests to header and footer and sidebar etc.. These are essentially statements that calls in those files from you directory. So header.

In our header.php we find our doctypes and titles tags and start of our html elements. This is loaded at the top of every page or post that calls get_header(). Pretty easy to understand.

Similarly our files typically end with out get_footer() call and our footer.php contains all the closing tags for information contained within our document.

Single.php – used for individual post pages.

404.php – used when a page within your wordpress blog cannot be found.

Sidebar -  calls widgets and other custom information into the 1 or more sidebars in your wordpress theme.

Conclusion

After looking through and familiarizing yourself with the themes directory withing your wordpress install you should be able to identify the different files and what they more or less accomplish. With this basic knowledge we will be able to simply identify where and what files we need to be editing in the future while we move on to developing our own theme, in the new few videos.

If you’re having problems understand the videos or information please comment and we will see if we can help you out.

No related posts.