WordPress. Create theme. Header and footer
In last lesson we began to create our own template. Today we create common parts for every site page – header and footer
Header and footer code are situated in header.php and footer.php. Its code includes in index.php with get_header() and get_footer() functions. There is simple html code with some useful php functions in this files. Let’s shortly discuss functions, which we use in this tutorial:
- bloginfo() – show site info. You can pass info parameter which you want to display, for example site name.
- wp_title() – shows the title of current page
- wp_head() – run ‘wp_head’ hook. Read about ‘wp_head’ hook here
- wp_footer() – run ‘wp_footer’ hook.
In source code you can notice, we don’t include css and js files in header.php and footer.php It is recommended to include all styles and scripts in special file functions.php. This file needs to improve template functionality and for custom theme settings. Don’t confuse this file with plugins. Plugins works with sites, not with themes.
In functions.php file we have created function, which includes styles and scripts to our web site when any hook happens. Hook in wordpress is such event in javascript. For example, we run wp_enqueue_scripts hook and say, when hook starts, our custom function loadScripts will work.
Useful links:
WordPress codex (full documentation)
first steps in theme development
Code lesson (header.php)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
</header>
<div id="content">
Code lesson (footer.php)
</div>
<footer>
</footer>
<?php wp_footer(); ?>
</body>
</html>Code lesson (index.php)
<?php get_header(); ?>
<?php get_footer(); ?>Code lesson (functions.php)
<?php
function loadScripts() {
wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri(). '/css/bootstrap.min.css' );
wp_enqueue_style( 'main-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'bsscript', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ), '20150330', true );
}
add_action( 'wp_enqueue_scripts', 'loadScripts');
0 Comments