Week Ten (MGDP2060)
This article lists topics for week ten of Web Design and Development III (MGDP2060).
Contents
wordpress.htcwebcreative.com
A class version of WordPress is now viewable online here:
Wiki page from Dreamhost about configuring WordPress:
Simple custom theme
Last week, we created a simple custom theme.
-
style.css -
index.php
Theme development using multiple theme folders
When creating a custom theme, you can structure your work work as several different custom themes, each representing a different stage in the development of your final theme.
That way, you can look back on previous stages of development, comparing your current theme with earlier versions.
This is often helpful, for novice and experienced developers alike.
If something goes wrong with your current version, you can examine the previous version, figure out how to fix your current version. Previous versions are also useful as a source of code samples which can be copied-and-pasted.
Creating a new version is easy:
- Create a copy of the current theme folder, with a different folder name
- Pick folder names that indicate version, e.g.
MyTheme1,MyTheme2,
- Pick folder names that indicate version, e.g.
- In the copy, in
style.css, change the Theme Name.
One alternative is to keep modifying one custom theme until it is complete.
- What other alternatives might you consider?
WordPress CSS
As we saw last week, you can hard-code links style directly into your theme (in header.php).
Hard-coding is a hack -- a temporary solution, in this case as a classroom example, to demonstrate how WordPress works.
The proper solution is to do it the WordPress way:
- In
style.css - In other external style sheet(s), the WordPress way
style.css
Every theme must have a style.css file.
WordPress uses this style.css to identify the name of the theme.
style.css can also contain CSS rules, although this is not required.
index.php
Every theme must have a file named index.php.
index.php is a Template (WordPress) template file.
Other template files are optional. But every theme must have index.php.
Think of index.php as the "Home page" -- and every other page -- for your WordPress site.
Most themes use a "sub-template" file named header.php, and another named footer.php.
Template files such as index.php incorporate the sub-templates into their own template using the include() statement.
sidebar.php is another commonly used sub-template.
There are two ways to use sub-templates. They do the same thing.
Using include()
PHP provides an include() function, which causes another file to be included (its contents inserted) where the include() function appears.
<?php include ('header.php'); ?>
<h1><?php bloginfo('name'); ?></h1>
<p>Lorem ipsum ...</p>
<h2The Loop:</h2>
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
<?php include ('footer.php'); ?>
WordPress provides two functions, get_header() and get_header(), as a convenience.
These do the same thing as include().
<?php get_header(); ?>
<h1><?php bloginfo('name'); ?></h1>
<p>Lorem ipsum ...</p>
<h2The Loop:</h2>
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_footer();
?>
header.php
A simple header.php looks something like this:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css"
media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<header>
</header>
<!-- End header.php -->
A simple footer.php looks something like this:
<!-- footer.php --> <footer></footer> </body> </html>
