Posted by & filed under Dev Workflow. Edit: 26 July 2014

3 parts to be built: Header-Footer, Menu-Sidebar and Body content

One thing to remember is whichever part we are building, it needs a combination of functions (.php file), styles (in .css file) and asset mostly images. For example, if we are building a header template, we have to create header.php file and insert some php code for function, then add some id and class for styling parts. After that, styling would be added into .css file for those classes and ids. Lastly, if some classes and ids need images for anchor or background then we have to create them in some sub-folders and call them from function/style file.

hierarchy.png

Usually, calling assets or files from .php is this function:
src="<?php echo get_stylesheet_directory_uri(); ?>/library/img/...

And calling from .css is by relative links to images/files such as:
background: url(library/graul/images/xyz.png);

Header-footer

Because all of pages and posts will use same image or something... for header, and footer as well, we have to build a header/footer template. This is where header.php and footer.php come.

Let's assume that we are building a HTML website. You have to create a header with banner, then some content we called body part, and a footer last. Now, let divide it into 3 parts and cut first part, all of HTML code we consider as header, into header.php file. That's all for a header template of WordPress theme!

Because it is a WordPress theme, there are some special tags that they call template tags we can use here, for example:

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
	<!-- wordpress head functions -->
	<?php wp_head(); ?>
	<!-- end of wordpress head -->
	<!-- theme options from options panel -->
	<?php get_theme_options(); ?>
	...
	</head>

So we can see wp_head(); get_theme_options()... functions. wp_head is official one that we can hook a filter/action into it to do something more, while get_theme_options is our custom function, acting as any other functions but echoing something into head of theme.

The same is for footer, let's cut footer part of HTML theme and paste into footer.php, we have footer of WordPress theme. Similar to header, there are some functions to be used here to support a fully functional footer, such as wp_footer...

Next is sidebars and menus

Menus are where we can list main anchors of sites.

To set up a menu, use this within a .php file, function.php:

if (!function_exists( 'bizphp_menus' ) ) {
	function bizphp_menus() {
		$locations = array(
			'navbartop' => __( 'Top Nav Menu', 'biztheme' ),
		);
		register_nav_menus( $locations );
	}
}

After that, call a menu from header or footer or any other template parts as we need:

function bizphp_navbartop() {
    wp_nav_menu( 
    	array(
    		'theme_location' => 'navbartop', /* where in the theme it's assigned */
    		'menu' => 'navbartop', /* menu name */
    		'fallback_cb' => 'bizphp_main_nav_fallback', /* menu fallback */
    		'depth' => '3', /* suppress lower levels for now */
    		'walker' => new Bootstrap_Walker()
    	)
    );
}

All parameters can be referred from codex, generally, this will show menu from a 'theme location' as we set up in Admin. If not then menu with name as 'menu' would be called, if not then a menu as custom bizphp_main_nav_fallback function would be called... That's order of calling.

Menus should be inserted into header and footer template, and all those along with widgets can be inserted into body template as below.

Final is content/body

To do this, we can copy the body part from HTML version to page.php and single.php to display specific body parts of pages and posts, respectively.

For each post type or page, there would be some parts to be implemented. Almost content here is controlled by WP Loop, which is a pair of conditional funtions that call content of posts/pages to be displayed. These two templates are center parts of website because by default, we use pages for static information and posts for blog posts and other dynamic post types... Other parts are header, footer and widget. Menus usually are called within header and footer already. This is minimal code for page.php or single.php:

<?php get_header(); ?>

			<div id="content" class="clearfix row-fluid">

				<div id="main" class="span8 clearfix" role="main">

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

					<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">

						<header>

							<div class="page-header"><h1 class="page-title" itemprop="headline"><?php the_title(); ?></h1></div>

						</header> <!-- end article header -->

						<section class="post_content clearfix" itemprop="articleBody">
							<?php the_content(); ?>

						</section> <!-- end article section -->

						<footer>

							<?php the_tags('<p class="tags"><span class="tags-title">' . __("Tags","biztheme") . ':</span> ', ', ', '</p>'); ?>

						</footer> <!-- end article footer -->

					</article> <!-- end article -->

					<?php comments_template('',true); ?>

					<?php endwhile; ?>		

					<?php else : ?>

					<article id="post-not-found">
					    <header>
					    	<h1><?php _e("Not Found", "biztheme"); ?></h1>
					    </header>
					    <section class="post_content">
					    	<p><?php _e("Sorry, but the requested resource was not found on this site.", "biztheme"); ?></p>
					    </section>
					    <footer>
					    </footer>
					</article>

					<?php endif; ?>

				</div> <!-- end #main -->

				<?php get_sidebar(); // sidebar 1 ?>

			</div> <!-- end #content -->

<?php get_footer(); ?>

Main parts are get_header, get_sidebar and get_footer. They are calling separate parts from other files to be embedded into this template. Other code is layout, just same as HTML.

Some cases we can use some shortcodes of WordPress to layout pages. That is when website is about information and mostly static pages, so page.php and single.php template could be minimal as possible. All content will be added by text editor for each pages. With some shortcodes that would be display exactly the same as HTML version.

Otherwise we have to expand page.php and single.php to include some dynamic part that will be added dynamic content later...

Comments

comments

Comments are closed.