WordPress theme example 1

This article is an example of a very simple WordPress theme.

See WordPress custom theme examples for a list of examples.

styles.css

The styles.css file contains:

• A CSS comment which contains "Theme Name: Unique Name"
• Your CSS styles
  • Bootstrap styles first
  • Custom styles second

/*
Theme Name: MGDP 2060 Example

After the CSS  comment, paste the Bootstrap CSS styles.

Below the Bootstrap CSS styles, create override styles to customize Bootstrap
*/

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 looks something like this:

See also

• Theme (WordPress)
• WordPress custom theme examples