Rooted Tribe https://rootedtribe.co.za Rooted In Music Wed, 31 Dec 2014 17:40:27 +0000 en-US hourly 1 https://wordpress.org/?v=4.0.38 The Second One, Before Months https://rootedtribe.co.za/blog/2014/10/10/the-second-one-before-months/ https://rootedtribe.co.za/blog/2014/10/10/the-second-one-before-months/#comments Fri, 10 Oct 2014 16:08:50 +0000 http://localhost/wordpress-4.0/wordpress/?p=3 [...]]]> I tell of him that summoned them storms in vengeance, him known as properor; he prospers by what he knows

200px-Taiwan-parliament-chew

That’s when you know that hell is empty, because all the devils are here

Widget Areas

Widget areas are the sections in your themes layout where you can add widgets using the built in WordPress widget mechanism. Sidebar is the most common Widgetized area, but your theme developer may enable widgets in multiple sidebars, footer, below the header, below the single post, etc. Widget areas make it easier for the users to add content, functionality and features to their website without breaking the layout. A theme user can even create custom sidebars using Widget Logic plugin.

Custom Background

WordPress theme developers often include functionality to add your own background color or images into your theme replacing the one they have already used. This feature is very useful to make your site look different, especially if you are using a popular theme like the default WordPress Twenty Eleven theme. This custom background option should not be confused with color changing option for all sections of a theme’s layout. Usually changing background color will not change the background color of the content, sidebar, header or any sections in the main container of your layout. For example, right now you are reading this on a light background, while the background color of wplift uses dark color and an image.

Theme Options

WordPress theme developers can additionally include many options for the Theme users to choose. These options are displayed on the Theme Options page. Theme Options pages are used to allow users to choose from a list of options to define different settings for their themes. For example the Default WordPress Twenty Twelve theme has an options page where you can choose Colors and Layout for your website. Many premium themes come with many more options to choose from. (Screenshot below is showing Busby’s Theme Options page)

]]> https://rootedtribe.co.za/blog/2014/10/10/the-second-one-before-months/feed/ 0 Hello world! https://rootedtribe.co.za/blog/2014/10/09/hello-world/ https://rootedtribe.co.za/blog/2014/10/09/hello-world/#comments Thu, 09 Oct 2014 18:57:00 +0000 http://localhost/wordpress-4.0/wordpress/?p=1 [...]]]> 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
/images
style.css
header.php
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.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.0
Theme URI: http://www.onextrapixel.com
Description: A clean and minimal theme that is completely compatible with WordPress 3.0
Author: Keenan Payne
Author URI: http://slackrmedia.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.

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.

]]> https://rootedtribe.co.za/blog/2014/10/09/hello-world/feed/ 2