Difference between revisions of "Week Twelve (MGDP2060)"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) |
Karl Jones (Talk | contribs) (→WordPress custom theme example) |
||
| Line 8: | Line 8: | ||
== WordPress custom theme example == | == WordPress custom theme example == | ||
| − | ... | + | |
| + | <code>style.css</code> | ||
| + | |||
| + | The <code>style.css</code> file contains: | ||
| + | |||
| + | * A comment which tells WordPress that this style sheet represents a theme. | ||
| + | * Your CSS styles | ||
| + | ** Bootstrap styles first | ||
| + | ** Custom styles second | ||
| + | |||
| + | <code>header.php</code> | ||
| + | |||
| + | The <code>header.php</code> file contains HTML that is shared by all pages. | ||
| + | |||
| + | Example: | ||
| + | |||
| + | <pre> | ||
| + | <!DOCTYPE html> | ||
| + | <html lang="en"> | ||
| + | <head> | ||
| + | <meta charset="utf-8" /> | ||
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| + | <meta name="description" content="Description here"> | ||
| + | <meta name="keywords" content="Your keywords"> | ||
| + | <meta name="author" content="author name"> | ||
| + | |||
| + | <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" /> | ||
| + | |||
| + | <?php | ||
| + | if ( is_home() ) { | ||
| + | $title = 'Home : Classroom Example!!!'; | ||
| + | } else { | ||
| + | $title = 'Other Page : Classroom Example'; | ||
| + | } | ||
| + | ?> | ||
| + | |||
| + | <title><?php echo $title; ?></title> | ||
| + | |||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | |||
| + | </pre> | ||
| + | |||
| + | <code>index.php</code> | ||
| + | |||
| + | The <code>index.php</code> file contains the HTML for the main body of pages. | ||
| + | |||
| + | Example: | ||
| + | |||
| + | <pre> | ||
| + | <?php | ||
| + | get_header(); | ||
| + | ?> | ||
| + | |||
| + | <div class="container main home"> | ||
| + | <h1>Content goes here</h1> | ||
| + | <div class="overlay top-overlay"> | ||
| + | <p>Image needs special path in WordPress template</p> | ||
| + | <img src="<?php echo get_template_directory_uri(); ?>/images/test.png" class="img-responsive" alt="" /> | ||
| + | </div> | ||
| + | |||
| + | <?php the_content('Read more...'); ?> | ||
| + | </div> | ||
| + | |||
| + | <?php | ||
| + | get_footer(); | ||
| + | ?> | ||
| + | </pre> | ||
| + | |||
| + | <code>footer.php</code> | ||
| + | |||
| + | The <code>footer.php</code> file contains shared footer information, such as copyright and legal statements. | ||
| + | |||
| + | Example: | ||
| + | |||
| + | <pre> | ||
| + | <footer class="container bottombar"> | ||
| + | Footer info goes here | ||
| + | </footer> | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | </pre> | ||
== NO CLASS NEXT WEEK == | == NO CLASS NEXT WEEK == | ||
Revision as of 18:25, 19 November 2015
This article lists topics for Week Twelve of Web Design and Development III (MGDP2060).
NO CLASS NEXT WEEK. Have a happy Thanksgiving.
Contents
In the news
- Don't copy-paste terminal commands from the web - "tl;dr: whatever Javascript put into your clipboard gets run irrespective of what you thought you were copying, and the outcomes can be exceedingly unpleasant."
WordPress custom theme example
style.css
The style.css file contains:
- A comment which tells WordPress that this style sheet represents a theme.
- Your CSS styles
- Bootstrap styles first
- Custom styles second
header.php
The header.php file contains HTML that is shared by all pages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Description here">
<meta name="keywords" content="Your keywords">
<meta name="author" content="author name">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<?php
if ( is_home() ) {
$title = 'Home : Classroom Example!!!';
} else {
$title = 'Other Page : Classroom Example';
}
?>
<title><?php echo $title; ?></title>
</head>
<body>
index.php
The index.php file contains the HTML for the main body of pages.
Example:
<?php
get_header();
?>
<div class="container main home">
<h1>Content goes here</h1>
<div class="overlay top-overlay">
<p>Image needs special path in WordPress template</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/test.png" class="img-responsive" alt="" />
</div>
<?php the_content('Read more...'); ?>
</div>
<?php
get_footer();
?>
footer.php
The footer.php file contains shared footer information, such as copyright and legal statements.
Example:
<footer class="container bottombar">
Footer info goes here
</footer>
</body>
</html>
NO CLASS NEXT WEEK
Have a happy Thanksgiving.
Exercise for next class session
...
