wp-content/themes/twentyseventeen/functions.php

   1 <?php
   2 /**
   3  * Twenty Seventeen functions and definitions
   4  *
   5  * @link https://developer.wordpress.org/themes/basics/theme-functions/
   6  *
   7  * @package WordPress
   8  * @subpackage Twenty_Seventeen
   9  * @since 1.0
  10  */
  11
  12 /**
  13  * Twenty Seventeen only works in WordPress 4.7 or later.
  14  */
  15 if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
  16         require get_template_directory() . '/inc/back-compat.php';
  17         return;
  18 }
  19
  20 /**
  21  * Sets up theme defaults and registers support for various WordPress features.
  22  *
  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.
  26  */
  27 function twentyseventeen_setup() {
  28         /*
  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.
  33          */
  34         load_theme_textdomain( 'twentyseventeen' );
  35
  36         // Add default posts and comments RSS feed links to head.
  37         add_theme_support( 'automatic-feed-links' );
  38
  39         /*
  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
  43          * provide it for us.
  44          */
  45         add_theme_support( 'title-tag' );
  46
  47         /*
  48          * Enable support for Post Thumbnails on posts and pages.
  49          *
  50          * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
  51          */
  52         add_theme_support( 'post-thumbnails' );
  53
  54         add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );
  55
  56         add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );
  57
  58         // Set the default content width.
  59         $GLOBALS['content_width'] = 525;
  60
  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' ),
  65         ) );
  66
  67         /*
  68          * Switch default core markup for search form, comment form, and comments
  69          * to output valid HTML5.
  70          */
  71         add_theme_support( 'html5', array(
  72                 'comment-form',
  73                 'comment-list',
  74                 'gallery',
  75                 'caption',
  76         ) );
  77
  78         /*
  79          * Enable support for Post Formats.
  80          *
  81          * See: https://codex.wordpress.org/Post_Formats
  82          */
  83         add_theme_support( 'post-formats', array(
  84                 'aside',
  85                 'image',
  86                 'video',
  87                 'quote',
  88                 'link',
  89                 'gallery',
  90                 'audio',
  91         ) );
  92
  93         // Add theme support for Custom Logo.
  94         add_theme_support( 'custom-logo', array(
  95                 'width'       => 250,
  96                 'height'      => 250,
  97                 'flex-width'  => true,
  98         ) );
  99
 100         // Add theme support for selective refresh for widgets.
 101         add_theme_support( 'customize-selective-refresh-widgets' );
 102
 103         /*
 104          * This theme styles the visual editor to resemble the theme style,
 105          * specifically font, colors, and column width.
 106          */
 107         add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );
 108
 109         // Define and register starter content to showcase the theme on new sites.
 110         $starter_content = array(
 111                 'widgets' => array(
 112                         // Place three core-defined widgets in the sidebar area.
 113                         'sidebar-1' => array(
 114                                 'text_business_info',
 115                                 'search',
 116                                 'text_about',
 117                         ),
 118
 119                         // Add the core-defined business info widget to the footer 1 area.
 120                         'sidebar-2' => array(
 121                                 'text_business_info',
 122                         ),
 123
 124                         // Put two core-defined widgets in the footer 2 area.
 125                         'sidebar-3' => array(
 126                                 'text_about',
 127                                 'search',
 128                         ),
 129                 ),
 130
 131                 // Specify the core-defined pages to create and add custom thumbnails to some of them.
 132                 'posts' => array(
 133                         'home',
 134                         'about' => array(
 135                                 'thumbnail' => '{{image-sandwich}}',
 136                         ),
 137                         'contact' => array(
 138                                 'thumbnail' => '{{image-espresso}}',
 139                         ),
 140                         'blog' => array(
 141                                 'thumbnail' => '{{image-coffee}}',
 142                         ),
 143                         'homepage-section' => array(
 144                                 'thumbnail' => '{{image-espresso}}',
 145                         ),
 146                 ),
 147
 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.
 153                         ),
 154                         'image-sandwich' => array(
 155                                 'post_title' => _x( 'Sandwich', 'Theme starter content', 'twentyseventeen' ),
 156                                 'file' => 'assets/images/sandwich.jpg',
 157                         ),
 158                         'image-coffee' => array(
 159                                 'post_title' => _x( 'Coffee', 'Theme starter content', 'twentyseventeen' ),
 160                                 'file' => 'assets/images/coffee.jpg',
 161                         ),
 162                 ),
 163
 164                 // Default to a static front page and assign the front and posts pages.
 165                 'options' => array(
 166                         'show_on_front' => 'page',
 167                         'page_on_front' => '{{home}}',
 168                         'page_for_posts' => '{{blog}}',
 169                 ),
 170
 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}}',
 177                 ),
 178
 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.
 182                         'top' => array(
 183                                 'name' => __( 'Top Menu', 'twentyseventeen' ),
 184                                 'items' => array(
 185                                         'link_home', // Note that the core "home" page is actually a link in case a static front page is not used.
 186                                         'page_about',
 187                                         'page_blog',
 188                                         'page_contact',
 189                                 ),
 190                         ),
 191
 192                         // Assign a menu to the "social" location.
 193                         'social' => array(
 194                                 'name' => __( 'Social Links Menu', 'twentyseventeen' ),
 195                                 'items' => array(
 196                                         'link_yelp',
 197                                         'link_facebook',
 198                                         'link_twitter',
 199                                         'link_instagram',
 200                                         'link_email',
 201                                 ),
 202                         ),
 203                 ),
 204         );
 205
 206         /**
 207          * Filters Twenty Seventeen array of starter content.
 208          *
 209          * @since Twenty Seventeen 1.1
 210          *
 211          * @param array $starter_content Array of starter content.
 212          */
 213         $starter_content = apply_filters( 'twentyseventeen_starter_content', $starter_content );
 214
 215         add_theme_support( 'starter-content', $starter_content );
 216 }
 217 add_action( 'after_setup_theme', 'twentyseventeen_setup' );
 218
 219 /**
 220  * Set the content width in pixels, based on the theme's design and stylesheet.
 221  *
 222  * Priority 0 to make it available to lower priority callbacks.
 223  *
 224  * @global int $content_width
 225  */
 226 function twentyseventeen_content_width() {
 227
 228         $content_width = $GLOBALS['content_width'];
 229
 230         // Get layout.
 231         $page_layout = get_theme_mod( 'page_layout' );
 232
 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;
 239                 }
 240         }
 241
 242         // Check if is single post and there is no sidebar.
 243         if ( is_single() && ! is_active_sidebar( 'sidebar-1' ) ) {
 244                 $content_width = 740;
 245         }
 246
 247         /**
 248          * Filter Twenty Seventeen content width of the theme.
 249          *
 250          * @since Twenty Seventeen 1.0
 251          *
 252          * @param $content_width integer
 253          */
 254         $GLOBALS['content_width'] = apply_filters( 'twentyseventeen_content_width', $content_width );
 255 }
 256 add_action( 'template_redirect', 'twentyseventeen_content_width', 0 );
 257
 258 /**
 259  * Register custom fonts.
 260  */
 261 function twentyseventeen_fonts_url() {
 262         $fonts_url = '';
 263
 264         /**
 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.
 268          */
 269         $libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );
 270
 271         if ( 'off' !== $libre_franklin ) {
 272                 $font_families = array();
 273
 274                 $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
 275
 276                 $query_args = array(
 277                         'family' => urlencode( implode( '|', $font_families ) ),
 278                         'subset' => urlencode( 'latin,latin-ext' ),
 279                 );
 280
 281                 $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
 282         }
 283
 284         return esc_url_raw( $fonts_url );
 285 }
 286
 287 /**
 288  * Add preconnect for Google Fonts.
 289  *
 290  * @since Twenty Seventeen 1.0
 291  *
 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.
 295  */
 296 function twentyseventeen_resource_hints( $urls, $relation_type ) {
 297         if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
 298                 $urls[] = array(
 299                         'href' => 'https://fonts.gstatic.com',
 300                         'crossorigin',
 301                 );
 302         }
 303
 304         return $urls;
 305 }
 306 add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );
 307
 308 /**
 309  * Register widget area.
 310  *
 311  * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 312  */
 313 function twentyseventeen_widgets_init() {
 314         register_sidebar( array(
 315                 'name'          => __( 'Sidebar', 'twentyseventeen' ),
 316                 'id'            => 'sidebar-1',
 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>',
 322         ) );
 323
 324         register_sidebar( array(
 325                 'name'          => __( 'Footer 1', 'twentyseventeen' ),
 326                 'id'            => 'sidebar-2',
 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>',
 332         ) );
 333
 334         register_sidebar( array(
 335                 'name'          => __( 'Footer 2', 'twentyseventeen' ),
 336                 'id'            => 'sidebar-3',
 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>',
 342         ) );
 343 }
 344 add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
 345
 346 /**
 347  * Replaces "[...]" (appended to automatically generated excerpts) with ... and
 348  * a 'Continue reading' link.
 349  *
 350  * @since Twenty Seventeen 1.0
 351  *
 352  * @return string 'Continue reading' link prepended with an ellipsis.
 353  */
 354 function twentyseventeen_excerpt_more( $link ) {
 355         if ( is_admin() ) {
 356                 return $link;
 357         }
 358
 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() ) )
 363         );
 364         return ' &hellip; ' . $link;
 365 }
 366 add_filter( 'excerpt_more', 'twentyseventeen_excerpt_more' );
 367
 368 /**
 369  * Handles JavaScript detection.
 370  *
 371  * Adds a `js` class to the root `<html>` element when JavaScript is detected.
 372  *
 373  * @since Twenty Seventeen 1.0
 374  */
 375 function twentyseventeen_javascript_detection() {
 376         echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
 377 }
 378 add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );
 379
 380 /**
 381  * Add a pingback url auto-discovery header for singularly identifiable articles.
 382  */
 383 function twentyseventeen_pingback_header() {
 384         if ( is_singular() && pings_open() ) {
 385                 printf( '<link rel="pingback" href="%s">' . "\n", get_bloginfo( 'pingback_url' ) );
 386         }
 387 }
 388 add_action( 'wp_head', 'twentyseventeen_pingback_header' );
 389
 390 /**
 391  * Display custom color CSS.
 392  */
 393 function twentyseventeen_colors_css_wrap() {
 394         if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
 395                 return;
 396         }
 397
 398         require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
 399         $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
 400 ?>
 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(); ?>
 403         </style>
 404 <?php }
 405 add_action( 'wp_head', 'twentyseventeen_colors_css_wrap' );
 406
 407 /**
 408  * Enqueue scripts and styles.
 409  */
 410 function twentyseventeen_scripts() {
 411         // Add custom fonts, used in the main stylesheet.
 412         wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
 413
 414         // Theme stylesheet.
 415         wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
 416
 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' );
 420         }
 421
 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' );
 426         }
 427
 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' );
 431
 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' );
 435
 436         wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0', true );
 437
 438         $twentyseventeen_l10n = array(
 439                 'quote'          => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
 440         );
 441
 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 ) );
 447         }
 448
 449         wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
 450
 451         wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true );
 452
 453         wp_localize_script( 'twentyseventeen-skip-link-focus-fix', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );
 454
 455         if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 456                 wp_enqueue_script( 'comment-reply' );
 457         }
 458 }
 459 add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );
 460
 461 /**
 462  * Add custom image sizes attribute to enhance responsive image functionality
 463  * for content images.
 464  *
 465  * @since Twenty Seventeen 1.0
 466  *
 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.
 471  */
 472 function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
 473         $width = $size[0];
 474
 475         if ( 740 <= $width ) {
 476                 $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
 477         }
 478
 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';
 482                 }
 483         }
 484
 485         return $sizes;
 486 }
 487 add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );
 488
 489 /**
 490  * Filter the `sizes` value in the header image markup.
 491  *
 492  * @since Twenty Seventeen 1.0
 493  *
 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.
 498  */
 499 function twentyseventeen_header_image_tag( $html, $header, $attr ) {
 500         if ( isset( $attr['sizes'] ) ) {
 501                 $html = str_replace( $attr['sizes'], '100vw', $html );
 502         }
 503         return $html;
 504 }
 505 add_filter( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 );
 506
 507 /**
 508  * Add custom image sizes attribute to enhance responsive image functionality
 509  * for post thumbnails.
 510  *
 511  * @since Twenty Seventeen 1.0
 512  *
 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.
 517  */
 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';
 521         } else {
 522                 $attr['sizes'] = '100vw';
 523         }
 524
 525         return $attr;
 526 }
 527 add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );
 528
 529 /**
 530  * Use front-page.php when Front page displays is set to a static page.
 531  *
 532  * @since Twenty Seventeen 1.0
 533  *
 534  * @param string $template front-page.php.
 535  *
 536  * @return string The template to be used: blank if is_home() is true (defaults to index.php), else $template.
 537  */
 538 function twentyseventeen_front_page_template( $template ) {
 539         return is_home() ? '' : $template;
 540 }
 541 add_filter( 'frontpage_template',  'twentyseventeen_front_page_template' );
 542
 543 /**
 544  * Implement the Custom Header feature.
 545  */
 546 require get_parent_theme_file_path( '/inc/custom-header.php' );
 547
 548 /**
 549  * Custom template tags for this theme.
 550  */
 551 require get_parent_theme_file_path( '/inc/template-tags.php' );
 552
 553 /**
 554  * Additional features to allow styling of the templates.
 555  */
 556 require get_parent_theme_file_path( '/inc/template-functions.php' );
 557
 558 /**
 559  * Customizer additions.
 560  */
 561 require get_parent_theme_file_path( '/inc/customizer.php' );
 562
 563 /**
 564  * SVG icons functions and filters.
 565  */
 566 require get_parent_theme_file_path( '/inc/icon-functions.php' );