Global elements development

Header
Header Elements:

  • Logo.
  • Menu.
  • Sticky Menu (it will only be shown if the resolution isn’t mobile, and only when a scroll up is done if the page has a large height and the main menu isn’t being displayed).

Code is found in header.php:

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package lookalive
 */
require_once('mainmenu.php');
?>

The first thing that is found is that the mainmenu.php file is required. To make WordPress menus we need to implement a Walker class type. Actually, the Walker_Nav_Menu class must be extended. This file implementats the main menu (and the sticky menu). Let’s take a look at the mainmenu.php code:

<?php
class Walker_Main_Menu extends Walker_Nav_Menu {

   
    /**
     * At the start of each element, output a <li> and <a> tag structure.
     *
     * Note: Menu objects include url and title properties, so we will use those.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
       
        $output .= sprintf( "\n<li class='nav-item'><a class='nav-link px-2 mx-1' href='%s'%s>%s</a></li>\n",
            $item->url,
            ( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
            $item->title
        );
    }

}

In the start_el function we are returning the html of each menu option. It doesn’t say say anything about the menu container because that’s done in header.php. Let’s see how that file continues:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">


<?php wp_head(); ?>
</head>

In the previous segment, we query the WordPress database using the wp_head hook. That method returns the page settings and metadata, then we add them to the head section. Nothing visual has yet been shown. However, I’d like to point out that there are many processes running already on the server. In the head section of HTML the css style files are defined, and in many cases also JavaScript files too. In order to use our styles, we have to tell the browser their location.

The technical road to extend WordPress functions (like wp_head) is by adding a filter or an action. For example, if I wanted WordPress to do something special when saving a post, I would have to implement the save_post action with a method. If the name of the method were methodX, then the line of code would look like this:

add_action('save_post', 'methodX');

To implementat actions and filters in a WordPress theme, it’s recommended to use a file called functions.php. If we want to tell WordPress the location of the style files and scripts, the better way is to use the wp_enqueue_scripts hook. Code of the method implementing wp_enqueue_scripts in our functions.php:

function lookalive_scripts() {
    wp_enqueue_style( 'lookalive-style', get_stylesheet_uri(), array(), '20190514');
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style( 'roboto-font', 'https://fonts.googleapis.com/css?family=Roboto');
   
    wp_enqueue_script( 'tether', get_template_directory_uri() . '/js/tether.min.js', array(), '20151215', true );
   
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151215', true );

    wp_enqueue_script( 'lookalive-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'lookalive-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
   
    wp_enqueue_script( 'lookalive-custom-scripts', get_template_directory_uri() . '/js/scripts.js', array(), '20190429', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'lookalive_scripts' );

Several of the setup options came already from the underscores starter theme. But we also had to add the URL of our typography, some Bootstrap files and our custom javascript file.

Let’s return to header.php:

<body <?php body_class(); ?>>
<div class="container-fluid">

These two lines are extremely important:

  1. We add the default font by using the WordPress filter body_class.
  2. Then we define the Bootstrap container for the page body.

The body_class filter deserves a detailed explanation: body_class is used in WordPress to add CSS classes to the page body. Filters are almost the same as actions. The main difference is that filters are used to modify variables. Unlike actions, filters must return a value (the value returned would be the input value modified by our filter). We are interested in adding the Roboto font as the default page font, and we will do it by adding this code to functions.php:

add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
    $classes[] = 'sansserif-robotofont';
    return $classes;
}

In the custom_class function, we’re adding to the classes array a css class called sansserif-robotofont. It’s defined in our style sheet:

.sansserif-robotofont {
    font-family: 'Roboto', sans-serif;
}

Let’s get back to header.php, first we define the sticky menu:

<div class="row">
    <div class="col-md-12">
        <?php
        $items_wrap = '<ul id="%1$s" class="%2$s" style="display:none">%3$s';
        $items_wrap .= sprintf( "\n<li class='nav-item ml-md-auto'><a class='nav-link px-2 mx-1' href='javascript:scrollToTop()'><b>Tope &uarr;</b></a></li>\n</ul>");
        wp_nav_menu( array( 'menu' => 'Main Menu',
        'walker' => new Walker_Main_Menu(),
        'menu_class' => 'nav list-inline nav-mainmenu sticky',
        'container' => '',
        'items_wrap' => $items_wrap) ); ?>
    </div>
</div>

In the previous segment:

  1. We define a row with column width 100%.
  2. We wrap the menu: we define the container making sure that at the beginning it isn’t displayed (using the display:none), and at the end with add the option to scroll to the top.
  3. We configure the menu classes as “nav list-inline nav-mainmenu sticky“. The former ones are Bootstrap classes, the later ones are our classes that make it behave like a sticky menu is supposed to behave.

Then we define the place for the logo:

<div class="row bottom-line">
    <div class="col-md-12">
        <a href="/"><img class="my-4 mx-auto d-block" alt="Look Alive" src="<?php echo( get_header_image() ); ?>"></a>
    </div> 
</div>

The header image is defined in the WordPress appearance section. We finish with header.php code, by defining the main menu itself:

<div class="row bottom-line main-nav-row">
    <div class="col-md-12">
        <nav class="navbar navbar-toggleable navbar-light py-0">
        <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
                       
                <?php wp_nav_menu( array( 'menu' => 'Main Menu',
                'walker' => new Walker_Main_Menu(),
                'menu_class' => 'nav navbar-nav navbar-center list-inline mx-auto justify-content-center separator nav-mainmenu',
                'container' => '') ); ?>
        </div>
        </nav>
    </div>
</div>

Compared to the sticky manu there seems to be something else happening here. There is a nav declared, as well as a button. We’re taking advantage of some of the resposive features Bootstrap has for menus. When the size of the screen where the site is displayed becomes too narrow, a button that opens the menu vertically with the options centralized will be displayed. It’s one of the advanced tricks of the library.

Footer
Since the footer only displays the Copyright notice, the code is considerably simpler:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package lookalive
 */

?>
        <div class="row bottom-line my-4">
            <div class="col-md-12 text-center">
            <p style="font-family: Georgia,Times,'Times New Roman',serif;font-size:24px;"><b>&copy; 2019 Maximiliano Goffman</b></p>
            </div>
        </div>
    </div><!-- #content -->

    <footer id="colophon" class="site-footer">
       
    </footer><!-- #colophon -->
</div><!-- #page -->

In fact, I deleted most of the code that came with underscores. Although hardcoding the text in the code isn’t the best practice, being a static text, I don’t think it’s that bad.

Sidebars
The sidebar will be optional. As a matter of fact, I’m going to define three possible optional areas. If the widget area has elements, then it’ll be displayed, if it doesn’t it won’t. The areas are defined in the functions.php file:

function add_widgets_init() {

    register_sidebar( array(
            'name'          => __( 'Before Main Area', 'lookalive' ),
            'id'            => 'before-main-widget-area',
            'description'   => __( 'Add widgets here.', 'lookalive' ),
            'before_widget' => '
    ', 'after_widget' => '

    ', 'before_title' => ' <h2 class="widget-title">', 'after_title' => '</h2> ', ) );
           
    register_sidebar( array(
            'name'          => __( 'After Main Area', 'lookalive' ),
            'id'            => 'after-main-widget-area',
            'description'   => __( 'Add widgets here.', 'lookalive' ),
            'before_widget' => '
    ', 'after_widget' => '

    ', 'before_title' => ' <h2 class="widget-title">', 'after_title' => '</h2> ', ) );
           
    register_sidebar( array(
            'name'          => __( 'Left Sidebar Area', 'lookalive' ),
            'id'            => 'left-sidebar-widget-area',
            'description'   => __( 'Add widgets here.', 'lookalive' ),
            'before_widget' => '
    ', 'after_widget' => '

    ', 'before_title' => ' <h2 class="widget-title">', 'after_title' => '</h2> ', ) );
}
add_action( 'widgets_init', 'add_widgets_init' );

The code that adds an area is really simple. For example, in sidebar.php there is one of them:

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package lookalive
 */

if ( is_active_sidebar( 'after-main-widget-area' ) ) { ?>
    <div class="row bottom-line">
        <div class="col-md-12 my-4">
            <?php dynamic_sidebar( 'after-main-widget-area' ); ?>
        </div>
    </div>
<?php } else {return;} ?>

If the specific area is active then it returns all its widgets.

Pag.: 1 2 3 4 5 6