WordPress theme example 2

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

See WordPress custom theme examples for a list of examples.

style.css

The style.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>Custom Theme Example Two</h1>

	<div class="post-container">
	
	<?php
	if (have_posts()) :
	   while (have_posts()) :
		  the_post();
		  
			echo '<div class="post">';

				echo '<div class="post-title">';
				
				 echo the_title();
				 
				echo '</div>';
		  
				echo '<div class="post-content">';
				
				 the_content();
				 
				echo '</div>';
			
			echo '</div>';	

	   endwhile;
	endif;
	?>
	
	</div>		 
</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>

See also

• Theme (WordPress)
• WordPress custom theme examples