API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 26th, 2017
544
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.91 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. /**
  3. * Twenty Sixteen Customizer functionality
  4. *
  5. * @package WordPress
  6. * @subpackage Twenty_Sixteen
  7. * @since Twenty Sixteen 1.0
  8. */
  9.  
  10. /**
  11. * Sets up the WordPress core custom header and custom background features.
  12. *
  13. * @since Twenty Sixteen 1.0
  14. *
  15. * @see twentysixteen_header_style()
  16. */
  17. function twentysixteen_custom_header_and_background() {
  18. $color_scheme = twentysixteen_get_color_scheme();
  19. $default_background_color = trim( $color_scheme[0], '#' );
  20. $default_text_color = trim( $color_scheme[3], '#' );
  21.  
  22. /**
  23. * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen.
  24. *
  25. * @since Twenty Sixteen 1.0
  26. *
  27. * @param array $args {
  28. * An array of custom-background support arguments.
  29. *
  30. * @type string $default-color Default color of the background.
  31. * }
  32. */
  33. add_theme_support( 'custom-background', apply_filters( 'twentysixteen_custom_background_args', array(
  34. 'default-color' => $default_background_color,
  35. ) ) );
  36.  
  37. /**
  38. * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen.
  39. *
  40. * @since Twenty Sixteen 1.0
  41. *
  42. * @param array $args {
  43. * An array of custom-header support arguments.
  44. *
  45. * @type string $default-text-color Default color of the header text.
  46. * @type int $width Width in pixels of the custom header image. Default 1200.
  47. * @type int $height Height in pixels of the custom header image. Default 280.
  48. * @type bool $flex-height Whether to allow flexible-height header images. Default true.
  49. * @type callable $wp-head-callback Callback function used to style the header image and text
  50. * displayed on the blog.
  51. * }
  52. */
  53. add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
  54. 'default-text-color' => $default_text_color,
  55. 'width' => 1200,
  56. 'height' => 280,
  57. 'flex-height' => true,
  58. 'wp-head-callback' => 'twentysixteen_header_style',
  59. ) ) );
  60. }
  61.  
  62.  
  63. if ( ! function_exists( 'twentysixteen_header_style' ) ) :
  64. /**
  65. * Styles the header text displayed on the site.
  66. *
  67. * Create your own twentysixteen_header_style() function to override in a child theme.
  68. *
  69. * @since Twenty Sixteen 1.0
  70. *
  71. * @see twentysixteen_custom_header_and_background().
  72. */
  73. function twentysixteen_header_style() {
  74. // If the header text option is untouched, let's bail.
  75. if ( display_header_text() ) {
  76. return;
  77. }
  78.  
  79. // If the header text has been hidden.
  80. ?>
  81. <style type="text/css" id="twentysixteen-header-css">
  82. .site-branding {
  83. margin: 0 auto 0 0;
  84. }
  85.  
  86. .site-branding .site-title,
  87. .site-description {
  88. clip: rect(1px, 1px, 1px, 1px);
  89. position: absolute;
  90. }
  91. </style>
  92. <?php
  93. }
  94. endif; // twentysixteen_header_style
  95.  
  96. /**
  97. * Adds postMessage support for site title and description for the Customizer.
  98. *
  99. * @since Twenty Sixteen 1.0
  100. *
  101. * @param WP_Customize_Manager $wp_customize The Customizer object.
  102. */
  103. function twentysixteen_customize_register( $wp_customize ) {
  104. $color_scheme = twentysixteen_get_color_scheme();
  105.  
  106. $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
  107. $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
  108.  
  109. if ( isset( $wp_customize->selective_refresh ) ) {
  110. $wp_customize->selective_refresh->add_partial( 'blogname', array(
  111. 'selector' => '.site-title a',
  112. 'container_inclusive' => false,
  113. 'render_callback' => 'twentysixteen_customize_partial_blogname',
  114. ) );
  115. $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
  116. 'selector' => '.site-description',
  117. 'container_inclusive' => false,
  118. 'render_callback' => 'twentysixteen_customize_partial_blogdescription',
  119. ) );
  120. }
  121.  
  122. // Remove the core header textcolor control, as it shares the main text color.
  123. $wp_customize->remove_control( 'background_color' );
  124.  
  125. // Add color scheme setting and control.
  126. $wp_customize->add_setting( 'color_scheme', array(
  127. 'default' => 'default',
  128. 'sanitize_callback' => 'twentysixteen_sanitize_color_scheme',
  129. 'transport' => 'postMessage',
  130. ) );
  131.  
  132. $wp_customize->add_control( 'color_scheme', array(
  133. 'label' => __( 'Base Color Scheme', 'twentysixteen' ),
  134. 'section' => 'colors',
  135. 'type' => 'select',
  136. 'choices' => twentysixteen_get_color_scheme_choices(),
  137. 'priority' => 1,
  138. ) );
  139.  
  140.  
  141. // Add page background color setting and control.
  142. $wp_customize->add_setting( 'page_background_color', array(
  143. 'default' => $color_scheme[1],
  144. 'sanitize_callback' => 'sanitize_hex_color',
  145. 'transport' => 'postMessage',
  146. ) );
  147.  
  148. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'page_background_color', array(
  149. 'label' => __( 'Header Background Color', 'twentysixteen' ),
  150. 'section' => 'colors',
  151. ) ) );
  152.  
  153. // Remove the core header textcolor control, as it shares the main text color.
  154. $wp_customize->remove_control( 'header_textcolor' );
  155.  
  156. // Add link color setting and control.
  157. $wp_customize->add_setting( 'link_color', array(
  158. 'default' => $color_scheme[2],
  159. 'sanitize_callback' => 'sanitize_hex_color',
  160. 'transport' => 'postMessage',
  161. ) );
  162.  
  163. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
  164. 'label' => __( 'Header Text Color', 'twentysixteen' ),
  165. 'section' => 'colors',
  166. ) ) );
  167.  
  168. // Add main text color setting and control.
  169. $wp_customize->add_setting( 'main_text_color', array(
  170. 'default' => $color_scheme[3],
  171. 'sanitize_callback' => 'sanitize_hex_color',
  172. 'transport' => 'postMessage',
  173. ) );
  174.  
  175. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array(
  176. 'label' => __( 'Sidebar Left Background Color', 'twentysixteen' ),
  177. 'section' => 'colors',
  178. ) ) );
  179.  
  180. // Add secondary text color setting and control.
  181. $wp_customize->add_setting( 'secondary_text_color', array(
  182. 'default' => $color_scheme[4],
  183. 'sanitize_callback' => 'sanitize_hex_color',
  184. 'transport' => 'postMessage',
  185. ) );
  186.  
  187. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array(
  188. 'label' => __( 'Sidebar Right Background Color', 'twentysixteen' ),
  189. 'section' => 'colors',
  190. ) ) );
  191. }
  192. add_action( 'customize_register', 'twentysixteen_customize_register', 11 );
  193.  
  194. /**
  195. * Render the site title for the selective refresh partial.
  196. *
  197. * @since Twenty Sixteen 1.2
  198. * @see twentysixteen_customize_register()
  199. *
  200. * @return void
  201. */
  202. function twentysixteen_customize_partial_blogname() {
  203. bloginfo( 'name' );
  204. }
  205.  
  206. /**
  207. * Render the site tagline for the selective refresh partial.
  208. *
  209. * @since Twenty Sixteen 1.2
  210. * @see twentysixteen_customize_register()
  211. *
  212. * @return void
  213. */
  214. function twentysixteen_customize_partial_blogdescription() {
  215. bloginfo( 'description' );
  216. }
  217.  
  218. /**
  219. * Registers color schemes for Twenty Sixteen.
  220. *
  221. * Can be filtered with {@see 'twentysixteen_color_schemes'}.
  222. *
  223. * The order of colors in a colors array:
  224. * 1. Main Background Color.
  225. * 2. Page Background Color.
  226. * 3. Link Color.
  227. * 4. Main Text Color.
  228. * 5. Secondary Text Color.
  229. *
  230. * @since Twenty Sixteen 1.0
  231. *
  232. * @return array An associative array of color scheme options.
  233. */
  234. function twentysixteen_get_color_schemes() {
  235. /**
  236. * Filter the color schemes registered for use with Twenty Sixteen.
  237. *
  238. * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'.
  239. *
  240. * @since Twenty Sixteen 1.0
  241. *
  242. * @param array $schemes {
  243. * Associative array of color schemes data.
  244. *
  245. * @type array $slug {
  246. * Associative array of information for setting up the color scheme.
  247. *
  248. * @type string $label Color scheme label.
  249. * @type array $colors HEX codes for default colors prepended with a hash symbol ('#').
  250. * Colors are defined in the following order: Main background, page
  251. * background, link, main text, secondary text.
  252. * }
  253. * }
  254. */
  255. return apply_filters( 'twentysixteen_color_schemes', array(
  256. 'default' => array(
  257. 'label' => __( 'Default', 'twentysixteen' ),
  258. 'colors' => array(
  259. '#1a1a1a',
  260. '#ffffff',
  261. '#007acc',
  262. '#1a1a1a',
  263. '#686868',
  264. ),
  265. ),
  266. 'dark' => array(
  267. 'label' => __( 'Dark', 'twentysixteen' ),
  268. 'colors' => array(
  269. '#262626',
  270. '#1a1a1a',
  271. '#9adffd',
  272. '#e5e5e5',
  273. '#c1c1c1',
  274. ),
  275. ),
  276. 'gray' => array(
  277. 'label' => __( 'Gray', 'twentysixteen' ),
  278. 'colors' => array(
  279. '#616a73',
  280. '#4d545c',
  281. '#c7c7c7',
  282. '#f2f2f2',
  283. '#f2f2f2',
  284. ),
  285. ),
  286. 'red' => array(
  287. 'label' => __( 'Red', 'twentysixteen' ),
  288. 'colors' => array(
  289. '#ffffff',
  290. '#ff675f',
  291. '#640c1f',
  292. '#402b30',
  293. '#402b30',
  294. ),
  295. ),
  296. 'yellow' => array(
  297. 'label' => __( 'Yellow', 'twentysixteen' ),
  298. 'colors' => array(
  299. '#3b3721',
  300. '#ffef8e',
  301. '#774e24',
  302. '#3b3721',
  303. '#5b4d3e',
  304. ),
  305. ),
  306. ) );
  307. }
  308.  
  309. if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) :
  310. /**
  311. * Retrieves the current Twenty Sixteen color scheme.
  312. *
  313. * Create your own twentysixteen_get_color_scheme() function to override in a child theme.
  314. *
  315. * @since Twenty Sixteen 1.0
  316. *
  317. * @return array An associative array of either the current or default color scheme HEX values.
  318. */
  319. function twentysixteen_get_color_scheme() {
  320. $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
  321. $color_schemes = twentysixteen_get_color_schemes();
  322.  
  323. if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
  324. return $color_schemes[ $color_scheme_option ]['colors'];
  325. }
  326.  
  327. return $color_schemes['default']['colors'];
  328. }
  329. endif; // twentysixteen_get_color_scheme
  330.  
  331. if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) :
  332. /**
  333. * Retrieves an array of color scheme choices registered for Twenty Sixteen.
  334. *
  335. * Create your own twentysixteen_get_color_scheme_choices() function to override
  336. * in a child theme.
  337. *
  338. * @since Twenty Sixteen 1.0
  339. *
  340. * @return array Array of color schemes.
  341. */
  342. function twentysixteen_get_color_scheme_choices() {
  343. $color_schemes = twentysixteen_get_color_schemes();
  344. $color_scheme_control_options = array();
  345.  
  346. foreach ( $color_schemes as $color_scheme => $value ) {
  347. $color_scheme_control_options[ $color_scheme ] = $value['label'];
  348. }
  349.  
  350. return $color_scheme_control_options;
  351. }
  352. endif; // twentysixteen_get_color_scheme_choices
  353.  
  354.  
  355. if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) :
  356. /**
  357. * Handles sanitization for Twenty Sixteen color schemes.
  358. *
  359. * Create your own twentysixteen_sanitize_color_scheme() function to override
  360. * in a child theme.
  361. *
  362. * @since Twenty Sixteen 1.0
  363. *
  364. * @param string $value Color scheme name value.
  365. * @return string Color scheme name.
  366. */
  367. function twentysixteen_sanitize_color_scheme( $value ) {
  368. $color_schemes = twentysixteen_get_color_scheme_choices();
  369.  
  370. if ( ! array_key_exists( $value, $color_schemes ) ) {
  371. return 'default';
  372. }
  373.  
  374. return $value;
  375. }
  376. endif; // twentysixteen_sanitize_color_scheme
  377.  
  378. /**
  379. * Enqueues front-end CSS for color scheme.
  380. *
  381. * @since Twenty Sixteen 1.0
  382. *
  383. * @see wp_add_inline_style()
  384. */
  385. function twentysixteen_color_scheme_css() {
  386. $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
  387.  
  388. // Don't do anything if the default color scheme is selected.
  389. if ( 'default' === $color_scheme_option ) {
  390. return;
  391. }
  392.  
  393. $color_scheme = twentysixteen_get_color_scheme();
  394.  
  395. // Convert main text hex color to rgba.
  396. $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] );
  397.  
  398. // If the rgba values are empty return early.
  399. if ( empty( $color_textcolor_rgb ) ) {
  400. return;
  401. }
  402.  
  403. // If we get this far, we have a custom color scheme.
  404. $colors = array(
  405. 'background_color' => $color_scheme[0],
  406. 'page_background_color' => $color_scheme[1],
  407. 'link_color' => $color_scheme[2],
  408. 'main_text_color' => $color_scheme[3],
  409. 'secondary_text_color' => $color_scheme[4],
  410. 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ),
  411.  
  412. );
  413.  
  414. $color_scheme_css = twentysixteen_get_color_scheme_css( $colors );
  415.  
  416. wp_add_inline_style( 'twentysixteen-style', $color_scheme_css );
  417. }
  418. add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' );
  419.  
  420. /**
  421. * Binds the JS listener to make Customizer color_scheme control.
  422. *
  423. * Passes color scheme data as colorScheme global.
  424. *
  425. * @since Twenty Sixteen 1.0
  426. */
  427. function twentysixteen_customize_control_js() {
  428. wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20160816', true );
  429. wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() );
  430. }
  431. add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' );
  432.  
  433. /**
  434. * Binds JS handlers to make the Customizer preview reload changes asynchronously.
  435. *
  436. * @since Twenty Sixteen 1.0
  437. */
  438. function twentysixteen_customize_preview_js() {
  439. wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20160816', true );
  440. }
  441. add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' );
  442.  
  443. /**
  444. * Returns CSS for the color schemes.
  445. *
  446. * @since Twenty Sixteen 1.0
  447. *
  448. * @param array $colors Color scheme colors.
  449. * @return string Color scheme CSS.
  450. */
  451. function twentysixteen_get_color_scheme_css( $colors ) {
  452. $colors = wp_parse_args( $colors, array(
  453. 'background_color' => '',
  454. 'page_background_color' => '',
  455. 'link_color' => '',
  456. 'main_text_color' => '',
  457. 'secondary_text_color' => '',
  458. 'border_color' => '',
  459. ) );
  460.  
  461. return <<<CSS
  462. /* Color Scheme */
  463.  
  464. /* Background Color */
  465.  
  466.  
  467. /* Page Background Color */
  468. .site {
  469. background-color: {$colors['page_background_color']};
  470. }
  471.  
  472.  
  473. CSS;
  474. }
  475.  
  476.  
  477. /**
  478. * Outputs an Underscore template for generating CSS for the color scheme.
  479. *
  480. * The template generates the css dynamically for instant display in the
  481. * Customizer preview.
  482. *
  483. * @since Twenty Sixteen 1.0
  484. */
  485. function twentysixteen_color_scheme_css_template() {
  486. $colors = array(
  487. 'background_color' => '{{ data.background_color }}',
  488. 'page_background_color' => '{{ data.page_background_color }}',
  489. 'link_color' => '{{ data.link_color }}',
  490. 'main_text_color' => '{{ data.main_text_color }}',
  491. 'secondary_text_color' => '{{ data.secondary_text_color }}',
  492. 'border_color' => '{{ data.border_color }}',
  493. );
  494. ?>
  495. <script type="text/html" id="tmpl-twentysixteen-color-scheme">
  496. <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
  497. </script>
  498. <?php
  499. }
  500. add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
  501.  
  502. /**
  503. * Enqueues front-end CSS for the page background color.
  504. *
  505. * @since Twenty Sixteen 1.0
  506. *
  507. * @see wp_add_inline_style()
  508. */
  509. function twentysixteen_page_background_color_css() {
  510. $color_scheme = twentysixteen_get_color_scheme();
  511. $default_color = $color_scheme[1];
  512. $page_background_color = get_theme_mod( 'page_background_color', $default_color );
  513.  
  514. // Don't do anything if the current color is the default.
  515. if ( $page_background_color === $default_color ) {
  516. return;
  517. }
  518.  
  519. $css = '
  520. /* Custom Header Background Color */
  521.  
  522. .ui-bar-a {
  523. background-color: %1$s;
  524. }
  525.  
  526. ';
  527.  
  528. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) );
  529. }
  530. add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 );
  531.  
  532. /**
  533. * Enqueues front-end CSS for the link color.
  534. *
  535. * @since Twenty Sixteen 1.0
  536. *
  537. * @see wp_add_inline_style()
  538. */
  539. function twentysixteen_link_color_css() {
  540. $color_scheme = twentysixteen_get_color_scheme();
  541. $default_color = $color_scheme[2];
  542. $link_color = get_theme_mod( 'link_color', $default_color );
  543.  
  544. // Don't do anything if the current color is the default.
  545. if ( $link_color === $default_color ) {
  546. return;
  547. }
  548.  
  549. $css = '
  550. /* Custom Header Text Color */
  551.  
  552. [data-role=header] .header-title {
  553. color: %1$s;
  554. }
  555.  
  556. [data-role=panel][data-theme=d] .widget * {
  557. color: %1$s;
  558. }
  559.  
  560. [data-role=panel][data-theme=d] ul li a {
  561. color: %1$s !important;
  562. }
  563. ';
  564.  
  565. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) );
  566. }
  567. add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 );
  568.  
  569. /**
  570. * Enqueues front-end CSS for the main text color.
  571. *
  572. * @since Twenty Sixteen 1.0
  573. *
  574. * @see wp_add_inline_style()
  575. */
  576. function twentysixteen_main_text_color_css() {
  577. $color_scheme = twentysixteen_get_color_scheme();
  578. $default_color = $color_scheme[3];
  579. $main_text_color = get_theme_mod( 'main_text_color', $default_color );
  580.  
  581. // Don't do anything if the current color is the default.
  582. if ( $main_text_color === $default_color ) {
  583. return;
  584. }
  585.  
  586. // Convert main text hex color to rgba.
  587. $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color );
  588.  
  589. // If the rgba values are empty return early.
  590. if ( empty( $main_text_color_rgb ) ) {
  591. return;
  592. }
  593.  
  594. // If we get this far, we have a custom color scheme.
  595. $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
  596.  
  597. $css = '
  598.  
  599. /* Custom Sidebar Left Background Color */
  600.  
  601. [data-role=panel][data-theme=a] {
  602. background: %1$s;
  603. border-right: 1px solid %1$s;
  604. }
  605.  
  606. ';
  607.  
  608. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) );
  609. }
  610. add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 );
  611.  
  612. /**
  613. * Enqueues front-end CSS for the secondary text color.
  614. *
  615. * @since Twenty Sixteen 1.0
  616. *
  617. * @see wp_add_inline_style()
  618. */
  619. function twentysixteen_secondary_text_color_css() {
  620. $color_scheme = twentysixteen_get_color_scheme();
  621. $default_color = $color_scheme[4];
  622. $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
  623.  
  624. // Don't do anything if the current color is the default.
  625. if ( $secondary_text_color === $default_color ) {
  626. return;
  627. }
  628.  
  629. $css = '
  630. /* Custom Sidebar Right Background Color */
  631.  
  632. .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
  633. background: %1$s;
  634. }
  635.  
  636. .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
  637. background: %1$s;
  638. }
  639.  
  640. ';
  641.  
  642. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) );
  643. }
  644. add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!