WordPress - Theme development

From XennisWiki
Jump to: navigation, search

Developing a WordPress theme

Example

Structure

|- footer.php
|- functions.php
|- header.php
|- index.php
|- page.php
|- page-PAGE-SLUG.php
|- screenshot.png
|- style.css

Page

Note: Loading for instance header-example.php by get_header('example')

page.php

<?php
get_header();

if (have_posts()) :
	while (have_posts()) : the_post(); ?>

	<article>
		<h1><?php the_title(); ?></h1>
		<?php the_content(); ?>
	</article>
	<?php endwhile;
	
else:
	echo '<p>No content found</p>';

endif;

get_footer();

Index

index.php is in this case empty

Header

header.php

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>

	<!-- Meta -->
	<meta charset="<?php bloginfo('charset'); ?>"
	<meta name="viewport" content="width=device-width">

	<!-- Title -->
	<title><?php global $view; ($view) ? $view->outputTitle() : the_title(); ?> | <?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>

	<!-- Link -->
	<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />

	<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
	
	<!-- Begin Container -->
	<div id="container">
	
		<header>

			<div id="logo"></div>
			<?php wp_nav_menu(array(
				'theme_location' => 'main'
			)); ?>
			
		</header>
		
	<!-- Begin content_container -->
	<div id="content_container">

Footer

footer.php with a menu

	<footer class="site-footer">
		<div id="copyright">&copy; <?php echo date('Y'); ?> by Unkown</div>
		<?php wp_nav_menu(array(
			'theme_location' => 'footer'
		)); ?>		
	</footer>

	</div><!-- End content_container -->
</div><!-- End Container -->

<?php wp_footer(); ?>

</body>
</html>

Functions

functions.php

<?php
add_action('wp_enqueue_scripts', 'myTheme_resources');
function myTheme_resources() {
	// Add style.css
	wp_enqueue_style('style', get_stylesheet_uri());
}

// Navigation menus
register_nav_menus(array(
	'main' => __( 'Main Menu' ),
	'footer' => __( 'Footer Menu' ),
));

See also

External links