CMS

Week 4 - Theorie/Praktijk

Creating a custom WP theme

Start from a fresh WP installation

Install a new WordPress
- https://slides.com/pietermathys/cms-w1p-1819#/
Then either
1. Follow along with the slides
2. Follow this tutorial
  - https://scanwp.net/blog/create-a-wordpress-starter-theme-from-scratch

Custom themes

Not that hard

You 'only need' 3 files

style.css

/*
Theme Name: ScanWP_starter
Theme URI: http://scanwp.net
Author: Avi Klein
Author URI: https://x2clickseo.com
Description: A clean starter theme based on Bootstrap
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: SASS, clean, bootstrap
Text Domain: ScanWP_starter
*

Theme is selectable!

Add a screenshot

Within our theme folder, we add a file called screenshot.png with the proportions of 880×660.

Add templates

header.php

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

footer.php

<footer id="footer">

      <?php dynamic_sidebar( 'footer_1' ); ?>

      <?php dynamic_sidebar( 'footer_2' ); ?>

      <?php dynamic_sidebar( 'footer_3' ); ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>

<h1><?php the_title(); ?></h1>

<?php get_footer(); ?>

index.php

Add functions

functions.php

<?php

function ScanWP_enqueue() {
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
    if($_SERVER['SERVER_NAME'] != 'localhost'){
      wp_enqueue_style('style', get_template_directory_uri() . '/style.min.css');
    } else{
      wp_enqueue_style('style', get_template_directory_uri() . '/style.css');
    }
    wp_enqueue_script( 'customjs', get_template_directory_uri() . '/assets/js/custom.min.js', array('jquery'), '', true );
    wp_enqueue_style('Montserrat', "https://fonts.googleapis.com/css?family=Montserrat:700|Montserrat:normal|Montserrat:300");
    wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
    wp_enqueue_script( 'bootstrapcdn', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('jquery'), '', true );
}
add_action('wp_enqueue_scripts', 'ScanWP_enqueue');

functions.php

wp_enqueue_style + wp_enqueue_script is a bit weird at first but it makes a lot of sense. Each script or css file you want to link to should be done from here.

The last line has a few more parameters: add the script with a jQuerydependency, do not add the WordPress version to the end of the link.
The last true is to add the script in the footer instead of header.

If you have any further questions about wp_enqueue you can read up about it in the WordPress codex.

functions.php

add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
    'header' => 'Custom Primary Menu',
  ) );
function ScanWP_widgets_init() {
  register_sidebar( array(
    'name'          => 'Footer 1',
    'id'            => 'footer_1',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="ttl">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'Footer 2',
    'id'            => 'footer_2',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="ttl">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'Footer 3',
    'id'            => 'footer_3',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="ttl">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'sidebar',
    'id'            => 'sidebar',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="ttl">',
    'after_title'   => '</h4>',
  ) );
}
add_action( 'widgets_init', 'ScanWP_widgets_init' );

functions.php

Adding the title tag option lets me remove it from the header.php and pull it from within WordPress.
Post thumbnails – just as it sounds. Enables the option to have thumbnails on every post on our site.
We can build as many navigation menus as we want, though we need to register them first. Here I added one to begin with.
The widgets is what wraps each widget you will add from within the admin.

index.php

Add a responsive menu

Download class file

Go to WP Bootstrap navwalker in Github and download the file called: class-wp-bootstrap-navwalker.php
Save it in the root of your themes
In your functions.php file add the following line:

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

nav.php

<nav class="navbar navbar-expand-md" role="navigation">
  <div class="container">
     <a class="navbar-brand" href="<?php echo site_url(); ?>">Brand</a>
  <!-- Brand and toggle get grouped for better mobile display -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
    ☰
  </button>
<?php
wp_nav_menu( array(
  'theme_location'  => 'header',
  'depth'            => 2, // 1 = no dropdowns, 2 = with dropdowns.
  'container'       => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id'    => 'bs-example-navbar-collapse-1',
  'menu_class'      => 'navbar-nav mr-auto',
  'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
  'walker'          => new WP_Bootstrap_Navwalker(),
) ); ?>
</div>
</nav>

add to header.php

<?php require "nav.php"; ?>

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php require "nav.php"; ?>

Meet the loop

index.php

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h1><?php the_title(); ?></h1>
  <?php the_content(); ?>
<?php endwhile;  endif;?>
<?php get_footer(); ?>

index.php

<?php get_header(); ?>
<main class="post-list">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article class="post">
            <?php the_post_thumbnail(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
            <a href="<?php the_permalink(); ?>">Read More</a>
        </article>
    <?php endwhile;  endif;?>
</main>
<?php get_footer(); ?>

More templates

There are a bunch of types of pages and layouts on sites. Some of these are:

404 template
An archive page
A category page
A post
A page

Creating a Post and Page Template

The post template is called single.php and the page is simply page.php

page.php

<?php get_header();  ?>
<div class="page">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <h3 class="page-title" id="page-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> </a> </h3>
            <?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

single.php

<?php get_header();  ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged()) echo ' firstpost';?>">
        <h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
        <p class="blogdate"> <?php the_time('F jS') ?>, <?php the_time('Y') ?></p>

        <div class="entrybody">
            <?php the_content(__('Read more'));?>

            <p class="blogcategory">Categories: <?php the_category(' &bull; '); ?></p>
            <p class="blogtags"><?php the_tags(); ?> </p>

            <?php edit_post_link(__('<strong>Edit</strong>'));?>
        </div>
    </div>

    <?php comments_template(); // Get comments.php template ?>
<?php endwhile; else: ?>
    <p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p>
<?php endif; ?>
<?php get_footer(); ?>

archive.php

category.php

<?php get_header();  ?>
<?php  the_archive_title( '<h1 class="archive-title">', '</h1>' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();?>

    <?php the_post_thumbnail(); ?>
    <?php the_title(); ?>
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>">Read More</a>
<?php endwhile;  endif;?>
<?php
the_posts_pagination(
    array(
        'prev_text' => '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        'next_text' => '<i class="fa fa-angle-right" aria-hidden="true"></i>',
    )
); ?>
<?php get_footer(); ?>

404.php

<?php get_header();  ?>
<section class="404">
    <insert witty 404 stuff/>
</section>
<?php get_footer(); ?>

More advanced template examples

Look at WordPress original themes:

twentyseventeen
twentysixteen
twentyfifteen

Docs

https://developer.wordpress.org/themes/template-files-section/

Original guide

https://scanwp.net/blog/create-a-wordpress-starter-theme-from-scratch/#row0

CMS1 W4 18-19

By Pieter Mathys

CMS1 W4 18-19

Creating a WP theme

1,330

Pieter Mathys

mathysp

CMS

Custom themes

Not that hard

You 'only need' 3 files

style.css

Theme is selectable!

Add a screenshot

Add templates

header.php

footer.php

index.php

index.php

Add functions

functions.php

functions.php

functions.php

functions.php

index.php

Add a responsive menu

Download class file

nav.php

add to header.php

Meet the loop

index.php

index.php

More templates

More templates

Creating a Post and Page Template

page.php

single.php

More advanced template examples

Docs

Original guide

CMS1 W4 18-19

More from Pieter Mathys