3 * Twenty Seventeen functions and definitions
5 * @link https://developer.wordpress.org/themes/basics/theme-functions/
8 * @subpackage Twenty_Seventeen
13 * Twenty Seventeen only works in WordPress 4.7 or later.
15 if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
16 require get_template_directory() . '/inc/back-compat.php';
21 * Sets up theme defaults and registers support for various WordPress features.
23 * Note that this function is hooked into the after_setup_theme hook, which
24 * runs before the init hook. The init hook is too late for some features, such
25 * as indicating support for post thumbnails.
27 function twentyseventeen_setup() {
29 * Make theme available for translation.
30 * Translations can be filed at WordPress.org. See: https://translate.wordpress.org/projects/wp-themes/twentyseventeen
31 * If you're building a theme based on Twenty Seventeen, use a find and replace
32 * to change 'twentyseventeen' to the name of your theme in all the template files.
34 load_theme_textdomain( 'twentyseventeen' );
36 // Add default posts and comments RSS feed links to head.
37 add_theme_support( 'automatic-feed-links' );
40 * Let WordPress manage the document title.
41 * By adding theme support, we declare that this theme does not use a
42 * hard-coded <title> tag in the document head, and expect WordPress to
45 add_theme_support( 'title-tag' );
48 * Enable support for Post Thumbnails on posts and pages.
50 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
52 add_theme_support( 'post-thumbnails' );
54 add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );
56 add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );
58 // Set the default content width.
59 $GLOBALS['content_width'] = 525;
61 // This theme uses wp_nav_menu() in two locations.
62 register_nav_menus( array(
63 'top' => __( 'Top Menu', 'twentyseventeen' ),
64 'social' => __( 'Social Links Menu', 'twentyseventeen' ),
68 * Switch default core markup for search form, comment form, and comments
69 * to output valid HTML5.
71 add_theme_support( 'html5', array(
79 * Enable support for Post Formats.
81 * See: https://codex.wordpress.org/Post_Formats
83 add_theme_support( 'post-formats', array(
93 // Add theme support for Custom Logo.
94 add_theme_support( 'custom-logo', array(
100 // Add theme support for selective refresh for widgets.
101 add_theme_support( 'customize-selective-refresh-widgets' );
104 * This theme styles the visual editor to resemble the theme style,
105 * specifically font, colors, and column width.
107 add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );
109 // Define and register starter content to showcase the theme on new sites.
110 $starter_content = array(
112 // Place three core-defined widgets in the sidebar area.
113 'sidebar-1' => array(
114 'text_business_info',
119 // Add the core-defined business info widget to the footer 1 area.
120 'sidebar-2' => array(
121 'text_business_info',
124 // Put two core-defined widgets in the footer 2 area.
125 'sidebar-3' => array(
131 // Specify the core-defined pages to create and add custom thumbnails to some of them.
135 'thumbnail' => '{{image-sandwich}}',
138 'thumbnail' => '{{image-espresso}}',
141 'thumbnail' => '{{image-coffee}}',
143 'homepage-section' => array(
144 'thumbnail' => '{{image-espresso}}',
148 // Create the custom image attachments used as post thumbnails for pages.
149 'attachments' => array(
150 'image-espresso' => array(
151 'post_title' => _x( 'Espresso', 'Theme starter content', 'twentyseventeen' ),
152 'file' => 'assets/images/espresso.jpg', // URL relative to the template directory.
154 'image-sandwich' => array(
155 'post_title' => _x( 'Sandwich', 'Theme starter content', 'twentyseventeen' ),
156 'file' => 'assets/images/sandwich.jpg',
158 'image-coffee' => array(
159 'post_title' => _x( 'Coffee', 'Theme starter content', 'twentyseventeen' ),
160 'file' => 'assets/images/coffee.jpg',
164 // Default to a static front page and assign the front and posts pages.
166 'show_on_front' => 'page',
167 'page_on_front' => '{{home}}',
168 'page_for_posts' => '{{blog}}',
171 // Set the front page section theme mods to the IDs of the core-registered pages.
172 'theme_mods' => array(
173 'panel_1' => '{{homepage-section}}',
174 'panel_2' => '{{about}}',
175 'panel_3' => '{{blog}}',
176 'panel_4' => '{{contact}}',
179 // Set up nav menus for each of the two areas registered in the theme.
180 'nav_menus' => array(
181 // Assign a menu to the "top" location.
183 'name' => __( 'Top Menu', 'twentyseventeen' ),
185 'link_home', // Note that the core "home" page is actually a link in case a static front page is not used.
192 // Assign a menu to the "social" location.
194 'name' => __( 'Social Links Menu', 'twentyseventeen' ),
207 * Filters Twenty Seventeen array of starter content.
209 * @since Twenty Seventeen 1.1
211 * @param array $starter_content Array of starter content.
213 $starter_content = apply_filters( 'twentyseventeen_starter_content', $starter_content );
215 add_theme_support( 'starter-content', $starter_content );
217 add_action( 'after_setup_theme', 'twentyseventeen_setup' );
220 * Set the content width in pixels, based on the theme's design and stylesheet.
222 * Priority 0 to make it available to lower priority callbacks.
224 * @global int $content_width
226 function twentyseventeen_content_width() {
228 $content_width = $GLOBALS['content_width'];
231 $page_layout = get_theme_mod( 'page_layout' );
233 // Check if layout is one column.
234 if ( 'one-column' === $page_layout ) {
235 if ( twentyseventeen_is_frontpage() ) {
236 $content_width = 644;
237 } elseif ( is_page() ) {
238 $content_width = 740;
242 // Check if is single post and there is no sidebar.
243 if ( is_single() && ! is_active_sidebar( 'sidebar-1' ) ) {
244 $content_width = 740;
248 * Filter Twenty Seventeen content width of the theme.
250 * @since Twenty Seventeen 1.0
252 * @param $content_width integer
254 $GLOBALS['content_width'] = apply_filters( 'twentyseventeen_content_width', $content_width );
256 add_action( 'template_redirect', 'twentyseventeen_content_width', 0 );
259 * Register custom fonts.
261 function twentyseventeen_fonts_url() {
265 * Translators: If there are characters in your language that are not
266 * supported by Libre Franklin, translate this to 'off'. Do not translate
267 * into your own language.
269 $libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );
271 if ( 'off' !== $libre_franklin ) {
272 $font_families = array();
274 $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
277 'family' => urlencode( implode( '|', $font_families ) ),
278 'subset' => urlencode( 'latin,latin-ext' ),
281 $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
284 return esc_url_raw( $fonts_url );
288 * Add preconnect for Google Fonts.
290 * @since Twenty Seventeen 1.0
292 * @param array $urls URLs to print for resource hints.
293 * @param string $relation_type The relation type the URLs are printed.
294 * @return array $urls URLs to print for resource hints.
296 function twentyseventeen_resource_hints( $urls, $relation_type ) {
297 if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
299 'href' => 'https://fonts.gstatic.com',
306 add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );
309 * Register widget area.
311 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
313 function twentyseventeen_widgets_init() {
314 register_sidebar( array(
315 'name' => __( 'Sidebar', 'twentyseventeen' ),
317 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyseventeen' ),
318 'before_widget' => '<section id="%1$s" class="widget %2$s">',
319 'after_widget' => '</section>',
320 'before_title' => '<h2 class="widget-title">',
321 'after_title' => '</h2>',
324 register_sidebar( array(
325 'name' => __( 'Footer 1', 'twentyseventeen' ),
327 'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
328 'before_widget' => '<section id="%1$s" class="widget %2$s">',
329 'after_widget' => '</section>',
330 'before_title' => '<h2 class="widget-title">',
331 'after_title' => '</h2>',
334 register_sidebar( array(
335 'name' => __( 'Footer 2', 'twentyseventeen' ),
337 'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
338 'before_widget' => '<section id="%1$s" class="widget %2$s">',
339 'after_widget' => '</section>',
340 'before_title' => '<h2 class="widget-title">',
341 'after_title' => '</h2>',
344 add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
347 * Replaces "[...]" (appended to automatically generated excerpts) with ... and
348 * a 'Continue reading' link.
350 * @since Twenty Seventeen 1.0
352 * @return string 'Continue reading' link prepended with an ellipsis.
354 function twentyseventeen_excerpt_more( $link ) {
359 $link = sprintf( '<p class="link-more"><a href="%1$s" class="more-link">%2$s</a></p>',
360 esc_url( get_permalink( get_the_ID() ) ),
361 /* translators: %s: Name of current post */
362 sprintf( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) )
364 return ' … ' . $link;
366 add_filter( 'excerpt_more', 'twentyseventeen_excerpt_more' );
369 * Handles JavaScript detection.
371 * Adds a `js` class to the root `<html>` element when JavaScript is detected.
373 * @since Twenty Seventeen 1.0
375 function twentyseventeen_javascript_detection() {
376 echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
378 add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );
381 * Add a pingback url auto-discovery header for singularly identifiable articles.
383 function twentyseventeen_pingback_header() {
384 if ( is_singular() && pings_open() ) {
385 printf( '<link rel="pingback" href="%s">' . "\n", get_bloginfo( 'pingback_url' ) );
388 add_action( 'wp_head', 'twentyseventeen_pingback_header' );
391 * Display custom color CSS.
393 function twentyseventeen_colors_css_wrap() {
394 if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
398 require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
399 $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
401 <style type="text/css" id="custom-theme-colors" <?php if ( is_customize_preview() ) { echo 'data-hue="' . $hue . '"'; } ?>>
402 <?php echo twentyseventeen_custom_colors_css(); ?>
405 add_action( 'wp_head', 'twentyseventeen_colors_css_wrap' );
408 * Enqueue scripts and styles.
410 function twentyseventeen_scripts() {
411 // Add custom fonts, used in the main stylesheet.
412 wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
415 wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
417 // Load the dark colorscheme.
418 if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
419 wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
422 // Load the Internet Explorer 9 specific stylesheet, to fix display issues in the Customizer.
423 if ( is_customize_preview() ) {
424 wp_enqueue_style( 'twentyseventeen-ie9', get_theme_file_uri( '/assets/css/ie9.css' ), array( 'twentyseventeen-style' ), '1.0' );
425 wp_style_add_data( 'twentyseventeen-ie9', 'conditional', 'IE 9' );
428 // Load the Internet Explorer 8 specific stylesheet.
429 wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
430 wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );
432 // Load the html5 shiv.
433 wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );
434 wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );
436 wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0', true );
438 $twentyseventeen_l10n = array(
439 'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
442 if ( has_nav_menu( 'top' ) ) {
443 wp_enqueue_script( 'twentyseventeen-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array(), '1.0', true );
444 $twentyseventeen_l10n['expand'] = __( 'Expand child menu', 'twentyseventeen' );
445 $twentyseventeen_l10n['collapse'] = __( 'Collapse child menu', 'twentyseventeen' );
446 $twentyseventeen_l10n['icon'] = twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) );
449 wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
451 wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true );
453 wp_localize_script( 'twentyseventeen-skip-link-focus-fix', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );
455 if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
456 wp_enqueue_script( 'comment-reply' );
459 add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );
462 * Add custom image sizes attribute to enhance responsive image functionality
463 * for content images.
465 * @since Twenty Seventeen 1.0
467 * @param string $sizes A source size value for use in a 'sizes' attribute.
468 * @param array $size Image size. Accepts an array of width and height
469 * values in pixels (in that order).
470 * @return string A source size value for use in a content image 'sizes' attribute.
472 function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
475 if ( 740 <= $width ) {
476 $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
479 if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
480 if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
481 $sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
487 add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );
490 * Filter the `sizes` value in the header image markup.
492 * @since Twenty Seventeen 1.0
494 * @param string $html The HTML image tag markup being filtered.
495 * @param object $header The custom header object returned by 'get_custom_header()'.
496 * @param array $attr Array of the attributes for the image tag.
497 * @return string The filtered header image HTML.
499 function twentyseventeen_header_image_tag( $html, $header, $attr ) {
500 if ( isset( $attr['sizes'] ) ) {
501 $html = str_replace( $attr['sizes'], '100vw', $html );
505 add_filter( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 );
508 * Add custom image sizes attribute to enhance responsive image functionality
509 * for post thumbnails.
511 * @since Twenty Seventeen 1.0
513 * @param array $attr Attributes for the image markup.
514 * @param int $attachment Image attachment ID.
515 * @param array $size Registered image size or flat array of height and width dimensions.
516 * @return string A source size value for use in a post thumbnail 'sizes' attribute.
518 function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
519 if ( is_archive() || is_search() || is_home() ) {
520 $attr['sizes'] = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
522 $attr['sizes'] = '100vw';
527 add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );
530 * Use front-page.php when Front page displays is set to a static page.
532 * @since Twenty Seventeen 1.0
534 * @param string $template front-page.php.
536 * @return string The template to be used: blank if is_home() is true (defaults to index.php), else $template.
538 function twentyseventeen_front_page_template( $template ) {
539 return is_home() ? '' : $template;
541 add_filter( 'frontpage_template', 'twentyseventeen_front_page_template' );
544 * Implement the Custom Header feature.
546 require get_parent_theme_file_path( '/inc/custom-header.php' );
549 * Custom template tags for this theme.
551 require get_parent_theme_file_path( '/inc/template-tags.php' );
554 * Additional features to allow styling of the templates.
556 require get_parent_theme_file_path( '/inc/template-functions.php' );
559 * Customizer additions.
561 require get_parent_theme_file_path( '/inc/customizer.php' );
564 * SVG icons functions and filters.
566 require get_parent_theme_file_path( '/inc/icon-functions.php' );