WordPress:

Theme: Humescores_css
Building Themes from Scratch with Underscores

Code Snippets

https://www.lynda.com/WordPress-tutorials/Welcome/491704/582699-4.html

Chapter 1: Set up the WP Environment

1.1 - Varijable

Varijable - colors


$color__skin: #002254; // Header etc

$color__background-body: #fff;
$color__background-screen: #f1f1f1;
$color__background-hr: #ccc;
$color__background-button: #e6e6e6;
$color__background-pre: #eee;
$color__background-ins: #fff9c0;

$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;
$color__link: royalblue;
$color__link-visited: purple;
$color__link-hover: midnightblue;
$color__text-main: #404040;

$color__border-button: #ccc #ccc #bbb;
$color__border-button-hover: #ccc #bbb #aaa;
$color__border-button-focus: #aaa #bbb #bbb;
$color__border-input: #ccc;
$color__border-abbr: #666;
                

Varijable - typography


$font__serif: 'PT Serif',Georgia,Cambria,"Times New Roman",Times,serif;
$font__sans: 'Source Sans Pro',"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
$font__pre: "Courier 10 Pitch", Courier, monospace;
$font__line-height-body: 1.5;
$font__line-height-pre: 1.6;
                

Varijable - Structure


$size__site-main: 100%;
$size__site-sidebar: 25%;

$query__small: 600px;
$query__medium: 900px;
                

Varijable - Variables-site


@import "colors";
@import "typography";
@import "structure";
                

1.4 - Install the Developer plugin and other useful plugin

Pluginovi za instaliranje

  • Developer
    • 1. Debug bar
    • 2. Monster widget
    • 3. Regenerate thumbnails
    • 4. Theme check
  • Show current template
  • W3 Total Cache

Odi na: Tools => Developer => Pod constants piše WP-DEBUG: NOT SET i prepravi na SET

Odi na

In wp-config.php:

                   
                      * @link https://codex.wordpress.org/Debugging_in_WordPress*/
						define('WP_DEBUG', true);

                   
                

Lynda:

https://www.lynda.com/WordPress-tutorials/Install-Developer-plugin-other-useful-plugins/491704/582707-4.html

Chapter 3: Set up the basic theme

3.1 - Configure the theme info

In style.css:


/*
Theme Name: Humescores
Theme URI: http://www.letibo.hr/
Author: Tihomir Kajgana
Author URI: http://www.tihomir-kajgana.iz.hr/
Description: Čarobna nova Humescores based tema
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: humescores
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Humescores is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
                

3.2 - Configure beseline settingsand functions

functions.php:


<?php
/**
 * Humescores functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Humescores
 */

if ( ! function_exists( 'humescores_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function humescores_setup() {
	/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on Humescores, use a find and replace
	 * to change 'humescores' to the name of your theme in all the template files.
	 */
	load_theme_textdomain( 'humescores', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
	 */
	add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'menu-1' => esc_html__( 'Primary', 'humescores' ),
	) );

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );

	// Set up the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'humescores_custom_background_args', array(
		'default-color' => 'ffffff',
		'default-image' => '',
	) ) );

	// Add theme support for selective refresh for widgets.
	add_theme_support( 'customize-selective-refresh-widgets' );

	/**
	 * Add support for core custom logo.
	 *
	 * @link https://codex.wordpress.org/Theme_Logo
	 */
	add_theme_support( 'custom-logo', array(
		'height'      => 250,
		'width'       => 250,
		'flex-width'  => true,
		'flex-height' => true,
	) );
}
endif;
add_action( 'after_setup_theme', 'humescores_setup' );

/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function humescores_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'humescores_content_width', 640 );
}
add_action( 'after_setup_theme', 'humescores_content_width', 0 );

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function humescores_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'humescores' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'humescores' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'humescores_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function humescores_scripts() {
	wp_enqueue_style( 'humescores-style', get_stylesheet_uri() );

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

	wp_enqueue_script( 'humescores-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

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

/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Functions which enhance the theme by hooking into WordPress.
 */
require get_template_directory() . '/inc/template-functions.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';


     

functions.php - step by step - plugabile function

If a child theme sets up a function called humescores_setup, then this if statement is triggered, and the parent theme function humescores_setup simply will not run. So it's a simple way to allow a child theme to take control over the theme.


if ( ! function_exists( 'humescores_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function humescores_setup() {
	/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on Humescores, use a find and replace
	 * to change 'humescores' to the name of your theme in all the template files.
	 */

functions.php - step by step - Text domain

Is used any time we want to translate the contents within a theme to a different language.


/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on Humescores, use a find and replace
	 * to change 'humescores' to the name of your theme in all the template files.
	 */
	load_theme_textdomain( 'humescores', get_template_directory() . '/languages' );

functions.php - step by step - Podrška za feed veze

Ne bi ih trebalo mijenjati.


// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

functions.php - step by step - Theme suport for post thumbnails

If you want to add featured image support in your theme, meaning someone can go to a post or a page and add a featured image to that post or page, this line of code needs to be in your theme setup.


/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
	 */
	add_theme_support( 'post-thumbnails' );

functions.php - step by step - NAVIGACIJA


// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'menu-1' => esc_html__( 'Primary', 'humescores' ),
	) );

functions.php - step by step - Podrška za HTML 5

Nije preporučljivo ukljanjanje i trebalo bi je imati u svojoj temi.


/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );

functions.php - step by step - Podrška za background

Administratoru web sučelja omogućuje postavljanje prilagođene boja pozadine i dodavanje prilagođene pozadinske slike. AKO NE ŽELITE DA VAM ADMIN UREĐUJE POZADINU, JEDNOSTAVBNO IZBRIŠITE FUNKCIJU.


// Set up the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'humescores_custom_background_args', array(
		'default-color' => 'ffffff',
		'default-image' => '',
	) ) );


Humescore_setup is hooked into the after setup theme action, so that means after the theme has been set up, all of these functions are run and Wordpress will work with all the content we've defined here. OVO JE NAKNADNO UBAČENO OD STRANE LYNDE. IDE ODMAH NAKON GORNJEG KODA TAKO KAKO JE NAPISAN.


}
endif;
add_action( 'after_setup_theme', 'humescores_setup' );

functions.php - step by step - Global setings

Todnosi se na sve što dolazi iz drugog izvora, na primjer, ako želite ugraditi YouTube videozapis u post ili stranicu. Sada, imajte na umu da se ovo ne odnosi na istaknute slike ili redovite slike ili bilo što drugo, odnosi se samo na sadržaj koji dolazi izvana


/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function humescores_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'humescores_content_width', 640 );
}
add_action( 'after_setup_theme', 'humescores_content_width', 0 );

functions.php - step by step - widget area

To add widgetized areas to Wordpress is still called Register Sidebar. In Underscores, we have one widgetized area that is called Sidebar and has the ID sidebar-1. The widgetized area wraps each of the widgets in a section with the ID of the widget and a class widget, and then the widget type. if the widget has a title, that widget title is in H2 with the class Widget Title.


/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function humescores_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'humescores' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'humescores' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'humescores_widgets_init' );

functions.php - step by step - enqueue scripts (add style sheets or javascripts to a Wordpress theme)

Any time you want to add style sheets or javascripts to a Wordpress theme, you want to enqueue this content rather than add it into the header or footer.


/**
 * Enqueue scripts and styles.
 */
function humescores_scripts() {
	wp_enqueue_style( 'humescores-style', get_stylesheet_uri() );

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

	wp_enqueue_script( 'humescores-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

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

This is so you can wrap those calls in conditional statements like you can see here, is_singular and comments_open and get_option threaded comments. That way you only load the stylesheets you need when they are needed and you only load the javascripts you need when they are needed. In addition, when you enqueue styles and scripts, you can make one script or one stylesheet dependent on another and create chains of different scripts or styles that are loaded into the page.

Enqueue scripts is such an important feature in Wordpress that we have a separate course that focuses only on enqueueing styles and scripts.



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

functions.php - step by step - Require statments

To simplify functions.php so it's not too big, so we've broken out large sections of functions.php into dedicated files.


/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Functions which enhance the theme by hooking into WordPress.
 */
require get_template_directory() . '/inc/template-functions.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

custom header-which contains all the code for custom header functionality.


/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

Template Tags that contains all the advanced functions for the template, things like meta content and other advanced functionality and this is also where we'll place most of our custom functions.


/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

Extract datoteka - that has extra functionality, like the function that alters the body element for different posts and pages. OVO NEMAM U ORGINALU KADA SE SKINE SA _s (DAKLE KOPIRAJ OVAJ KOD U functions.php).


/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

Customizer - so we can add additional functionality to the customizer


/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

Jetpack funcionality - file that adds support for some Jetpack functionality in case this site is using Jetpack.


/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';



3.3 - Uređivanje css datoteka - Moje

In style.css


/*--------------------------------------------------------------
>>> MOJ CSS - SADRŽAJ:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Ovdje treba neki naslov
--------------------------------------------------------------*/
@import "css/global.css";

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
@import "css/header.css";

/*--------------------------------------------------------------
# Menus
--------------------------------------------------------------*/
@import "css/menus.css";

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
@import "css/footer.css";

1. Napravi css folder u root folderu i poveži .css datoteke sa style.css datotekom.

3.4 - Enqueue and apply custom web fonts


Odi na:
google fonts!
Lynda

Sve što trebamo napraviti je: odabrati URL stylesheet-a i kopirati ga


https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Source+Sans+Pro:400,400i,600,900

In funtions.php


// Enqueue Google Fonts: Source Sans Pro and PT Serif
	wp_enqueue_style( 'humescores-fonts', 'https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Source+Sans+Pro:400,400i,600,900' );
                

Odemo u source code i tamo moramo u zaglavlju imati slijedeći kod:


font

In global.css:


/* CSS Document */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: 'PT Serif', Georgia, Cambria, "Times New Roman", Times, serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Source Sans Pro',"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
}
                

3.5 - Allow translators to control web fonts


IPAK OVO PROĐI SA TUTORIALOM Lynda


Ako postoji mogućnost da se neka tema prevede, trebamo dati prevoditelju priliku da isključimo font, ako ne podržava znakove na prevedenom jeziku.

KOristićemo se sa kodom iz teme: twentyseventeen. U functions.php odabrat ćemo slijedeći kod.


/**
 * Register custom fonts.
 */
function twentyseventeen_fonts_url() {
	$fonts_url = '';

	/*
	 * Translators: If there are characters in your language that are not
	 * supported by Libre Franklin, translate this to 'off'. Do not translate
	 * into your own language.
	 */
	$libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );

	if ( 'off' !== $libre_franklin ) {
		$font_families = array();

		$font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';

		$query_args = array(
			'family' => urlencode( implode( '|', $font_families ) ),
			'subset' => urlencode( 'latin,latin-ext' ),
		);

		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
	}

	return esc_url_raw( $fonts_url );
}
                

In funtions.php - odmah poslije - PODRŠKE ZA BACKGROUND ("humescore setup") ubaci slijedeći kod.

PROMJENI NAZIV - TAMO GDJE PIŠE HUMESCORE UNESI NAZIV VAŽEĆE TEME - U programu NET BEans - CTRL + H i Replace All.


 



/**
 * Register custom fonts.
 */
function humescores_fonts_url() {
	$fonts_url = '';

	/**
	 * Translators: If there are characters in your language that are not
	 * supported by Source Sans Pro and PT Serif, translate this to 'off'. Do not translate
	 * into your own language.
	 */
	$source_sans_pro = _x( 'on', 'Source Sans Pro font: on or off', 'humescores' );
	$pt_serif = _x( 'on', 'PT Serif font: on or off', 'humescores' );

	$font_families = array();
	
	if ( 'off' !== $source_sans_pro ) {
		$font_families[] = 'Source Sans Pro:400,400i,700,900';
	}
	
	if ( 'off' !== $pt_serif ) {
		$font_families[] = 'PT Serif:400,400i,700,700i';
	}
	
	
	if ( in_array( 'on', array($source_sans_pro, $pt_serif) ) ) {

		$query_args = array(
			'family' => urlencode( implode( '|', $font_families ) ),
			'subset' => urlencode( 'latin,latin-ext' ),
		);

		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
	}

	return esc_url_raw( $fonts_url );
}
                

In fuctions.php - kopiraj:


humescores_fonts_url()
                

In fuctions.php - i zamjeni:


'https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Source+Sans+Pro:400,400i,600,900' );
                

In fuctions.php - Tako da dobiješ:


// Enqueue Google Fonts: Source Sans Pro and PT Serif
	wp_enqueue_style( 'humescores-fonts', humescores_fonts_url() );
                

3.6 - Precconect custom web fonts for improve performance

WP Resource Hints

Ona upućuje preglednik da postoje neki resursi koji bi se trebali prvi dohvatiti.

posudit ćemo kod od teme twentyseventeen


/**
 * Add preconnect for Google Fonts.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param array  $urls           URLs to print for resource hints.
 * @param string $relation_type  The relation type the URLs are printed.
 * @return array $urls           URLs to print for resource hints.
 */
function twentyseventeen_resource_hints( $urls, $relation_type ) {
	if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
		$urls[] = array(
			'href' => 'https://fonts.gstatic.com',
			'crossorigin',
		);
	}

	return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Zalijepit ćemo ga odmah ispod gornje točke (3.5 - Allow translators to control web fonts), ako radim u NetBeansu, stisni Ctrl + h i Twenty seventeen zamjeni sa nazivom teme (humescores) => Replace all.

3.7 - Create Responsive Typography


I want the fonts to be slightly smaller on smaller screens and then larger on larger screens.

In style.css


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: sans-serif;
	/* [disabled]font-size: 16px; */
	/* [disabled]font-size: 1rem; */
	line-height: 1.5;
}

In global.css


/* CSS Document */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: 'PT Serif', Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: 20px;
	font-size: 1.25rem;	
}
@media screen and (max-width: 700px){
	body {
		font-size: 16px;
	    font-size: 1rem;
		}
	}

A sada za naslove

Odi u global.css


h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.6em;
}

h3 {
	font-size: 2.2em;
}

h4 {
	font-size: 2em;
}

h5 {
	font-size: 1.8em;
}

h6 {
	font-size: 1.6em;
}

3.8 - Lay the groundwork for responsive layouts


U ovom primjeru želimo da header i footer budu full width. Znaći želimo de se ove "Responsive značajke" odnose samo na sadržaj u sredini.

In global.css


/*--------------------------------------------------------------
Global layout
--------------------------------------------------------------*/
.site-content{
	padding: 1em;
	}
@media screen and (min-width: 600px) {
    .site-content {
        padding: 2em;
    }
}

Chapter 4: Build the Header

4.1 - Style the Default Header

 

Lynda

 

Ako trebamo pretvoriti scss u css odemo na ovaj link

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 Humescores
 */

?>
<!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="http://gmpg.org/xfn/11">

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

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'humescores' ); ?></a>/*   <= Skip to content link   */

	<header id="masthead" class="site-header">
		<div class="site-branding">
			<?php
			the_custom_logo();
			if ( is_front_page() && is_home() ) : ?>
				<h1 class="site-title"<<a href="<?php echo esc_url( home_url( '/' ) ); ?<" rel="home"<<?php bloginfo( 'name' ); ?<</a<</h1<
			<?php else : ?>
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
			<?php
			endif;

			$description = get_bloginfo( 'description', 'display' );
			if ( $description || is_customize_preview() ) : ?>
				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
			<?php
			endif; ?>
		</div>

		<nav id="site-navigation" class="main-navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'humescores' ); ?></button>
			<?php
				wp_nav_menu( array(
					'theme_location' => 'menu-1',
					'menu_id'        => 'primary-menu',
				) );
			?>
		</nav>
	</header>

	<div id="content" class="site-content"<                
                

Alright, here's what I want to do. Apply a background color to the entire header, then restyle the site title and tagline and then finally float the site title and tagline to the left and the menu to the right using Flexbox.

In header.css:


.site-header {
	position: relative;
	padding: 1em;
	font-family: 'Source Sans Pro',"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
	color: #fff;
	background-color: #002254;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 1em 2em;
	}
}

.site-branding {
	min-height: 65px;
}

.site-title {
	margin: 0;
	padding: 0;
	font-size: 1.6em;
	font-weight: 900;
	line-height: 1em;
}

.site-title a {
	color: white;
	text-decoration: none;
}

.site-title a:hover, .site-title a:focus {
	text-decoration: underline;
}

.site-description {
	margin: 0;
	font-size: .9em;
	font-style: italic;
	font-weight: 100;
}
                

AKO ŽELIMO PREBACITI SADRŽAJ NAVIGACIJE UDESNO - The only thing we need to do to finalize this is to make sure the menu falls to the right hand side. And we can do that using Flexbox. So all I have to do is find out which container holds both the site branding and the navigation. That is site header - Then I apply flex to the site header, so display, flex

In header.css:


@media screen and (min-width: 900px) {
	.site-header {
		padding: 1em 2em;
		display: flex;
	}
.site-branding {
	min-height: 65px;
	justify-content: space between;
}

}
.site-branding{
	width:35%;
	}
.site-navigation{
	width: 55%;
	}
              

4.2 - Add an optional header image


So in this movie we'll do three things. First, we'll change the settings so that we get the right size image. Then we'll hook the image into our theme so it's actually being displayed. And then we'll apply the necessary styling to make it work the way we want to.

Kod - inc/custom-header.php


<?php
/**
 * Sample implementation of the Custom Header feature
 *
 * You can add an optional custom header image to header.php like so ...
 *
	<?php the_header_image_tag(); ?>
 *
 * @link https://developer.wordpress.org/themes/functionality/custom-headers/
 *
 * @package Humescores
 */

/**
 * Set up the WordPress core custom header feature.
 *
 * @uses humescores_header_style()
 */
function humescores_custom_header_setup() {
	add_theme_support( 'custom-header', apply_filters( 'humescores_custom_header_args', array(
		'default-image'          => '',
		'default-text-color'     => '000000',
		'width'                  => 1000,
		'height'                 => 250,
		'flex-height'            => true,
		'wp-head-callback'       => 'humescores_header_style',
	) ) );
}
add_action( 'after_setup_theme', 'humescores_custom_header_setup' );

if ( ! function_exists( 'humescores_header_style' ) ) :
/**
 * Styles the header image and text displayed on the blog.
 *
 * @see humescores_custom_header_setup().
 */
function humescores_header_style() {
	$header_text_color = get_header_textcolor();

	/*
	 * If no custom options for text are set, let's bail.
	 * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ).
	 */
	if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
		return;
	}

	// If we get this far, we have custom styles. Let's do this.
	?>
	<style type="text/css">
	<?php
		// Has the text been hidden?
		if ( ! display_header_text() ) :
	?>
		.site-title,
		.site-description {
			position: absolute;
			clip: rect(1px, 1px, 1px, 1px);
		}
	<?php
		// If the user has set a custom color for the text use that.
		else :
	?>
		.site-title a,
		.site-description {
			color: #<?php echo esc_attr( $header_text_color ); ?>;
		}
	<?php endif; ?>
	</style>
	<?php
}
endif;
                

In inc/custom-header.php


function humescores_custom_header_setup() {
	add_theme_support( 'custom-header', apply_filters( 'humescores_custom_header_args', array(
		'default-image'          => '',
		'default-text-color'     => 'ffffff',
		'width'                  => 2000,
		'height'                 => 850,
		'flex-height'            => true,
		'wp-head-callback'       => 'humescores_header_style',
	) ) );
}
                

In header.php - Kopirani kod sa custom-header.php (ubačeno u <figure>)


</head>

<body >
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'humescores' ); ?></a>
        <figure class="header-image"><?php the_header_image_tag(); ?></figure>
	<header id="masthead" class="site-header">
                

So the first thing I want to do is get rid of the margin or padding or whatever is at the top here and at the bottom of header image.

In styles.css pod "elements" izmjeni na:


figure {
	margin: 0; /* Extra wide images within figure tags don't overflow the content area. */
}
                

The next thing I want to do is make sure the image is displayed as a block level element because you see right now we have that little weird space under the image. That's because the image is currently in line so I just go down here and say display block you'll see this space goes away.

In header.css - na sam vrh


.header-image img {
	display: block;
	width: 100vw;
}
                

And then finally, I'll limit the total height of the header image because right now, if you look in the browser, you'll see, because it's a giant image, if you come at it with a giant screen, then you don't see any of the contents. I want to limit this height to maybe 65% or 60% of the total height, of the current view port, so I'll say for header-image max height is 60vh and then set the overflow to hidden so that it just cuts off the image.

In header.css - sada ovo ide u prvi redak


.header-image {
	max-height: 60vh;
	overflow: hidden;
}
                

4.3 - Show the header image only on the front page


Lynda

so how do I go about changing that so I only display the header image on the front page and nowhere else. Here we can use one of two conditional statements. The first conditional statement is is_front_page. This conditional asks are we on the main URL for the site right now, so on the root URL of the site. If we are, then this function passes true. If not, it passes false.

The other function is is_home. This function tests whether we are currently on the blog home page, so that means the index page. If you go into WordPress settings and you change what is displayed on the front page, is_home will return true only when you're on the blog index. So if you relegate the blog index to a separate page, this returns true when you're on that blog index.

In header.php samo dodamo:


                

<?php if ( get_header_image() && is_front_page() ) : ?>
(neki kod)
<?php endif; // End header image check. ?>
                

In header.php - prošireno to izgleda ovako:


                
<?php if ( get_header_image() && is_front_page() ) : ?>
<figure class="header-image"><?php the_header_image_tag(); ?></figure><!-- .header-image -->
<?php endif; // End header image check. ?>

4.4 - Add an optional custom logo to the header


https://www.lynda.com/WordPress-tutorials/Add-optional-custom-logo-header/491704/582729-4.html?autoplay=true


Add a custom logo feature to your theme. To do that, you have to first activate it on the back end, then tell the theme where you want it to display the custom logo, and finally, add styles to it.

In funtions.php


// Add theme support for Custom Logo
	add_theme_support( 'custom-logo', array(
		'width' => 90,
		'height' => 90,
		'flex-width' => true,
	));
	
}
endif;
add_action( 'after_setup_theme', 'humescores_setup' );
                

U postojećoj temi _s već ima kod za uređivanje logo-a tako da ne treba ubacivati ovaj kod. Ukoliko ga nema ubaci gornji kod odmah ispod "Setup the wp core custom background feature" područja.


Then I'll go to header.php and find where I want the logo to appear. So scrolling down, I want it to appear inside site branding, before the site title and tagline. So I'll add in php. And then, to display the custom logo, I simply call the_custom_logo. In my php delimiter, save header.php.

In header.php


<?php the_custom_logo(); ?>
                

Here I'm working inside the site branding section. So I'll add some space inside site branding. Then I'll call for custom-logo-link. Here I first want to add some styles to the image, so I'll nest an image inside and say display: block;, 'cause it's an image and I want it to display as a block-level element. I will set the height to 65 pixels. This is the same as the min height for the site branding.

I'll set the width to auto just in case something goes wrong and the image will be stretched.

In header.css ubaci


.custom-logo-link img {
	display: block;
	height: 65px;
	width: auto;
}
                

The next step is to change the layout. So here's what I want to happen. The image should appear on the left-hand side, then the site title and tagline should float up next to it. And if we have both a site title and tagline, they should be centered according to the height of the image. If we only have a site title, it should be still center. So that means we need to use Flex Box. That's the easiest way of doing it. However, we can simply apply flex to site branding, because we have three elements. We have the image, then we have the site title, and then we have the site description. So to make this work, I need to wrap site title and site description in a container so that I can put the image next to that container. And then within that container I'll have site title and site description.


Back in header.php, I'll wrap that container around all of this content. So directly after the custom logo, I'll put in a new container, give it to class site-branding_text.

In header.php


<div class="site-branding__text">
			<?php
			if ( is_front_page() && is_home() ) : ?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<?php else : ?>
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
			<?php
			endif;

			$description = get_bloginfo( 'description', 'display' );
			if ( $description || is_customize_preview() ) : ?>
				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
			<?php
			endif; ?>
</div>
                

In header.css - na kraju poglavlja


.header-image {
	max-height: 60vh;
	overflow: hidden;
}

.header-image img {
	display: block;
	width: 100vw;
}

.site-header {
	position: relative;
	padding: 1em;
	font-family: 'Source Sans Pro',"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
	color: #fff;
	background-color: #002254;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 1em 2em;
	}
}

.site-branding {
	display: flex;
	min-height: 65px;
}

.custom-logo-link {
	margin-right: 1em;
}

.custom-logo-link img {
	display: block;
	height: 65px;
	width: auto;
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 65px;
}

.site-title {
	margin: 0;
	padding: 0;
	font-size: 1.6em;
	font-weight: 900;
	line-height: 1em;
}

.site-title a {
	color: white;
	text-decoration: none;
}

.site-title a:hover, .site-title a:focus {
	text-decoration: underline;
}

.site-description {
	margin: 0;
	font-size: .9em;
	font-style: italic;
	font-weight: 100;
}

@media screen and (min-width: 900px) {
	.site-header {
		display: flex;
		justify-content: space-between;
	}

	.site-branding {
		width: 35%;
	}

	.site-navigation {
		width: 55%;
	}
}
                

4.5 - Fix responsive problems in the header

Lynda

there's still a small problem we need to fix. If I got to the responsive preview, and reduce the width of the screen, you'll notice that the site branding here is getting squished.

That's because right now, the entire header is a Flexbox and we haven't told the Flexbox anything about how to handle the elements within. We've just said that I want the site branding to take up 35%, and the menu to take up 55%.

To fix this, we need to tell the Flexbox not to shrink the site branding element.

To ćemo napraviti tako da dodamo u .site-branding, element => flex: 1 0 auto;

In header.css


.site-branding {
		width: 35%;
        flex: 1 0 auto;
	}
                

But, there's still one more problem. If I reduce the width, you'll see right now the menu starts to wrap once there's not enough space for it. But I actually want the menu to drop down below the site branding when that happens. And technically I should be able to do that by simply grabbing the Flexbox container which is 'site-header', and then just setting 'flex-wrap' to 'wrap'.

The problem is, when I do this, no matter how wide the screen is, the menu never jumps back on top again. The problem is, when I do this, no matter how wide the screen is, the menu never jumps back on top again.

So, we have the two we know about, 'site-branding' and 'site-navigation'. But then there's two additional ones. There's a 'before' pseudo-element and an 'after' pseudo-element. Now, these are default styles and underscores and they're there for specific reasons, to clear floats.

What I mean by that is, if you create a layout that puts, floats some content to the left and other content to the right, you need to clear the boxes so that you don't get overlap of content. This is the old way of doing things and it does not work well with Flexbox, especially not if you justify content. So, what we need to do is remove the clearing, specifically for the site-header.

Dakle odemo u header.css => CLEARINGS i obrišemo: .site-header:before, .site-header:after,


.site-header:before,
.site-header:after,

.site-header:after,

Chapter 5: Create Menus

5.1 - How to register and display menu

5.2 - Styling the Menu

In style.css


/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.main-navigation {
    position: relative;
    float: left;
    width: 100%;
    display: block;
    clear: both;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    background: #313131;
    background: hsl(0, 0%, 19%);
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    padding: 1.3em 1em;
    font-size: 14px;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 1.3em;
    color: white;
    color: hsl(0, 0%, 100%);
}
.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
    background: #313131;
    background: hsl(0, 0%, 19%);
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
    background: white;
    color: #313131;
    color: hsl(0, 0%, 19%);
}

.main-navigation .current_page_ancestor {
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #313131;
    background: hsl(0, 0%, 19%);
} 
                

5.3 - Using SuperFish for Accessible Menus

In functions.php


wp_enqueue_script( 'my-simone-superfish', get_template_directory_uri() . '/js/superfish.min.js', array('jquery'), '20140328', true );
                

In js/superfish-settings.js


/* 
 * Custom Superfish settings
 */

jQuery(document).ready(function($){
    var sf = $('ul.nav-menu');
    sf.superfish({
        delay: 200,
        speed: 'fast'
    });
});
                

In functions.php


wp_enqueue_script( 'my-simone-superfish-settings', get_template_directory_uri() . '/js/superfish-settings.js', array('my-simone-superfish'), '20140328', true );
                

5.4 - Making the Menu Responsive

In style.css


@media screen and (max-width: 600px) {
	.menu-toggle {
            display: block;
            height: 3.75em;
            padding: 0 1em;
            font-weight: normal;
            font-size: 14px;
            font-size: 1.4rem;
            text-decoration: none;
            line-height: 3.75em;
            color: white;
	}
        
	.main-navigation.toggled .nav-menu {
		display: block;
		border-top: 1px solid;
		border-top-color: #fff;
		border-top-color: hsla(0, 0%, 100%, .5);
	}

	.main-navigation ul {
            display: none;
            padding-left: 0;
	}
        
	.main-navigation li { 
		float: none; 
	}

	.main-navigation li a { 
		padding: 1.3em 2em; 
	}

	.main-navigation li li a { 
		padding-left: 4em; 
	}

	.main-navigation li li li a { 
		padding-left: 6em; 
	}

	.main-navigation li:hover > a {
		background: #313131;
		background: hsl(0, 0%, 19%);
	}
	
	.main-navigation ul ul,
	.main-navigation ul ul ul {
		position: relative;
		top: inherit;
		left: 0;
		display: block;
		float: none;
		background: #313131;
		background: hsl(0, 0%, 19%);
	}
	
	.main-navigation ul ul a { width: 100%; }

	.main-navigation ul a:hover,
	.main-navigation ul ul a:hover {
		background: #4d4d4d;
		background: hsl(0, 0%, 30%);
	}

	.main-navigation .current_page_ancestor { background: inherit; }

	.main-navigation ul ul .current_page_parent {
		color: inherit;
		background: inherit;
	}

	.main-navigation .current_page_item > a,
	.main-navigation .current_page_item > a:hover,
	.main-navigation .current_page_item li:hover,
	.main-navigation .current_page_parent .current_page_item > a  {
		color: #fff;
		color: hsl(0, 0%, 100%);
		background: #4d4d4d;
		background: hsl(0, 0%, 30%);    
	}
        
} // End responsive menu
                

In js/superfish-settings.js


/* 
 * Custom Responsive Superfish settings
 */

jQuery(document).ready(function($){
	var breakpoint = 600;
    var sf = $('ul.nav-menu');
	
    if($(document).width() >= breakpoint){
        sf.superfish({
            delay: 200,
            speed: 'fast'
        });
    }
	
    $(window).resize(function(){
        if($(document).width() >= breakpoint & !sf.hasClass('sf-js-enabled')){
            sf.superfish({
                delay: 200,
                speed: 'fast'
            });
        } else if($(document).width() < breakpoint) {
            sf.superfish('destroy');
        }
    });
});
                

5.5 - Creating a Custom Social Media Menu

In functions.php


'social' => __( 'Social Menu', 'my-simone'),
                

In inc/template-tags.php


/*
 * Social media icon menu as per http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2
 */

function my_simone_social_menu() {
    if ( has_nav_menu( 'social' ) ) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'fallback_cb'     => '',
		)
	);
    }
}
                

In header.php


<?php my_simone_social_menu(); ?>
				

5.6 - Styling the menu with icons from FontAwesome

In style.css


/* Social Menu */

.menu-social ul {
    float: right;
    text-align: center;
    list-style: none;    
}

.menu-social ul li {
    position: relative;
    display:  inline-block;    
}

.menu-social li a:before {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    font-family: 'Fontawesome';
    font-size: 20px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    content: '\f0c0';
}

.menu-social li a[href*="facebook.com"]::before { content: '\f09a'; }

.menu-social li a[href*="twitter.com"]::before { content: '\f099'; }

.menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; }

.menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }

.menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }

.menu-social li a[href*="github.com"]::before { content: '\f09b'; }

.menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }

.menu-social li a[href*="youtube.com"]::before { content: '\f167'; }

.menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }

.menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }

.menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }

.menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }
                    
@media screen and (max-width: 600px) {
    #menu-social ul {
	    position: absolute;
        top: 0;
        right: 6rem;
        display: block;
    }
    
    #menu-social li a { 
        padding-left:.5em;
        padding-right: .5em;
    }
}
                

In inc/template-tags.php


function my_simone_social_menu() {
    if ( has_nav_menu( 'social' ) ) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'link_before'     => '<span class="screen-reader-text">',
			'link_after'      => '</span>',
			'fallback_cb'     => '',
		)
	);
    }
}
                

Chapter 6: Adding a Custom Search Form

6.1 - Adding the search form

In header.php


<div id="search-container" class="search-box-wrapper clear">
    <div class="search-box clear">
        <?php get_search_form(); ?>
    </div>
</div> 
                

In style.css

                    
/* Header search */

input[type="search"] {
    box-sizing: border-box;
    width: 100%;
}

.search-box-wrapper {
    z-index: 2;
    width: 100%;
}

.search-box {
    padding: 1em;
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.search-box .search-field {
    max-width: 362px;
    float: right;
    padding: 1rem 2rem 1rem 4rem;
    font-size: 20px;
    font-size: 2rem;
    background-color: #fff;
    border: 0;
}

.error404 .search-submit,
.search .search-submit,
.search-box .search-submit { 
    display: none; 
}
                

6.2 - Adding the search icon

In header.php


<div class="search-toggle">
    <i class="fa fa-search"></i>
    <a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'my-simone' ); ?></a>
</div>
                

In style.css


.search-toggle {
    float: right;
    width: 54px;
    height: 54px;
    padding: 12px;
    margin-right: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.search-toggle:hover,
.search-toggle.active {
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

@media screen and (max-width: 600px) {
    .search-toggle {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 0;
    }
}
                

6.3 - Adding show/hide functionality to the search form with jQuery

In js/hide-search.js


/* 
 * Toggles search on and off
 */
jQuery(document).ready(function($){
    $(".search-toggle").click(function(){
        $("#search-container").slideToggle('slow', function(){
            $('.search-toggle').toggleClass('active');
        });
        // Optional return false to avoid the page "jumping" when clicked
        return false;
    });
});
                

In functions.php


wp_enqueue_script( 'my-simone-hide-search', get_template_directory_uri() . '/js/hide-search.js', array(), '20140404', true );
                

In style.css


.search-box-wrapper {
    z-index: 2;
    width: 100%;
    display: none;
}
                

Chapter 7: Working with Widgetized Areas

7.1 - Adding a widgetized area to the footer

In functions.php


register_sidebar( array(
    'name'          => __( 'Footer Widgets', 'my-simone' ),
    'description'   => __( 'Footer widgets area appears in the footer of the site.', 'my-simone' ),
    'id'            => 'sidebar-2',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );
                

In sidebar-footer.php


<?php
/**
 * The footer sidebar
 *
 */

if ( ! is_active_sidebar( 'sidebar-2' ) ) {
	return;
}
?>

<div id="supplementary">
	<div id="footer-widgets" class="footer-widgets widget-area clear" role="complementary">
		<?php dynamic_sidebar( 'sidebar-2' ); ?>
	</div><!-- #footer-sidebar -->
</div><!-- #supplementary -->
                

In footer.php


<?php get_sidebar( 'footer' ); ?>
                

7.3 - Styling the footer

In style.css


/*--------------------------------------------------------------
 Footer
--------------------------------------------------------------*/

.site-footer {
    padding: 2em;
    font-family: 'Lato';
    font-size: 16px;
    font-size: 1.6rem;
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.site-footer a {
    color: #fff;
    color: hsl(0, 0%, 100%);
}

.site-info { 
    text-align: center; 
}
                

7.4 - General Widget Styling

In style.css


/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 4em;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}

.widget-title {
    margin-bottom: 1em;    
    font-size: 24px;
    font-size: 2.4rem;
    border-bottom: 2px solid #000;    
}

.widget a {
    font-weight: 700;
    color: #000;
    color: hsl(0, 0%, 0%);
}

.widget ul,
.widget ol {
    padding: 0;
    margin: -1em 0 0;
    list-style-type: none;
}

.widget li { padding: 1em 0 0; }

.widget li ul,
.widget li ol { margin-top: 0; }

.widget li li { margin-left: 1.5em; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}

.footer-widgets { margin: 0 auto; }

.footer-widgets .widget-title,
.footer-widgets .widget a:hover {
    color: #fff;
    color: hsl(0, 0%, 100%);
    border-color: #fff;
    border-color: hsl(0, 0%, 100%);
}

.footer-widgets .widget {
    float: left;
    width: 320px;
    margin: 0 4rem 8rem 4rem;
}
                

7.5 - Adding custom styles to specific widgets

In style.css


.widget_recent_entries li:before,
.widget_recent_comments li:before,
.widget_archive li:before {
    display: block;
    float: left;
    padding-top: 2px;
    margin-left: -2.5em;
    font-family: 'fontawesome';
    font-size: 14px;
    font-size: 1.4rem;
} 

.widget_recent_entries li,
.widget_recent_comments li { margin: 0 0 .5em 2.5em; }

.widget_recent_entries li:before { content: "\f036"; }

.widget_recent_comments li:before { content: "\f075"; }

.widget_archive li { margin: 0 0 0 2.5em; }

.widget_archive li:before { content: "\f187"; }

.widget_nav_menu a,
.widget_pages a {
    display: block;
    padding: 1em 0;
    border-bottom: solid 1px hsl(0, 0%, 90%);
}

.widget_nav_menu li,
.widget_pages li { padding-top: 0; }

.widget_rss li { margin-bottom: .5em; }

.widget_rss .rss-date,
.widget_rss cite {
    display: block;
    font-size: 85%;
}
                

7.6 - Using Masonry to make footer widgets responsive

Simple Masonry in js/masonry-settings.js


// Masonry settings to organize footer widgets
jQuery(document).ready(function($){
   $('#footer-widgets').masonry({
       columnWidth: 400,
       itemSelector: '.widget',
       isFitWidth: true,
       isAnimated: true
   }); 
});
                

In functions.php


wp_enqueue_script( 'my-simone-masonry', get_template_directory_uri() . '/js/masonry-settings.js', array('masonry'), '20140401', true );
                

Advanced responsive Masonry in js/masonry-settings.js


// Masonry settings to organize footer widgets
jQuery(document).ready(function($){
    var $container = $('#footer-widgets');
    var $masonryOn;
    var $columnWidth = 400;
    
    if ($(document).width() > 879) {;
        $masonryOn = true;
        runMasonry();
    };

    $(window).resize( function() {
        if ($(document).width() < 879) {
            if ($masonryOn){
                $container.masonry('destroy');
                $masonryOn = false;
            }

        } else {
            $masonryOn = true;
            runMasonry();
        }
    });
    
    function runMasonry() {
        // initialize
        $container.masonry({
            columnWidth: $columnWidth,
            itemSelector: '.widget',
            isFitWidth: true,
            isAnimated: true
        });
    };
    
});
                

In style.css


/* Footer widgets responsive */
@media screen and (max-width: 879px) {
    #footer-widgets { width: 100%!important; }
    
    .footer-widgets .widget {
        float: none;
        width: 100%;
        margin: 0 0 8rem;
    }
}
                

Chapter 8: The Single Post Template

8.1 - Changing the Single Post Template Content Structure

In content-single.php


<?php
    /* translators: used between list items, there is a space after the comma */
    $category_list = get_the_category_list( __( ', ', 'my-simone' ) );

    if ( my_simone_categorized_blog() ) {
        echo '<div class="category-list">' . $category_list . '</div>';
    }
?>
                

In content-single.php


<?php
    echo get_the_tag_list( '<ul><li><i class="fa fa-tag"></i>', '</li><li><i class="fa fa-tag"></i>', '</li></ul>' );
?>
                

8.2 - Changing the output of meta elements

In inc/template-tags.php


printf( __( '<span class="byline">Written by %1$s</span><span class="posted-on">%2$s</span>', 'my-simone' ),
    sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s">%2$s</a></span>',
        esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
        esc_html( get_the_author() )
    ),
        sprintf( '<a href="%1$s" rel="bookmark">%2$s</a>',
        esc_url( get_permalink() ),
        $time_string
    )
);
                

In content-single.php


<?php 
    if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) { 
        echo '<span class="comments-link">';
        comments_popup_link( __( 'Leave a comment', 'my-simone' ), __( '1 Comment', 'my-simone' ), __( '% Comments', 'my-simone' ) );
        echo '</span>';
    }
?>
                

8.3 - Styling the single post template

In layouts/content-sidebar.css


.site-content {
    padding-bottom: 4em;
    background: #b2b2b2;
}
.single .site-content,
.page .site-content { 
    background: #fff; 
    background: hsl(0, 0%, 100%);
}
                

In style.css


/* Typography */
.entry-title {
    margin: 0 0 2rem;
    font-weight: 900;
    font-size: 40px;
    font-size: 4rem;
    line-height: 1.3em;
    color: #000;
    color: hsl(0, 0%, 0%);
}

.entry-content a { 
    text-decoration: underline; 
}
                    
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { margin-bottom: .4em; }

.entry-content h1 {
    font-size: 32px;
    font-size: 3.2rem;
}

.entry-content h2 {
    font-size: 30px;
    font-size: 3.0rem;
}

.entry-content h3 {
    font-size: 28px;
    font-size: 2.8rem;
}

.entry-content h4 {
    font-size: 26px;
    font-size: 2.6rem;
}

.entry-content h5 {
    font-size: 24px;
    font-size: 2.4rem;
}

.entry-content h6 {
    font-size: 22px;
    font-size: 2.2rem;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.6em;
}

.entry-content blockquote p {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.5em;
}

/* Smaller fonts for smaller screens */
@media screen and (max-width: 680px) {
    .entry-title {
        font-size: 32px;
        font-size: 3.2rem;
        line-height: 1.3em;
    }
    .entry-content h1 {
        font-size: 28px;
        font-size: 2.8rem;
    }

    .entry-content h2 {
        font-size: 26px;
        font-size: 2.6rem;
    }

    .entry-content h3 {
        font-size: 24px;
        font-size: 2.4rem;
    }

    .entry-content h4 {
        font-size: 22px;
        font-size: 2.2rem;
    }

    .entry-content h5 {
        font-size: 20px;
        font-size: 2rem;
    }

    .entry-content h6 {
        font-size: 18px;
        font-size: 1.8rem;
    }

    .entry-content p,
    .entry-content ul,
    .entry-content ol  {
        font-size: 18px;
        font-size: 1.8rem;
    }
    
    .entry-content blockquote p {
        font-size: 22px;
        font-size: 2.2rem;
        line-height: 1.5em;
    }
}

/* Meta */
.category-list {
    margin: 1.3em 0 1em;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}

.category-list a {
    color: #333;
    color: hsl(0, 0%, 10%);
}

.category-list a:hover {
    color: #000;
    color: hsl(0, 0%, 0%);
}

.entry-meta {
    margin-bottom: 2rem;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
}

.entry-meta a { font-weight: 600; }

.entry-footer {
    margin-top: 3rem;
    margin-bottom: 5rem;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2em;
}

.entry-footer ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.entry-footer li {
    display: inline-block;
    margin-right: 4rem;
}

.entry-footer a {
    margin-left: .5rem;
}
                

8.4 - Making post meta responsive

In style.css


@media screen and (min-width: 1320px){
    .single .entry-meta {
        width: 120px;
        margin-left: -160px;
        float: left;
        text-align: right;
    }
    
    .single .byline,
    .single .posted-on {
        display: block;
        margin-bottom: 1em;
    }
}
@media screen and (max-width: 1319px){
    .posted-on:before {
        content: ' on ';
    }
    .posted-on:after {
        content: '.';
    }
}
                

8.5 - Styling blockquotes

In style.css


/* Blockquotes */
blockquote {
    padding: 1em 1.5em 0;
    margin-bottom: 1em;
    font-style: italic;
    border-top: solid 1px hsl(0, 0%, 80%);
    border-bottom: solid 1px hsl(0, 0%, 80%);
}

blockquote em { 
    font-style: normal; 
}

blockquote cite {
    display: block;
    margin-top: 1em;
    margin-left: 40%;
    font-size: 18px;
    font-size: 1.8rem;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    line-height: 1.5em;
    text-align: right;
}

blockquote.alignleft {
    width: 50%;
    float: left;
    padding: 1em 0 0;
    margin-right: 2em;
}

blockquote.alignright {
    width: 50%;
    float: right;
    padding: 1em 0 0;
    margin-left: 2em;
}

/* Blockquotes responsive */
/* Optional rules that set blockquotes to full width on smaller screens */
@media screen and (max-width: 780px) {
    blockquote.alignleft,
    blockquote.alignright { width: 40%; }
}

@media screen and (max-width:600px) {
    blockquote.alignleft,
    blockquote.alignright {
        width: 100%;
        padding: 1em 1.5em 0;   
    }
}
                

8.6 - Creating pull quotes and pull images

In style.css


/* Alignment responsive */
@media screen and (min-width: 1320px) {
    .alignleft {
        margin-left: -160px; 
    }
}

@media screen and (min-width: 1820px) {
    .alignright { 
        margin-right: -160px; 
    }
}
                

8.7 - Working with image captions

In style.css


.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
    padding: 0.8075em 1em;
    font-size: 14px;
    font-size: 1.4rem;
    font-family: 'Lato', sans-serif;
    background: #e5e5e5;
    background: hsl(0, 0%, 90%);
}
                

8.8 - Working with image galleries

In style.css


.wp-caption .wp-caption-text ,
.gallery-caption {
    padding: 0.8075em 1em;
    font-size: 14px;
    font-size: 1.4rem;
    font-family: 'Lato', sans-serif;
    background: #e5e5e5;
    background: hsl(0, 0%, 90%);
}
.site-main .gallery {
	margin-bottom: 1.5em;
}
.site-main .gallery-item {
    position: relative;    
    max-width:100%;
    float: left;
    margin-right: 3.333333333%;
    margin-bottom: 3rem;
    background: #333;
    overflow: hidden;
}
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    max-height: 50%;
    width: 100%;
    padding: 6px 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
    text-align: left;
    background-color: hsla(0, 0%, 0%, .8);
    opacity: 0;
}
.gallery-item:hover .gallery-caption { 
    opacity: 1; 
}
.site-main .gallery a img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: none;
}
                

8.9 - Single post navigation

In inc/template-tags.php


previous_post_link( '<div class="nav-previous"><div class="nav-indicator">' . _x( 'Previous Post:', 'Previous post', 'my-simone' ) . '</div><h1>%link</h1></div>', '%title' );
next_post_link(     '<div class="nav-next"><div class="nav-indicator">' . _x( 'Next Post:', 'Next post', 'my-simone' ) . '</div><h1>%link</h1></div>', '%title' );
                

In style.css


.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
        font-size: 18px;
        font-size: 1.8rem;
        font-family: 'Lato', sans-serif;
        color: #000;
        color: hsl(0, 0%, 0%);
}
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
	width: 50%;
        float: left;
        padding-right: 15%;
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
        width: 50%;	
        float: right;
        padding-left: 15%;
	text-align: right;
}

.nav-indicator { 
    margin-bottom: 1em; 
}

.nav-previous h1,
.nav-next h1 { 
    font-weight: 900; 
}
                

In inc/template-tags.php


<nav class="navigation post-navigation" role="navigation">
    <div class="post-nav-box clear">
        <h1 class="screen-reader-text"><?php _e( 'Post navigation', 'my-simone' ); ?></h1>
        <div class="nav-links">
            <?php
            previous_post_link( '<div class="nav-previous"><div class="nav-indicator">' . _x( 'Previous Post:', 'Previous post', 'my-simone' ) . '</div><h1>%link</h1></div>', '%title' );
            next_post_link(     '<div class="nav-next"><div class="nav-indicator">' . _x( 'Next Post:', 'Next post', 'my-simone' ) . '</div><h1>%link</h1></div>', '%title' );
            ?>
        </div><!-- .nav-links -->
    </div><!-- .post-nav-box -->
</nav><!-- .navigation -->
                

In style.css


.post-nav-box {
    padding: 2em 0;
    margin-bottom: 4em;
    border-top: hsl(0, 0%, 80%) solid 1px;
    border-bottom: hsl(0, 0%, 80%) solid 1px; 
}
                

Chapter 09: Working with Comments

9.1 - Working with the comments template

In comments.php


<?php
    printf( _nx( 'One comment:', '%1$s comments:', get_comments_number(), 'comments title', 'my-simone' ), number_format_i18n( get_comments_number() ) );
?>
                

In comments.php


<nav id="comment-nav-below" class="comment-navigation clear" role="navigation">
    <h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'my-simone' ); ?></h1>
    <div class="nav-previous"><?php previous_comments_link( __( '<i class="fa fa-arrow-circle-o-left"></i> Older Comments', 'my-simone' ) ); ?></div>
    <div class="nav-next"><?php next_comments_link( __( 'Newer Comments <i class="fa fa-arrow-circle-o-right"></i>', 'my-simone' ) ); ?></div>
</nav><!-- #comment-nav-below -->
                

In style.css


.comment-navigation {
    padding: 1em 0;
    margin: 3em 0;
    border-top: hsl(0, 0%, 80%) solid 1px;
    border-bottom: hsl(0, 0%, 80%) solid 1px;  
}

.comment-navigation i {
    margin: 0 1em;
}
                

9.2 - Using Gravatars in comments

In comments.php


<?php
    wp_list_comments( array(
        'style'      => 'ol',
        'short_ping' => true,
        'avatar_size'=> 50,
    ) );
?>
                

9.3 - Styling Comments

In style.css


/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comments-title {
    font-weight: 900;
    font-size: 36px;
    font-size: 3.6rem;
}

.comments-area > ol {
    padding: 0;
    margin: 2em 0;
    list-style-type: none;
}

ol.children { list-style-type: none; }

.comment-list ol { margin-left: 50px; }

.comment-meta { margin-bottom: 1em; }

.comment-author .avatar {
    width: 50px;
    display: block;
    float: left;
    margin-right: 20px;
}

.comment-author .fn {
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-size: 2rem;
}

.comment-metadata {
    font-size: 14px;
    font-size:1.4rem;
}

.comment-content { font-size: 90%; }

.comment-content,
.reply { margin-left: 70px; }

.comment-body {
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: solid hsl(0, 0%, 80%) 1px;
}

.comment-content a {
	word-wrap: break-word;
}

.comment-content ol { margin-left: 1.5em; }

.reply {
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
}

/* Comments responsive */
@media screen and (max-width:600px) {    
    .comment-list ol { margin-left: 0; }
    
    .comment-content ol { margin-left: 1.5em; }
    
    .comment-content,
    .reply { margin-left: 0; }
}
                

9.4 - Highlighting post author comments

In style.css


.bypostauthor > .comment-body {
    position: relative;
    padding: 1em;
    margin-bottom: 2em;
    background: hsl(0, 0%, 93%);
    border: none;
}
                

9.5 - Styling the comment form

In style.css


.comment-reply-title {
    margin-bottom: .5em;
    font-weight: 900;
    font-size: 30px;
    font-size: 3rem;
}

.comment-form {
    padding-bottom: 4rem;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}

.comment-form textarea {
    font-family: 'PT Serif', serif;
    font-size: 18px;
    font-size: 1.8rem;
}

.comment-form label { display: block; }

.required { color: red; }

.comment-awaiting-moderation { /* Green background color to make moderation seem less aggressive */
    padding: .5rem 1rem;
    margin: 1rem 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #84bd68;
    background: hsl(100, 39%, 57%);
}
                

Chapter 10: Working with Featured Images

10.2 - Defining Featured Image Sizes

In functions.php


add_theme_support( 'post-thumbnails' );
add_image_size('large-thumb', 1060, 650, true);
add_image_size('index-thumb', 780, 250, true);
                

10.4 - Adding Featured Images to a template

In content-single.php


<?php 
    if (has_post_thumbnail()) {
        echo '<div class="single-post-thumbnail clear">';
        echo the_post_thumbnail('large-thumb');
        echo '</div>';
    }
?>
                

10.5 - Styling the Featured Image

In style.css


/* Featured Images */

.single-post-thumbnail { 
    background: #b2b2b2 url(images/pattern.svg) repeat; 
}

.single-post-thumbnail img {
    display: block;
    margin: 0 auto;
}
                

Optional in content-single.php


<?php 
if (has_post_thumbnail()) {
    echo '<div class="single-post-thumbnail clear">';
    echo '<div class="image-shifter">';
    echo the_post_thumbnail('large-thumb');
    echo '</div>';
    echo '</div>';
}
?>
                

Optional in layouts/content-sidebar.css


@media screen and (min-width: 1820px) {
    .image-shifter {
        width: 1060px;
        float: none;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1540px) and (max-width: 1820px) {
    .image-shifter { margin-right: 380px;}
}

@media screen and (min-width: 1440px) and (max-width: 1819px) {
    .image-shifter {
        width: 1060px; 
        float: right;
    }
}
                

Chapter 11: Working with Index Templates

11.2 - Customizing and styling index templates

In layouts/content-sidebar.css


.site-content {
    padding-bottom: 4em;
    background: #b2b2b2 url(../images/pattern.svg) repeat;
}
                

In content.php


<div class="index-box">
(...)
</div>
                

In layouts/content-sidebar.css


.index-box {
    max-width: 780px;
    max-width: 78rem;
    padding: 1em 0 2em;
    margin: 0 auto 2em;
    background: #fff;
    background: hsl(0, 0%, 100%);
}

.index-box blockquote.alignleft,
.index-box blockquote.alignright {
    background: #fff;
    background: hsl(0, 0%, 100%);
    border: none;
}

@media screen and (min-width: 1820px) {
    .index-box blockquote.alignright { padding-right: 2em; }
}

@media screen and (min-width: 1320px) {
    .index-box blockquote.alignleft { padding-left: 2em; }
}
                

Completed content.php


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="index-box">
	<header class="entry-header clear">
            <?php
                /* translators: used between list items, there is a space after the comma */
                $category_list = get_the_category_list( __( ', ', 'my-simone' ) );

                if ( my_simone_categorized_blog() ) {
                    echo '<div class="category-list">' . $category_list . '</div>';
                }
            ?>
		<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

		<?php if ( 'post' == get_post_type() ) : ?>
		<div class="entry-meta">
			<?php my_simone_posted_on(); ?>
                        <?php 
                        if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) { 
                            echo '<span class="comments-link">';
                            comments_popup_link( __( 'Leave a comment', 'my-simone' ), __( '1 Comment', 'my-simone' ), __( '% Comments', 'my-simone' ) );
                            echo '</span>';
                        }
                        ?>
                        <?php edit_post_link( __( ' | Edit', 'my-simone' ), '<span class="edit-link">', '</span>' ); ?>
		</div><!-- .entry-meta -->
		<?php endif; ?>
	</header><!-- .entry-header -->

	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>
	<div class="entry-content">
		<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'my-simone' ) ); ?>
		<?php
			wp_link_pages( array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'my-simone' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

	<footer class="entry-footer">
		
	</footer><!-- .entry-footer -->
    </div><!-- .index-box -->
</article><!-- #post-## -->
                

In style.css


.posted-on:before {
    content: ' on ';
}
.posted-on:after {
    content: '.';
}

@media screen and (min-width: 1320px) {
    .single .posted-on:before,
    .single .posted-on:after {
        content: '';
    }
}
				

11.3 - Displaying excerpts or full content on index pages

In content.php


<div class="entry-content">
    <?php the_excerpt(); ?>
</div><!-- .entry-content -->
                

11.4 - Adding a custom Read More link

In content.php


<footer class="entry-footer continue-reading">
    <?php echo '<a href="' . get_permalink() . '" title="' . __('Continue Reading ', 'my-simone') . get_the_title() . '" rel="bookmark">Continue Reading<i class="fa fa-arrow-circle-o-right"></i></a>'; ?>
</footer><!-- .entry-footer -->
                

In style.css


/*--------------------------------------------------------------
Index and Archive
--------------------------------------------------------------*/

.continue-reading {
    margin: 0 4rem;
    font-weight: 900;
    font-size: 18px;
    font-size: 1.8rem;
}

.continue-reading i { margin-left: .5em; }
                

11.5 - Adding featured images

In content.php


<?php
if (has_post_thumbnail()) {
    echo '<div class="small-index-thumbnail clear">';
    echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'my-simone') . get_the_title() . '" rel="bookmark">';
    echo the_post_thumbnail('index-thumb');
    echo '</a>';
    echo '</div>';
}
?>
                

In style.css


.small-index-thumbnail { 
    margin-top: -1em;
    margin-bottom: 1em;
}
                

11.6 - Creating custom pagination

In inc/template-tags.php


function my_simone_paging_nav() {
	// Don't print empty markup if there's only one page.
	if ( $GLOBALS['wp_query']->max_num_pages < 2 ) {
		return;
	}

	$paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
	$pagenum_link = html_entity_decode( get_pagenum_link() );
	$query_args   = array();
	$url_parts    = explode( '?', $pagenum_link );

	if ( isset( $url_parts[1] ) ) {
		wp_parse_str( $url_parts[1], $query_args );
	}

	$pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
	$pagenum_link = trailingslashit( $pagenum_link ) . '%_%';

	$format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
	$format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';

	// Set up paginated links.
	$links = paginate_links( array(
		'base'     => $pagenum_link,
		'format'   => $format,
		'total'    => $GLOBALS['wp_query']->max_num_pages,
		'current'  => $paged,
		'mid_size' => 2,
		'add_args' => array_map( 'urlencode', $query_args ),
		'prev_text' => __( '← Previous', 'my-simone' ),
		'next_text' => __( 'Next →', 'my-simone' ),
        'type'      => 'list',
	) );

	if ( $links ) :

	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'my-simone' ); ?></h1>
			<?php echo $links; ?>
	</nav><!-- .navigation -->
	<?php
	endif;
}
                

In style.css


.paging-navigation ul {
    margin: 0;
}

.paging-navigation li { display: inline; }

a.page-numbers,
span.page-numbers {
     padding: .3em .7em;
     color: #333;
     color: hsl(0, 0%, 20%);
}

a:hover.page-numbers {
    color: #000;
    color: hsl(0, 0%, 0%);
}

.paging-navigation .current {
    font-weight: bold;
    color: #000;
    color: hsl(0, 0%, 0%);
}
                

In layouts/content-sidebar.css


.paging-navigation {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    list-style-type: none;
    background: #fff;
}           
                

11.7 - Highlighting Sticky Posts

In content.php


<?php
// Display a thumb tack in the top right hand corner if this post is sticky
if (is_sticky()) {
    echo '<i class="fa fa-thumb-tack sticky-post"></i>';
}
?>
                

In style.css


.sticky-post {
    position: absolute;
    top: 1rem;
    right: 3rem;
}
                

11.8 - Creating custom Post Format templates

In content-aside.php


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="index-box">

	<div class="entry-content">
		<?php the_content(); ?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
            <?php my_simone_posted_on(); ?>
                        <?php edit_post_link( __( ' | Edit', 'my-simone' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
    </div>
</article><!-- #post-## -->
                

In style.css


/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.format-aside .entry-content {
    margin-top: 1em;
}
                

11.9 - Creating a custom display for the most recent post

In content.php


<?php 
if( $wp_query->current_post == 0 && !is_paged() && is_front_page() ) { 
    echo '<div class="entry-content">';
    the_content( __( '', 'my-simone' ) );
    echo '</div>';
    echo '<footer class="entry-footer continue-reading">';
    echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'my-simone') . get_the_title() . '" rel="bookmark">Read the article<i class="fa fa-arrow-circle-o-right"></i></a>'; 
    echo '</footer><!-- .entry-footer -->';
} else { ?>
    <div class="entry-content">
    <?php the_excerpt(); ?>
    </div><!-- .entry-content -->
    <footer class="entry-footer continue-reading">
    <?php echo '<a href="' . get_permalink() . '" title="' . __('Continue Reading ', 'my-simone') . get_the_title() . '" rel="bookmark">Continue Reading<i class="fa fa-arrow-circle-o-right"></i></a>'; ?>
    </footer><!-- .entry-footer -->
<?php } ?>
                

In content.php


<?php 
if( $wp_query->current_post == 0 && !is_paged() && is_front_page() ) { // Custom template for the first post on the front page
    if (has_post_thumbnail()) {
        echo '<div class="front-index-thumbnail clear">';
        echo '<div class="image-shifter">';
        echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'my-simone') . get_the_title() . '" rel="bookmark">';
        echo the_post_thumbnail('large-thumb');
        echo '</a>';
        echo '</div>';
        echo '</div>';
    } 
    echo '<div class="index-box';
    if (has_post_thumbnail()) { echo ' has-thumbnail'; };
    echo '">';
} else {
    echo '<div class="index-box">';
    if (has_post_thumbnail()) {
        echo '<div class="small-index-thumbnail clear">';
        echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'my-simone') . get_the_title() . '" rel="bookmark">';
        echo the_post_thumbnail('index-thumb');
        echo '</a>';
        echo '</div>';
    }
}
?>
                

In style.css


.front-index-thumbnail {
    margin-bottom: -3.2em;
}

@media screen and (max-width: 779px){
    .front-index-thumbnail {
        margin-bottom: 0;
    }
}
.single-post-thumbnail img,
.front-index-thumbnail img {
    display: block;
    margin: 0 auto;
}

.has-thumbnail {
    position: relative;
    margin-top: -8em;
}
                

11.11 - Working with archive.php

In layouts/content-sidebar.css


.page-header,
.paging-navigation {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    list-style-type: none;
    background: #fff;
}

.page-header {
    margin-top: 1em;
    margin-bottom: 1em;
}
                

In style.css


.taxonomy-description {
    padding-top: 2rem;
    margin: 2rem 0;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    border-top: 1px solid hsl(0, 0%, 75%);
    border-bottom: 1px solid hsl(0, 0%, 75%);
}
                

In archive.php


<?php
if ( is_category() ) :
    printf( __( 'Posts in the ', 'my-simone' ) );
    echo '<em>';
    single_cat_title();
    echo '</em> ' . __('category', 'my-simone') . ':';

elseif ( is_tag() ) :
    printf( __( 'Posts with the ', 'my-simone' ) );
    echo '<em>';
    single_tag_title();
    echo '</em> ' . __('tag', 'my-simone') . ':';

elseif ( is_author() ) :
    printf( __( 'Author: %s', 'my-simone' ), '<span class="vcard">' . get_the_author() . '</span>' );

elseif ( is_day() ) :
    printf( __( 'Posts from %s', 'my-simone' ), '<span>' . get_the_date() . '</span>' );

elseif ( is_month() ) :
    printf( __( 'Posts from %s', 'my-simone' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'my-simone' ) ) . '</span>' );

elseif ( is_year() ) :
    printf( __( 'Posts from %s', 'my-simone' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'my-simone' ) ) . '</span>' );

elseif ( is_tax( 'post_format', 'post-format-aside' ) ) :
    _e( 'Asides', 'my-simone' );

else :
    _e( 'Archives', 'my-simone' );

endif;
?>
                

11.12 - Customizing the search results and 404 templates

In content-none.php


<?php
/**
 * The template part for displaying a message that posts cannot be found.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package my-simone
 */
?>

<section class="<?php if ( is_404() ) { echo 'error-404'; } else { echo 'no-results'; } ?> not-found">
    <div class="index-box">
	<header class="entry-header">
		<h1 class="entry-title">
                    <?php 
                    if ( is_404() ) { _e( 'Page not available', 'my-simone' ); }
                    else if ( is_search() ) { printf( __( 'Nothing found for <em>', 'my-simone') . get_search_query() . '</em>' ); }
                    else { _e( 'Nothing Found', 'my-simone' );}
                    ?>
                </h1>
	</header>

	<div class="entry-content">
		<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>

			<p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'my-simone' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
                        
                <?php elseif ( is_404() ) : ?>
                        
                        <p><?php _e( 'You seem to be lost. To find what you are looking for check out the most recent articles below or try a search:', 'my-simone' ); ?></p>
                        <?php get_search_form(); ?>
                        
		<?php elseif ( is_search() ) : ?>

			<p><?php _e( 'Nothing matched your search terms. Check out the most recent articles below or try searching for something else:', 'my-simone' ); ?></p>
			<?php get_search_form(); ?>

		<?php else : ?>

			<p><?php _e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', 'my-simone' ); ?></p>
			<?php get_search_form(); ?>

		<?php endif; ?>
	</div><!-- .entry-content -->
    </div><!-- .index-box -->
    
    <?php
    if ( is_404() || is_search() ) {
        
        ?>
    <header class="page-header"><h1 class="page-title">Most recent posts:</h1></header>
    <?php
        // Get the 6 latest posts
        $args = array(
            'posts_per_page' => 6
        );

        $latest_posts_query = new WP_Query( $args );

        // The Loop
        if ( $latest_posts_query->have_posts() ) {
                while ( $latest_posts_query->have_posts() ) {

                    $latest_posts_query->the_post();
                    // Get the standard index page content
                    get_template_part( 'content', get_post_format() );

                }
        }
        /* Restore original Post Data */
        wp_reset_postdata();

    }
    ?>
    
</section><!-- .no-results -->
                

In 404.php


<?php get_template_part( 'content', 'none' ); ?>
                

Chapter 12: Working with Static Pages

12.1 - Styling pages

In style.css


.page .entry-title {
    margin-top: .7em;
}
                

In content-page.php


<?php 
if (has_post_thumbnail()) {
    echo '<div class="single-post-thumbnail clear">';
    echo '<div class="image-shifter">';
    echo the_post_thumbnail('large-thumb');
    echo '</div>';
    echo '</div>';
}
?>
                

12.2 - Creating Custom Page Templates

In page-templates/page-nosidebar.php


/**
 * Template Name: Page with no sidebar
 */
                

In layouts/no-sidebar.css


/*
Theme Name: my-simone
Layout: No sidebar
*/

.page .site-content { 
    background: #fff; 
    background: hsl(0, 0%, 100%);
}

.site-footer {
    clear: both;
    width: 100%;
}

.entry-header,
.page-header,
.entry-content,
.entry-footer,
.tag-links,
.post-navigation,
.comments-area,
.paging-navigation {
    position: relative;
    max-width: 780px;
    max-width: 78rem;
    padding: 0 4rem;
    margin: 0 auto;
}

.page-header,
.paging-navigation {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    list-style-type: none;
    background: #fff;
}

.page-header {
    margin-top: 1em;
    margin-bottom: 1em;
}
                

In functions.php


if (is_page_template('page-templates/page-nosidebar.php')) {
    wp_enqueue_style( 'my-sinome-layout-style' , get_template_directory_uri() . '/layouts/no-sidebar.css');
} else {
    wp_enqueue_style( 'my-sinome-layout-style' , get_template_directory_uri() . '/layouts/content-sidebar.css');
}
                

Chapter 13: Back End Customization

13.1 - Adding Editor Styles to Match Front-End Styles

In inc/editor-style.css


/*
Theme Name: Simone
Description: Used to style the content editor in posts and pages.
*/


/* =Body
----------------------------------------------- */
html .mceContentBody {
	max-width: 700px;
}

body {
	color: #404040;
	font-family: 'PT Serif', sans-serif;
	font-size: 20px;
	line-height: 1.5;
}

/* =Base elements
----------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

a {
	color: #000;
        color: hsl(0, 0%, 0%);
}

a:visited {
	color: #333;
        color: hsl(0, 0%, 20%);
}

h1, h2, h3, h4, h5, h6 {
	clear: right;
        font-family: 'Lato', sans-serif;
        font-weight: 900;
        color: #000;
        color: hsl(0, 0%, 0%);
        margin-bottom: .4em;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 26px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 22px;
}

p,
ul,
ol {
    font-size: 20px;
    line-height: 1.6em;
}

/* =Blockquotes
----------------------------------------------- */
blockquote p {
        font-size: 28px;
        line-height: 1.5em;
}

blockquote {
	padding: 1em 1.5em 0;
        margin-bottom: 1em;
        font-style: italic;
        border-top: solid 1px hsl(0, 0%, 80%);
        border-bottom: solid 1px hsl(0, 0%, 80%);
}

blockquote.alignleft {
    float: left;
    width: 50%;
    padding: 1em 0 0;
    margin-right: 1.5em;
}

blockquote.alignright {
    float: right;
    width: 50%;
    padding: 1em 0 0;
    margin-left: 1.5em;
}

blockquote em {
        font-style: normal;
}

blockquote cite {
    display: block;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    text-align: right;
    font-size: 18px;
    line-height: 1.5em;
    margin-top: 1em;
    margin-left: 40%;
}

blockquote.alignleft cite {
    text-align: left;
    margin-left: 0;
    margin-right: 40%;
}


/* =Images
 ----------------------------------------------- */

.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
        border: none;
        text-align: center;
        background-color: #fff;
        padding-top: 0;
        margin: 10px 0;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}
.wp-caption-text {
	text-align: center;
}

.gallery-caption,
.wp-caption .wp-caption-text,
.wp-caption-dd {
	padding: 0.8075em 1em;
        background: #e5e5e5;
        background: hsl(0, 0%, 90%);
        border-left: #fff solid 5px;
        border-right: #fff solid 5px;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
}

/* Due to HTML5 galleries being activated defaul gallery styling does not apply.*/

.gallery {
        margin: auto 0;
        padding: 6px;
        width: 712px;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}

.gallery img {
        display: block;
}
.gallery a img {
	border: none;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
}

.gallery-item {
        float: left;
        width: auto!important;
        margin-right: 3.333333333%!important;
        margin-bottom: 30px!important;
        padding: 0!important;
        background: #333;
        overflow: hidden;
        position: relative;
}

.gallery-caption {
	background-color: hsla(0, 0%, 0%, .8);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0!important;
        border: none;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
}

/* =Alignment
----------------------------------------------- */

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: right;
	display: block;
	margin: 0 auto;
}

                

In functions.php


// This theme styles the visual editor to resemble the theme style.
$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,900,900italic|PT+Serif:400,700,400italic,700italic';
add_editor_style( array( 'inc/editor-style.css', str_replace( ',', '%2C', $font_url ) ) );