nielsdoorn · August 29, 2015 13:56
diff --git a/footer.php b/footer.php
 	</div>
 	<?php wp_footer(); ?>
 </body>
 </html>
diff --git a/functions.php b/functions.php
 <?php
 	// menu registratie
 	register_nav_menu( "hoofdmenu", "Het hoofdmenu" );
 	
 	// sidebar registratie
 	register_sidebar( array(
 		'name' => 'Hoofd Sidebar',
 		'id' => 'sidebar-1',
 		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 		'after_widget' => "</aside>",
 		'before_title' => '<h3 class="widget-title">',
 		'after_title' => '</h3>',
 	) );
 ?>
diff --git a/header.php b/header.php
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title><?php bloginfo('name'); ?></title>
 	<?php wp_head(); ?>
 	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
 </head>
 <body>
 	<div id="container">
 		<h1>WordPress theme</h1>
 		<header id="nav">
 			<?php
 			$opties = array( 
 				'container_class' => 'menu', 
 				'theme_location' => 'hoofdmenu' 
 			);
 			wp_nav_menu( $opties ); 
 			?>
 		</header>
diff --git a/index.php b/index.php
 <!-- header -->
 <?php
 get_header();
 ?> 
 <div id="wrapper">
 	<div id="content">
 		<?php while ( have_posts() ) : the_post(); ?>
 		<div class="post" id="post-<?php the_ID(); ?>">
 			<h2><?php the_title(); ?></h2>
 			<?php the_content( 'Lees meer...'); ?>
 		</div>
 		<?php endwhile; ?>
 	</div>
 	<!-- sidebar -->
 	<?php
 		get_sidebar();
 	?>
 </div>
 <!-- footer -->
 <?php
 get_footer();
 ?>
diff --git a/sidebar.php b/sidebar.php
 <div id="sidebar">
 <div class="widget-area">
 	<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
 		<!-- HTML voor als de sidebar leeg is -->
 	<?php endif; ?>
 </div>
 </div>
diff --git a/style.css b/style.css
 /*
 Theme Name: Simple theme om themes te leren maken
 Theme URI: http://nielsdoorn.nl/
 Description: Beste theme ever.
 Version: 0.1
 Author:Niels Doorn
 Tags: awesome, cool, theBest

 Een vrij eenvoudige theme

 */

 @import url(http://fonts.googleapis.com/css?family=Gabriela);

 html, body {
 	min-height: 100%;
 }

 body {
 	font-family: 'Gabriela', serif;
 	background: linear-gradient(45deg, #f06, yellow);
 }

 #container {
 	width: 800px;
 	margin: 0 auto;
 	background-color: rgba(255, 255, 255, 0.4);
 }

 h1 {
 	text-align: center;
 	letter-spacing: 0.5em;
 	font-variant: small-caps;
 }

 #nav {
 	height: 20px;
 	background-color: rgba(255, 255, 255, 0.5);
 	text-align: center;
 	height: 30px;
 }

 ul {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }

 #nav li {
 	display: inline-block;
 	width: 120px;
 	height: 30px;
 	line-height: 30px;
 	transition: 1.2s;
 }

 #nav li:hover {
 	background-color: grey;
 }

 a {
 	text-decoration: none;
 	color: purple;
 	transition: 0.5s;
 }

 #nav li:hover a {
 	color: lightblue;
 }

 #wrapper {
 	display: table;
 	height: 400px;
 }

 #content {
 	display: table-cell;
 	width: 500px;
 	height: 400px;
 	padding: 1em;
 }

 #sidebar {
 	display: table-cell;
 	width: 300px;
 	padding: 1em;
 }

 .widget {
 	background-color: rgba(255, 255, 255, 0.5);
 	padding: 0.3em;
 	margin-bottom: 20px;
 }

 h2 {
 	text-align: center;
 }

 .post h2 {
 	text-align: left;
 }
	<?php
	// menu registratie
	register_nav_menu( "hoofdmenu", "Het hoofdmenu" );

	// sidebar registratie
	register_sidebar( array(
	'name' => 'Hoofd Sidebar',
	'id' => 'sidebar-1',
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => "</aside>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
	) );
	?>
	<!-- header -->
	<?php
	get_header();
	?>
	<div id="wrapper">
	<div id="content">
	<?php while ( have_posts() ) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><?php the_title(); ?></h2>
	<?php the_content( 'Lees meer...'); ?>
	</div>
	<?php endwhile; ?>
	</div>
	<!-- sidebar -->
	<?php
	get_sidebar();
	?>
	</div>
	<!-- footer -->
	<?php
	get_footer();
	?>
	/*
	Theme Name: Simple theme om themes te leren maken
	Theme URI: http://nielsdoorn.nl/
	Description: Beste theme ever.
	Version: 0.1
	Author:Niels Doorn
	Tags: awesome, cool, theBest

	Een vrij eenvoudige theme

	*/

	@import url(http://fonts.googleapis.com/css?family=Gabriela);

	html, body {
	min-height: 100%;
	}

	body {
	font-family: 'Gabriela', serif;
	background: linear-gradient(45deg, #f06, yellow);
	}

	#container {
	width: 800px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.4);
	}

	h1 {
	text-align: center;
	letter-spacing: 0.5em;
	font-variant: small-caps;
	}

	#nav {
	height: 20px;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
	height: 30px;
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	#nav li {
	display: inline-block;
	width: 120px;
	height: 30px;
	line-height: 30px;
	transition: 1.2s;
	}

	#nav li:hover {
	background-color: grey;
	}

	a {
	text-decoration: none;
	color: purple;
	transition: 0.5s;
	}

	#nav li:hover a {
	color: lightblue;
	}

	#wrapper {
	display: table;
	height: 400px;
	}

	#content {
	display: table-cell;
	width: 500px;
	height: 400px;
	padding: 1em;
	}

	#sidebar {
	display: table-cell;
	width: 300px;
	padding: 1em;
	}

	.widget {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 0.3em;
	margin-bottom: 20px;
	}

	h2 {
	text-align: center;
	}

	.post h2 {
	text-align: left;
	}