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:
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() );