|
|
| 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)]] |
