3 * Twenty Sixteen functions and definitions
5 * Set up the theme and provides some helper functions, which are used in the
6 * theme as custom template tags. Others are attached to action and filter
7 * hooks in WordPress to change core functionality.
9 * When using a child theme you can override certain functions (those wrapped
10 * in a function_exists() call) by defining them first in your child theme's
11 * functions.php file. The child theme's functions.php file is included before
12 * the parent theme's file, so the child theme functions would be used.
14 * @link https://codex.wordpress.org/Theme_Development
15 * @link https://codex.wordpress.org/Child_Themes
17 * Functions that are not pluggable (not wrapped in function_exists()) are
18 * instead attached to a filter or action hook.
20 * For more information on hooks, actions, and filters,
21 * {@link https://codex.wordpress.org/Plugin_API}
24 * @subpackage Twenty_Sixteen
25 * @since Twenty Sixteen 1.0
29 * Twenty Sixteen only works in WordPress 4.4 or later.
31 if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' ) ) {
32 require get_template_directory() . '/inc/back-compat.php';
35 if ( ! function_exists( 'twentysixteen_setup' ) ) :
37 * Sets up theme defaults and registers support for various WordPress features.
39 * Note that this function is hooked into the after_setup_theme hook, which
40 * runs before the init hook. The init hook is too late for some features, such
41 * as indicating support for post thumbnails.
43 * Create your own twentysixteen_setup() function to override in a child theme.
45 * @since Twenty Sixteen 1.0
47 function twentysixteen_setup() {
49 * Make theme available for translation.
50 * Translations can be filed in the /languages/ directory.
51 * If you're building a theme based on Twenty Sixteen, use a find and replace
52 * to change 'twentysixteen' to the name of your theme in all the template files
54 load_theme_textdomain( 'twentysixteen', get_template_directory() . '/languages' );
56 // Add default posts and comments RSS feed links to head.
57 add_theme_support( 'automatic-feed-links' );
60 * Let WordPress manage the document title.
61 * By adding theme support, we declare that this theme does not use a
62 * hard-coded <title> tag in the document head, and expect WordPress to
65 add_theme_support( 'title-tag' );
68 * Enable support for custom logo.
70 * @since Twenty Sixteen 1.2
72 add_theme_support( 'custom-logo', array(
75 'flex-height' => true,
79 * Enable support for Post Thumbnails on posts and pages.
81 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
83 add_theme_support( 'post-thumbnails' );
84 set_post_thumbnail_size( 1200, 9999 );
86 // This theme uses wp_nav_menu() in two locations.
87 register_nav_menus( array(
88 'primary' => __( 'Primary Menu', 'twentysixteen' ),
89 'social' => __( 'Social Links Menu', 'twentysixteen' ),
93 * Switch default core markup for search form, comment form, and comments
94 * to output valid HTML5.
96 add_theme_support( 'html5', array(
105 * Enable support for Post Formats.
107 * See: https://codex.wordpress.org/Post_Formats
109 add_theme_support( 'post-formats', array(
122 * This theme styles the visual editor to resemble the theme style,
123 * specifically font, colors, icons, and column width.
125 add_editor_style( array( 'css/editor-style.css', twentysixteen_fonts_url() ) );
127 // Indicate widget sidebars can use selective refresh in the Customizer.
128 add_theme_support( 'customize-selective-refresh-widgets' );
130 endif; // twentysixteen_setup
131 add_action( 'after_setup_theme', 'twentysixteen_setup' );
134 * Sets the content width in pixels, based on the theme's design and stylesheet.
136 * Priority 0 to make it available to lower priority callbacks.
138 * @global int $content_width
140 * @since Twenty Sixteen 1.0
142 function twentysixteen_content_width() {
143 $GLOBALS['content_width'] = apply_filters( 'twentysixteen_content_width', 840 );
145 add_action( 'after_setup_theme', 'twentysixteen_content_width', 0 );
148 * Registers a widget area.
150 * @link https://developer.wordpress.org/reference/functions/register_sidebar/
152 * @since Twenty Sixteen 1.0
154 function twentysixteen_widgets_init() {
155 register_sidebar( array(
156 'name' => __( 'Sidebar', 'twentysixteen' ),
158 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
159 'before_widget' => '<section id="%1$s" class="widget %2$s">',
160 'after_widget' => '</section>',
161 'before_title' => '<h2 class="widget-title">',
162 'after_title' => '</h2>',
165 register_sidebar( array(
166 'name' => __( 'Content Bottom 1', 'twentysixteen' ),
168 'description' => __( 'Appears at the bottom of the content on posts and pages.', 'twentysixteen' ),
169 'before_widget' => '<section id="%1$s" class="widget %2$s">',
170 'after_widget' => '</section>',
171 'before_title' => '<h2 class="widget-title">',
172 'after_title' => '</h2>',
175 register_sidebar( array(
176 'name' => __( 'Content Bottom 2', 'twentysixteen' ),
178 'description' => __( 'Appears at the bottom of the content on posts and pages.', 'twentysixteen' ),
179 'before_widget' => '<section id="%1$s" class="widget %2$s">',
180 'after_widget' => '</section>',
181 'before_title' => '<h2 class="widget-title">',
182 'after_title' => '</h2>',
185 add_action( 'widgets_init', 'twentysixteen_widgets_init' );
187 if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :
189 * Register Google fonts for Twenty Sixteen.
191 * Create your own twentysixteen_fonts_url() function to override in a child theme.
193 * @since Twenty Sixteen 1.0
195 * @return string Google fonts URL for the theme.
197 function twentysixteen_fonts_url() {
200 $subsets = 'latin,latin-ext';
202 /* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */
203 if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'twentysixteen' ) ) {
204 $fonts[] = 'Merriweather:400,700,900,400italic,700italic,900italic';
207 /* translators: If there are characters in your language that are not supported by Montserrat, translate this to 'off'. Do not translate into your own language. */
208 if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'twentysixteen' ) ) {
209 $fonts[] = 'Montserrat:400,700';
212 /* translators: If there are characters in your language that are not supported by Inconsolata, translate this to 'off'. Do not translate into your own language. */
213 if ( 'off' !== _x( 'on', 'Inconsolata font: on or off', 'twentysixteen' ) ) {
214 $fonts[] = 'Inconsolata:400';
218 $fonts_url = add_query_arg( array(
219 'family' => urlencode( implode( '|', $fonts ) ),
220 'subset' => urlencode( $subsets ),
221 ), 'https://fonts.googleapis.com/css' );
229 * Handles JavaScript detection.
231 * Adds a `js` class to the root `<html>` element when JavaScript is detected.
233 * @since Twenty Sixteen 1.0
235 function twentysixteen_javascript_detection() {
236 echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
238 add_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );
241 * Enqueues scripts and styles.
243 * @since Twenty Sixteen 1.0
245 function twentysixteen_scripts() {
246 // Add custom fonts, used in the main stylesheet.
247 wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null );
249 // Add Genericons, used in the main stylesheet.
250 wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4.1' );
253 wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
255 // Load the Internet Explorer specific stylesheet.
256 wp_enqueue_style( 'twentysixteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentysixteen-style' ), '20160412' );
257 wp_style_add_data( 'twentysixteen-ie', 'conditional', 'lt IE 10' );
259 // Load the Internet Explorer 8 specific stylesheet.
260 wp_enqueue_style( 'twentysixteen-ie8', get_template_directory_uri() . '/css/ie8.css', array( 'twentysixteen-style' ), '20160412' );
261 wp_style_add_data( 'twentysixteen-ie8', 'conditional', 'lt IE 9' );
263 // Load the Internet Explorer 7 specific stylesheet.
264 wp_enqueue_style( 'twentysixteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentysixteen-style' ), '20160412' );
265 wp_style_add_data( 'twentysixteen-ie7', 'conditional', 'lt IE 8' );
267 // Load the html5 shiv.
268 wp_enqueue_script( 'twentysixteen-html5', get_template_directory_uri() . '/js/html5.js', array(), '3.7.3' );
269 wp_script_add_data( 'twentysixteen-html5', 'conditional', 'lt IE 9' );
271 wp_enqueue_script( 'twentysixteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20160412', true );
273 if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
274 wp_enqueue_script( 'comment-reply' );
277 if ( is_singular() && wp_attachment_is_image() ) {
278 wp_enqueue_script( 'twentysixteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20160412' );
281 wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20160412', true );
283 wp_localize_script( 'twentysixteen-script', 'screenReaderText', array(
284 'expand' => __( 'expand child menu', 'twentysixteen' ),
285 'collapse' => __( 'collapse child menu', 'twentysixteen' ),
288 add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );
291 * Adds custom classes to the array of body classes.
293 * @since Twenty Sixteen 1.0
295 * @param array $classes Classes for the body element.
296 * @return array (Maybe) filtered body classes.
298 function twentysixteen_body_classes( $classes ) {
299 // Adds a class of custom-background-image to sites with a custom background image.
300 if ( get_background_image() ) {
301 $classes[] = 'custom-background-image';
304 // Adds a class of group-blog to sites with more than 1 published author.
305 if ( is_multi_author() ) {
306 $classes[] = 'group-blog';
309 // Adds a class of no-sidebar to sites without active sidebar.
310 if ( ! is_active_sidebar( 'sidebar-1' ) ) {
311 $classes[] = 'no-sidebar';
314 // Adds a class of hfeed to non-singular pages.
315 if ( ! is_singular() ) {
316 $classes[] = 'hfeed';
321 add_filter( 'body_class', 'twentysixteen_body_classes' );
324 * Converts a HEX value to RGB.
326 * @since Twenty Sixteen 1.0
328 * @param string $color The original color, in 3- or 6-digit hexadecimal form.
329 * @return array Array containing RGB (red, green, and blue) values for the given
330 * HEX code, empty array otherwise.
332 function twentysixteen_hex2rgb( $color ) {
333 $color = trim( $color, '#' );
335 if ( strlen( $color ) === 3 ) {
336 $r = hexdec( substr( $color, 0, 1 ).substr( $color, 0, 1 ) );
337 $g = hexdec( substr( $color, 1, 1 ).substr( $color, 1, 1 ) );
338 $b = hexdec( substr( $color, 2, 1 ).substr( $color, 2, 1 ) );
339 } else if ( strlen( $color ) === 6 ) {
340 $r = hexdec( substr( $color, 0, 2 ) );
341 $g = hexdec( substr( $color, 2, 2 ) );
342 $b = hexdec( substr( $color, 4, 2 ) );
347 return array( 'red' => $r, 'green' => $g, 'blue' => $b );
351 * Custom template tags for this theme.
353 require get_template_directory() . '/inc/template-tags.php';
356 * Customizer additions.
358 require get_template_directory() . '/inc/customizer.php';
361 * Add custom image sizes attribute to enhance responsive image functionality
364 * @since Twenty Sixteen 1.0
366 * @param string $sizes A source size value for use in a 'sizes' attribute.
367 * @param array $size Image size. Accepts an array of width and height
368 * values in pixels (in that order).
369 * @return string A source size value for use in a content image 'sizes' attribute.
371 function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
374 840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
376 if ( 'page' === get_post_type() ) {
377 840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
379 840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
380 600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
385 add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );
388 * Add custom image sizes attribute to enhance responsive image functionality
389 * for post thumbnails
391 * @since Twenty Sixteen 1.0
393 * @param array $attr Attributes for the image markup.
394 * @param int $attachment Image attachment ID.
395 * @param array $size Registered image size or flat array of height and width dimensions.
396 * @return string A source size value for use in a post thumbnail 'sizes' attribute.
398 function twentysixteen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
399 if ( 'post-thumbnail' === $size ) {
400 is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px';
401 ! is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
405 add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10 , 3 );
408 * Modifies tag cloud widget arguments to have all tags in the widget same font size.
410 * @since Twenty Sixteen 1.1
412 * @param array $args Arguments for tag cloud widget.
413 * @return array A new modified arguments.
415 function twentysixteen_widget_tag_cloud_args( $args ) {
416 $args['largest'] = 1;
417 $args['smallest'] = 1;
418 $args['unit'] = 'em';
421 add_filter( 'widget_tag_cloud_args', 'twentysixteen_widget_tag_cloud_args' );