|
|
Line 1: |
Line 1: |
− | This article lists topics for week ten of [[Web Design and Development III (MGDP2060)]]. | + | This article lists topics for Week Ten of [[Web Design and Development III (MGDP2060)]]. |
| | | |
− | == wordpress.htcwebcreative.com ==
| |
| | | |
− | A class version of WordPress is now viewable online here:
| |
− |
| |
− | * http://wordpress.htcwebcreative.com/wordpress
| |
− |
| |
− | Wiki page from Dreamhost about configuring WordPress:
| |
− |
| |
− | * http://wiki.dreamhost.com/WordPress_wp-config
| |
− |
| |
− | == Simple custom theme ==
| |
− |
| |
− | Last week, we created a simple custom theme.
| |
− |
| |
− | * <code>style.css</code>
| |
− | * <code>index.php</code>
| |
− |
| |
− | == 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. <code>MyTheme1</code>, <code>MyTheme2</code>,
| |
− | * In the copy, in <code>style.css</code>, 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 <code>links</code> <code>style</code> directly into your theme (in <code>header.php</code>).
| |
− |
| |
− | 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 <code>style.css</code>
| |
− | * In other external style sheet(s), the WordPress way
| |
− |
| |
− | == style.css ==
| |
− |
| |
− | Every theme must have a <code>style.css</code> file.
| |
− |
| |
− | WordPress uses this <code>style.css</code> to identify the name of the theme.
| |
− |
| |
− | <code>style.css</code> can also contain CSS rules, although this is not required.
| |
− |
| |
− | == index.php ==
| |
− |
| |
− | Every theme must have a file named <code>index.php</code>.
| |
− |
| |
− | <code>index.php</code> is a [[Template (WordPress) template]] file.
| |
− |
| |
− | Other template files are optional. But every theme must have <code>index.php</code>.
| |
− |
| |
− | Think of <code>index.php</code> as the "Home page" -- and every other page -- for your WordPress site.
| |
− |
| |
− | == Sub-templates: header.php and footer.php ==
| |
− |
| |
− | Most themes use a "sub-template" file named <code>header.php</code>, and another named <code>footer.php</code>.
| |
− |
| |
− | Template files such as <code>index.php</code> incorporate the sub-templates into their own template using the <code>include()</code> statement.
| |
− |
| |
− | <code>sidebar.php</code> is another commonly used sub-template.
| |
− |
| |
− | There are two ways to use sub-templates. They do the same thing.
| |
− |
| |
− | === Using include() ===
| |
− |
| |
− | PHP provides an <code>include()</code> function, which causes another file to be included (its contents inserted) where the <code>include()</code> function appears.
| |
− |
| |
− | <pre>
| |
− | <?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'); ?>
| |
− | </pre>
| |
− |
| |
− | === Using get_header() and get_footer() ===
| |
− |
| |
− | WordPress provides two functions, <code>get_header()</code> and <code>get_header()</code>, as a convenience.
| |
− |
| |
− | These do the same thing as <code>include()</code>.
| |
− |
| |
− | <pre>
| |
− | <?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();
| |
− | ?>
| |
− |
| |
− | </pre>
| |
− |
| |
− | == header.php ==
| |
− |
| |
− | A simple <code>header.php</code> looks something like this:
| |
− |
| |
− | <pre>
| |
− | <!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 -->
| |
− | </pre>
| |
− |
| |
− | == The loop ==
| |
− |
| |
− | WordPress has a principle called the loop.
| |
− |
| |
− | The loop allows you do have one HTML design which is displayed repeatedly ("looped") for multiple blog posts (or multiple custom posts).
| |
− |
| |
− | <pre>
| |
− | <?php
| |
− | if (have_posts()) :
| |
− | while (have_posts()) :
| |
− | the_post();
| |
− | the_content();
| |
− | endwhile;
| |
− | endif;
| |
− | ?>
| |
− | </pre>
| |
− |
| |
− | == footer.php ==
| |
− |
| |
− | A simple <code>footer.php</code> looks something like this:
| |
− |
| |
− | <pre>
| |
− | <!-- footer.php -->
| |
− | <footer></footer>
| |
− | </body>
| |
− | </html>
| |
− |
| |
− | </pre>
| |
− |
| |
− | == Terminology ==
| |
− |
| |
− | * [[Boilerplate code]]
| |
− | * [[Lorem ipsum]]
| |
− |
| |
− | == See also ==
| |
− |
| |
− | * [[Web Design and Development III (MGDP2060)]]
| |
| | | |
| [[Category:Web Design and Development III (MGDP2060)]] | | [[Category:Web Design and Development III (MGDP2060)]] |