customizer.php 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  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. * Sets up the WordPress core custom header and custom background features.
  11. *
  12. * @since Twenty Sixteen 1.0
  13. *
  14. * @see twentysixteen_header_style()
  15. */
  16. function twentysixteen_custom_header_and_background() {
  17. $color_scheme = twentysixteen_get_color_scheme();
  18. $default_background_color = trim( $color_scheme[0], '#' );
  19. $default_text_color = trim( $color_scheme[3], '#' );
  20. /**
  21. * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen.
  22. *
  23. * @since Twenty Sixteen 1.0
  24. *
  25. * @param array $args {
  26. * An array of custom-background support arguments.
  27. *
  28. * @type string $default-color Default color of the background.
  29. * }
  30. */
  31. add_theme_support( 'custom-background', apply_filters( 'twentysixteen_custom_background_args', array(
  32. 'default-color' => $default_background_color,
  33. ) ) );
  34. /**
  35. * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen.
  36. *
  37. * @since Twenty Sixteen 1.0
  38. *
  39. * @param array $args {
  40. * An array of custom-header support arguments.
  41. *
  42. * @type string $default-text-color Default color of the header text.
  43. * @type int $width Width in pixels of the custom header image. Default 1200.
  44. * @type int $height Height in pixels of the custom header image. Default 280.
  45. * @type bool $flex-height Whether to allow flexible-height header images. Default true.
  46. * @type callable $wp-head-callback Callback function used to style the header image and text
  47. * displayed on the blog.
  48. * }
  49. */
  50. add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
  51. 'default-text-color' => $default_text_color,
  52. 'width' => 1200,
  53. 'height' => 280,
  54. 'flex-height' => true,
  55. 'wp-head-callback' => 'twentysixteen_header_style',
  56. ) ) );
  57. }
  58. add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' );
  59. if ( ! function_exists( 'twentysixteen_header_style' ) ) :
  60. /**
  61. * Styles the header text displayed on the site.
  62. *
  63. * Create your own twentysixteen_header_style() function to override in a child theme.
  64. *
  65. * @since Twenty Sixteen 1.0
  66. *
  67. * @see twentysixteen_custom_header_and_background().
  68. */
  69. function twentysixteen_header_style() {
  70. // If the header text option is untouched, let's bail.
  71. if ( display_header_text() ) {
  72. return;
  73. }
  74. // If the header text has been hidden.
  75. ?>
  76. <style type="text/css" id="twentysixteen-header-css">
  77. .site-branding {
  78. margin: 0 auto 0 0;
  79. }
  80. .site-branding .site-title,
  81. .site-description {
  82. clip: rect(1px, 1px, 1px, 1px);
  83. position: absolute;
  84. }
  85. </style>
  86. <?php
  87. }
  88. endif; // twentysixteen_header_style
  89. /**
  90. * Adds postMessage support for site title and description for the Customizer.
  91. *
  92. * @since Twenty Sixteen 1.0
  93. *
  94. * @param WP_Customize_Manager $wp_customize The Customizer object.
  95. */
  96. function twentysixteen_customize_register( $wp_customize ) {
  97. $color_scheme = twentysixteen_get_color_scheme();
  98. $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
  99. $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
  100. if ( isset( $wp_customize->selective_refresh ) ) {
  101. $wp_customize->selective_refresh->add_partial( 'blogname', array(
  102. 'selector' => '.site-title a',
  103. 'container_inclusive' => false,
  104. 'render_callback' => 'twentysixteen_customize_partial_blogname',
  105. ) );
  106. $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
  107. 'selector' => '.site-description',
  108. 'container_inclusive' => false,
  109. 'render_callback' => 'twentysixteen_customize_partial_blogdescription',
  110. ) );
  111. }
  112. // Add color scheme setting and control.
  113. $wp_customize->add_setting( 'color_scheme', array(
  114. 'default' => 'default',
  115. 'sanitize_callback' => 'twentysixteen_sanitize_color_scheme',
  116. 'transport' => 'postMessage',
  117. ) );
  118. $wp_customize->add_control( 'color_scheme', array(
  119. 'label' => __( 'Base Color Scheme', 'twentysixteen' ),
  120. 'section' => 'colors',
  121. 'type' => 'select',
  122. 'choices' => twentysixteen_get_color_scheme_choices(),
  123. 'priority' => 1,
  124. ) );
  125. // Add page background color setting and control.
  126. $wp_customize->add_setting( 'page_background_color', array(
  127. 'default' => $color_scheme[1],
  128. 'sanitize_callback' => 'sanitize_hex_color',
  129. 'transport' => 'postMessage',
  130. ) );
  131. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'page_background_color', array(
  132. 'label' => __( 'Page Background Color', 'twentysixteen' ),
  133. 'section' => 'colors',
  134. ) ) );
  135. // Remove the core header textcolor control, as it shares the main text color.
  136. $wp_customize->remove_control( 'header_textcolor' );
  137. // Add link color setting and control.
  138. $wp_customize->add_setting( 'link_color', array(
  139. 'default' => $color_scheme[2],
  140. 'sanitize_callback' => 'sanitize_hex_color',
  141. 'transport' => 'postMessage',
  142. ) );
  143. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
  144. 'label' => __( 'Link Color', 'twentysixteen' ),
  145. 'section' => 'colors',
  146. ) ) );
  147. // Add main text color setting and control.
  148. $wp_customize->add_setting( 'main_text_color', array(
  149. 'default' => $color_scheme[3],
  150. 'sanitize_callback' => 'sanitize_hex_color',
  151. 'transport' => 'postMessage',
  152. ) );
  153. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array(
  154. 'label' => __( 'Main Text Color', 'twentysixteen' ),
  155. 'section' => 'colors',
  156. ) ) );
  157. // Add secondary text color setting and control.
  158. $wp_customize->add_setting( 'secondary_text_color', array(
  159. 'default' => $color_scheme[4],
  160. 'sanitize_callback' => 'sanitize_hex_color',
  161. 'transport' => 'postMessage',
  162. ) );
  163. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array(
  164. 'label' => __( 'Secondary Text Color', 'twentysixteen' ),
  165. 'section' => 'colors',
  166. ) ) );
  167. }
  168. add_action( 'customize_register', 'twentysixteen_customize_register', 11 );
  169. /**
  170. * Render the site title for the selective refresh partial.
  171. *
  172. * @since Twenty Sixteen 1.2
  173. * @see twentysixteen_customize_register()
  174. *
  175. * @return void
  176. */
  177. function twentysixteen_customize_partial_blogname() {
  178. bloginfo( 'name' );
  179. }
  180. /**
  181. * Render the site tagline for the selective refresh partial.
  182. *
  183. * @since Twenty Sixteen 1.2
  184. * @see twentysixteen_customize_register()
  185. *
  186. * @return void
  187. */
  188. function twentysixteen_customize_partial_blogdescription() {
  189. bloginfo( 'description' );
  190. }
  191. /**
  192. * Registers color schemes for Twenty Sixteen.
  193. *
  194. * Can be filtered with {@see 'twentysixteen_color_schemes'}.
  195. *
  196. * The order of colors in a colors array:
  197. * 1. Main Background Color.
  198. * 2. Page Background Color.
  199. * 3. Link Color.
  200. * 4. Main Text Color.
  201. * 5. Secondary Text Color.
  202. *
  203. * @since Twenty Sixteen 1.0
  204. *
  205. * @return array An associative array of color scheme options.
  206. */
  207. function twentysixteen_get_color_schemes() {
  208. /**
  209. * Filter the color schemes registered for use with Twenty Sixteen.
  210. *
  211. * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'.
  212. *
  213. * @since Twenty Sixteen 1.0
  214. *
  215. * @param array $schemes {
  216. * Associative array of color schemes data.
  217. *
  218. * @type array $slug {
  219. * Associative array of information for setting up the color scheme.
  220. *
  221. * @type string $label Color scheme label.
  222. * @type array $colors HEX codes for default colors prepended with a hash symbol ('#').
  223. * Colors are defined in the following order: Main background, page
  224. * background, link, main text, secondary text.
  225. * }
  226. * }
  227. */
  228. return apply_filters( 'twentysixteen_color_schemes', array(
  229. 'default' => array(
  230. 'label' => __( 'Default', 'twentysixteen' ),
  231. 'colors' => array(
  232. '#1a1a1a',
  233. '#ffffff',
  234. '#007acc',
  235. '#1a1a1a',
  236. '#686868',
  237. ),
  238. ),
  239. 'dark' => array(
  240. 'label' => __( 'Dark', 'twentysixteen' ),
  241. 'colors' => array(
  242. '#262626',
  243. '#1a1a1a',
  244. '#9adffd',
  245. '#e5e5e5',
  246. '#c1c1c1',
  247. ),
  248. ),
  249. 'gray' => array(
  250. 'label' => __( 'Gray', 'twentysixteen' ),
  251. 'colors' => array(
  252. '#616a73',
  253. '#4d545c',
  254. '#c7c7c7',
  255. '#f2f2f2',
  256. '#f2f2f2',
  257. ),
  258. ),
  259. 'red' => array(
  260. 'label' => __( 'Red', 'twentysixteen' ),
  261. 'colors' => array(
  262. '#ffffff',
  263. '#ff675f',
  264. '#640c1f',
  265. '#402b30',
  266. '#402b30',
  267. ),
  268. ),
  269. 'yellow' => array(
  270. 'label' => __( 'Yellow', 'twentysixteen' ),
  271. 'colors' => array(
  272. '#3b3721',
  273. '#ffef8e',
  274. '#774e24',
  275. '#3b3721',
  276. '#5b4d3e',
  277. ),
  278. ),
  279. ) );
  280. }
  281. if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) :
  282. /**
  283. * Retrieves the current Twenty Sixteen color scheme.
  284. *
  285. * Create your own twentysixteen_get_color_scheme() function to override in a child theme.
  286. *
  287. * @since Twenty Sixteen 1.0
  288. *
  289. * @return array An associative array of either the current or default color scheme HEX values.
  290. */
  291. function twentysixteen_get_color_scheme() {
  292. $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
  293. $color_schemes = twentysixteen_get_color_schemes();
  294. if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
  295. return $color_schemes[ $color_scheme_option ]['colors'];
  296. }
  297. return $color_schemes['default']['colors'];
  298. }
  299. endif; // twentysixteen_get_color_scheme
  300. if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) :
  301. /**
  302. * Retrieves an array of color scheme choices registered for Twenty Sixteen.
  303. *
  304. * Create your own twentysixteen_get_color_scheme_choices() function to override
  305. * in a child theme.
  306. *
  307. * @since Twenty Sixteen 1.0
  308. *
  309. * @return array Array of color schemes.
  310. */
  311. function twentysixteen_get_color_scheme_choices() {
  312. $color_schemes = twentysixteen_get_color_schemes();
  313. $color_scheme_control_options = array();
  314. foreach ( $color_schemes as $color_scheme => $value ) {
  315. $color_scheme_control_options[ $color_scheme ] = $value['label'];
  316. }
  317. return $color_scheme_control_options;
  318. }
  319. endif; // twentysixteen_get_color_scheme_choices
  320. if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) :
  321. /**
  322. * Handles sanitization for Twenty Sixteen color schemes.
  323. *
  324. * Create your own twentysixteen_sanitize_color_scheme() function to override
  325. * in a child theme.
  326. *
  327. * @since Twenty Sixteen 1.0
  328. *
  329. * @param string $value Color scheme name value.
  330. * @return string Color scheme name.
  331. */
  332. function twentysixteen_sanitize_color_scheme( $value ) {
  333. $color_schemes = twentysixteen_get_color_scheme_choices();
  334. if ( ! array_key_exists( $value, $color_schemes ) ) {
  335. return 'default';
  336. }
  337. return $value;
  338. }
  339. endif; // twentysixteen_sanitize_color_scheme
  340. /**
  341. * Enqueues front-end CSS for color scheme.
  342. *
  343. * @since Twenty Sixteen 1.0
  344. *
  345. * @see wp_add_inline_style()
  346. */
  347. function twentysixteen_color_scheme_css() {
  348. $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
  349. // Don't do anything if the default color scheme is selected.
  350. if ( 'default' === $color_scheme_option ) {
  351. return;
  352. }
  353. $color_scheme = twentysixteen_get_color_scheme();
  354. // Convert main text hex color to rgba.
  355. $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] );
  356. // If the rgba values are empty return early.
  357. if ( empty( $color_textcolor_rgb ) ) {
  358. return;
  359. }
  360. // If we get this far, we have a custom color scheme.
  361. $colors = array(
  362. 'background_color' => $color_scheme[0],
  363. 'page_background_color' => $color_scheme[1],
  364. 'link_color' => $color_scheme[2],
  365. 'main_text_color' => $color_scheme[3],
  366. 'secondary_text_color' => $color_scheme[4],
  367. 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ),
  368. );
  369. $color_scheme_css = twentysixteen_get_color_scheme_css( $colors );
  370. wp_add_inline_style( 'twentysixteen-style', $color_scheme_css );
  371. }
  372. add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' );
  373. /**
  374. * Binds the JS listener to make Customizer color_scheme control.
  375. *
  376. * Passes color scheme data as colorScheme global.
  377. *
  378. * @since Twenty Sixteen 1.0
  379. */
  380. function twentysixteen_customize_control_js() {
  381. wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20160816', true );
  382. wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() );
  383. }
  384. add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' );
  385. /**
  386. * Binds JS handlers to make the Customizer preview reload changes asynchronously.
  387. *
  388. * @since Twenty Sixteen 1.0
  389. */
  390. function twentysixteen_customize_preview_js() {
  391. wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20160816', true );
  392. }
  393. add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' );
  394. /**
  395. * Returns CSS for the color schemes.
  396. *
  397. * @since Twenty Sixteen 1.0
  398. *
  399. * @param array $colors Color scheme colors.
  400. * @return string Color scheme CSS.
  401. */
  402. function twentysixteen_get_color_scheme_css( $colors ) {
  403. $colors = wp_parse_args( $colors, array(
  404. 'background_color' => '',
  405. 'page_background_color' => '',
  406. 'link_color' => '',
  407. 'main_text_color' => '',
  408. 'secondary_text_color' => '',
  409. 'border_color' => '',
  410. ) );
  411. return <<<CSS
  412. /* Color Scheme */
  413. /* Background Color */
  414. body {
  415. background-color: {$colors['background_color']};
  416. }
  417. /* Page Background Color */
  418. .site {
  419. background-color: {$colors['page_background_color']};
  420. }
  421. mark,
  422. ins,
  423. button,
  424. button[disabled]:hover,
  425. button[disabled]:focus,
  426. input[type="button"],
  427. input[type="button"][disabled]:hover,
  428. input[type="button"][disabled]:focus,
  429. input[type="reset"],
  430. input[type="reset"][disabled]:hover,
  431. input[type="reset"][disabled]:focus,
  432. input[type="submit"],
  433. input[type="submit"][disabled]:hover,
  434. input[type="submit"][disabled]:focus,
  435. .menu-toggle.toggled-on,
  436. .menu-toggle.toggled-on:hover,
  437. .menu-toggle.toggled-on:focus,
  438. .pagination .prev,
  439. .pagination .next,
  440. .pagination .prev:hover,
  441. .pagination .prev:focus,
  442. .pagination .next:hover,
  443. .pagination .next:focus,
  444. .pagination .nav-links:before,
  445. .pagination .nav-links:after,
  446. .widget_calendar tbody a,
  447. .widget_calendar tbody a:hover,
  448. .widget_calendar tbody a:focus,
  449. .page-links a,
  450. .page-links a:hover,
  451. .page-links a:focus {
  452. color: {$colors['page_background_color']};
  453. }
  454. /* Link Color */
  455. .menu-toggle:hover,
  456. .menu-toggle:focus,
  457. a,
  458. .main-navigation a:hover,
  459. .main-navigation a:focus,
  460. .dropdown-toggle:hover,
  461. .dropdown-toggle:focus,
  462. .social-navigation a:hover:before,
  463. .social-navigation a:focus:before,
  464. .post-navigation a:hover .post-title,
  465. .post-navigation a:focus .post-title,
  466. .tagcloud a:hover,
  467. .tagcloud a:focus,
  468. .site-branding .site-title a:hover,
  469. .site-branding .site-title a:focus,
  470. .entry-title a:hover,
  471. .entry-title a:focus,
  472. .entry-footer a:hover,
  473. .entry-footer a:focus,
  474. .comment-metadata a:hover,
  475. .comment-metadata a:focus,
  476. .pingback .comment-edit-link:hover,
  477. .pingback .comment-edit-link:focus,
  478. .comment-reply-link,
  479. .comment-reply-link:hover,
  480. .comment-reply-link:focus,
  481. .required,
  482. .site-info a:hover,
  483. .site-info a:focus {
  484. color: {$colors['link_color']};
  485. }
  486. mark,
  487. ins,
  488. button:hover,
  489. button:focus,
  490. input[type="button"]:hover,
  491. input[type="button"]:focus,
  492. input[type="reset"]:hover,
  493. input[type="reset"]:focus,
  494. input[type="submit"]:hover,
  495. input[type="submit"]:focus,
  496. .pagination .prev:hover,
  497. .pagination .prev:focus,
  498. .pagination .next:hover,
  499. .pagination .next:focus,
  500. .widget_calendar tbody a,
  501. .page-links a:hover,
  502. .page-links a:focus {
  503. background-color: {$colors['link_color']};
  504. }
  505. input[type="date"]:focus,
  506. input[type="time"]:focus,
  507. input[type="datetime-local"]:focus,
  508. input[type="week"]:focus,
  509. input[type="month"]:focus,
  510. input[type="text"]:focus,
  511. input[type="email"]:focus,
  512. input[type="url"]:focus,
  513. input[type="password"]:focus,
  514. input[type="search"]:focus,
  515. input[type="tel"]:focus,
  516. input[type="number"]:focus,
  517. textarea:focus,
  518. .tagcloud a:hover,
  519. .tagcloud a:focus,
  520. .menu-toggle:hover,
  521. .menu-toggle:focus {
  522. border-color: {$colors['link_color']};
  523. }
  524. /* Main Text Color */
  525. body,
  526. blockquote cite,
  527. blockquote small,
  528. .main-navigation a,
  529. .menu-toggle,
  530. .dropdown-toggle,
  531. .social-navigation a,
  532. .post-navigation a,
  533. .pagination a:hover,
  534. .pagination a:focus,
  535. .widget-title a,
  536. .site-branding .site-title a,
  537. .entry-title a,
  538. .page-links > .page-links-title,
  539. .comment-author,
  540. .comment-reply-title small a:hover,
  541. .comment-reply-title small a:focus {
  542. color: {$colors['main_text_color']};
  543. }
  544. blockquote,
  545. .menu-toggle.toggled-on,
  546. .menu-toggle.toggled-on:hover,
  547. .menu-toggle.toggled-on:focus,
  548. .post-navigation,
  549. .post-navigation div + div,
  550. .pagination,
  551. .widget,
  552. .page-header,
  553. .page-links a,
  554. .comments-title,
  555. .comment-reply-title {
  556. border-color: {$colors['main_text_color']};
  557. }
  558. button,
  559. button[disabled]:hover,
  560. button[disabled]:focus,
  561. input[type="button"],
  562. input[type="button"][disabled]:hover,
  563. input[type="button"][disabled]:focus,
  564. input[type="reset"],
  565. input[type="reset"][disabled]:hover,
  566. input[type="reset"][disabled]:focus,
  567. input[type="submit"],
  568. input[type="submit"][disabled]:hover,
  569. input[type="submit"][disabled]:focus,
  570. .menu-toggle.toggled-on,
  571. .menu-toggle.toggled-on:hover,
  572. .menu-toggle.toggled-on:focus,
  573. .pagination:before,
  574. .pagination:after,
  575. .pagination .prev,
  576. .pagination .next,
  577. .page-links a {
  578. background-color: {$colors['main_text_color']};
  579. }
  580. /* Secondary Text Color */
  581. /**
  582. * IE8 and earlier will drop any block with CSS3 selectors.
  583. * Do not combine these styles with the next block.
  584. */
  585. body:not(.search-results) .entry-summary {
  586. color: {$colors['secondary_text_color']};
  587. }
  588. blockquote,
  589. .post-password-form label,
  590. a:hover,
  591. a:focus,
  592. a:active,
  593. .post-navigation .meta-nav,
  594. .image-navigation,
  595. .comment-navigation,
  596. .widget_recent_entries .post-date,
  597. .widget_rss .rss-date,
  598. .widget_rss cite,
  599. .site-description,
  600. .author-bio,
  601. .entry-footer,
  602. .entry-footer a,
  603. .sticky-post,
  604. .taxonomy-description,
  605. .entry-caption,
  606. .comment-metadata,
  607. .pingback .edit-link,
  608. .comment-metadata a,
  609. .pingback .comment-edit-link,
  610. .comment-form label,
  611. .comment-notes,
  612. .comment-awaiting-moderation,
  613. .logged-in-as,
  614. .form-allowed-tags,
  615. .site-info,
  616. .site-info a,
  617. .wp-caption .wp-caption-text,
  618. .gallery-caption,
  619. .widecolumn label,
  620. .widecolumn .mu_register label {
  621. color: {$colors['secondary_text_color']};
  622. }
  623. .widget_calendar tbody a:hover,
  624. .widget_calendar tbody a:focus {
  625. background-color: {$colors['secondary_text_color']};
  626. }
  627. /* Border Color */
  628. fieldset,
  629. pre,
  630. abbr,
  631. acronym,
  632. table,
  633. th,
  634. td,
  635. input[type="date"],
  636. input[type="time"],
  637. input[type="datetime-local"],
  638. input[type="week"],
  639. input[type="month"],
  640. input[type="text"],
  641. input[type="email"],
  642. input[type="url"],
  643. input[type="password"],
  644. input[type="search"],
  645. input[type="tel"],
  646. input[type="number"],
  647. textarea,
  648. .main-navigation li,
  649. .main-navigation .primary-menu,
  650. .menu-toggle,
  651. .dropdown-toggle:after,
  652. .social-navigation a,
  653. .image-navigation,
  654. .comment-navigation,
  655. .tagcloud a,
  656. .entry-content,
  657. .entry-summary,
  658. .page-links a,
  659. .page-links > span,
  660. .comment-list article,
  661. .comment-list .pingback,
  662. .comment-list .trackback,
  663. .comment-reply-link,
  664. .no-comments,
  665. .widecolumn .mu_register .mu_alert {
  666. border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
  667. border-color: {$colors['border_color']};
  668. }
  669. hr,
  670. code {
  671. background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
  672. background-color: {$colors['border_color']};
  673. }
  674. @media screen and (min-width: 56.875em) {
  675. .main-navigation li:hover > a,
  676. .main-navigation li.focus > a {
  677. color: {$colors['link_color']};
  678. }
  679. .main-navigation ul ul,
  680. .main-navigation ul ul li {
  681. border-color: {$colors['border_color']};
  682. }
  683. .main-navigation ul ul:before {
  684. border-top-color: {$colors['border_color']};
  685. border-bottom-color: {$colors['border_color']};
  686. }
  687. .main-navigation ul ul li {
  688. background-color: {$colors['page_background_color']};
  689. }
  690. .main-navigation ul ul:after {
  691. border-top-color: {$colors['page_background_color']};
  692. border-bottom-color: {$colors['page_background_color']};
  693. }
  694. }
  695. CSS;
  696. }
  697. /**
  698. * Outputs an Underscore template for generating CSS for the color scheme.
  699. *
  700. * The template generates the css dynamically for instant display in the
  701. * Customizer preview.
  702. *
  703. * @since Twenty Sixteen 1.0
  704. */
  705. function twentysixteen_color_scheme_css_template() {
  706. $colors = array(
  707. 'background_color' => '{{ data.background_color }}',
  708. 'page_background_color' => '{{ data.page_background_color }}',
  709. 'link_color' => '{{ data.link_color }}',
  710. 'main_text_color' => '{{ data.main_text_color }}',
  711. 'secondary_text_color' => '{{ data.secondary_text_color }}',
  712. 'border_color' => '{{ data.border_color }}',
  713. );
  714. ?>
  715. <script type="text/html" id="tmpl-twentysixteen-color-scheme">
  716. <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
  717. </script>
  718. <?php
  719. }
  720. add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
  721. /**
  722. * Enqueues front-end CSS for the page background color.
  723. *
  724. * @since Twenty Sixteen 1.0
  725. *
  726. * @see wp_add_inline_style()
  727. */
  728. function twentysixteen_page_background_color_css() {
  729. $color_scheme = twentysixteen_get_color_scheme();
  730. $default_color = $color_scheme[1];
  731. $page_background_color = get_theme_mod( 'page_background_color', $default_color );
  732. // Don't do anything if the current color is the default.
  733. if ( $page_background_color === $default_color ) {
  734. return;
  735. }
  736. $css = '
  737. /* Custom Page Background Color */
  738. .site {
  739. background-color: %1$s;
  740. }
  741. mark,
  742. ins,
  743. button,
  744. button[disabled]:hover,
  745. button[disabled]:focus,
  746. input[type="button"],
  747. input[type="button"][disabled]:hover,
  748. input[type="button"][disabled]:focus,
  749. input[type="reset"],
  750. input[type="reset"][disabled]:hover,
  751. input[type="reset"][disabled]:focus,
  752. input[type="submit"],
  753. input[type="submit"][disabled]:hover,
  754. input[type="submit"][disabled]:focus,
  755. .menu-toggle.toggled-on,
  756. .menu-toggle.toggled-on:hover,
  757. .menu-toggle.toggled-on:focus,
  758. .pagination .prev,
  759. .pagination .next,
  760. .pagination .prev:hover,
  761. .pagination .prev:focus,
  762. .pagination .next:hover,
  763. .pagination .next:focus,
  764. .pagination .nav-links:before,
  765. .pagination .nav-links:after,
  766. .widget_calendar tbody a,
  767. .widget_calendar tbody a:hover,
  768. .widget_calendar tbody a:focus,
  769. .page-links a,
  770. .page-links a:hover,
  771. .page-links a:focus {
  772. color: %1$s;
  773. }
  774. @media screen and (min-width: 56.875em) {
  775. .main-navigation ul ul li {
  776. background-color: %1$s;
  777. }
  778. .main-navigation ul ul:after {
  779. border-top-color: %1$s;
  780. border-bottom-color: %1$s;
  781. }
  782. }
  783. ';
  784. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) );
  785. }
  786. add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 );
  787. /**
  788. * Enqueues front-end CSS for the link color.
  789. *
  790. * @since Twenty Sixteen 1.0
  791. *
  792. * @see wp_add_inline_style()
  793. */
  794. function twentysixteen_link_color_css() {
  795. $color_scheme = twentysixteen_get_color_scheme();
  796. $default_color = $color_scheme[2];
  797. $link_color = get_theme_mod( 'link_color', $default_color );
  798. // Don't do anything if the current color is the default.
  799. if ( $link_color === $default_color ) {
  800. return;
  801. }
  802. $css = '
  803. /* Custom Link Color */
  804. .menu-toggle:hover,
  805. .menu-toggle:focus,
  806. a,
  807. .main-navigation a:hover,
  808. .main-navigation a:focus,
  809. .dropdown-toggle:hover,
  810. .dropdown-toggle:focus,
  811. .social-navigation a:hover:before,
  812. .social-navigation a:focus:before,
  813. .post-navigation a:hover .post-title,
  814. .post-navigation a:focus .post-title,
  815. .tagcloud a:hover,
  816. .tagcloud a:focus,
  817. .site-branding .site-title a:hover,
  818. .site-branding .site-title a:focus,
  819. .entry-title a:hover,
  820. .entry-title a:focus,
  821. .entry-footer a:hover,
  822. .entry-footer a:focus,
  823. .comment-metadata a:hover,
  824. .comment-metadata a:focus,
  825. .pingback .comment-edit-link:hover,
  826. .pingback .comment-edit-link:focus,
  827. .comment-reply-link,
  828. .comment-reply-link:hover,
  829. .comment-reply-link:focus,
  830. .required,
  831. .site-info a:hover,
  832. .site-info a:focus {
  833. color: %1$s;
  834. }
  835. mark,
  836. ins,
  837. button:hover,
  838. button:focus,
  839. input[type="button"]:hover,
  840. input[type="button"]:focus,
  841. input[type="reset"]:hover,
  842. input[type="reset"]:focus,
  843. input[type="submit"]:hover,
  844. input[type="submit"]:focus,
  845. .pagination .prev:hover,
  846. .pagination .prev:focus,
  847. .pagination .next:hover,
  848. .pagination .next:focus,
  849. .widget_calendar tbody a,
  850. .page-links a:hover,
  851. .page-links a:focus {
  852. background-color: %1$s;
  853. }
  854. input[type="date"]:focus,
  855. input[type="time"]:focus,
  856. input[type="datetime-local"]:focus,
  857. input[type="week"]:focus,
  858. input[type="month"]:focus,
  859. input[type="text"]:focus,
  860. input[type="email"]:focus,
  861. input[type="url"]:focus,
  862. input[type="password"]:focus,
  863. input[type="search"]:focus,
  864. input[type="tel"]:focus,
  865. input[type="number"]:focus,
  866. textarea:focus,
  867. .tagcloud a:hover,
  868. .tagcloud a:focus,
  869. .menu-toggle:hover,
  870. .menu-toggle:focus {
  871. border-color: %1$s;
  872. }
  873. @media screen and (min-width: 56.875em) {
  874. .main-navigation li:hover > a,
  875. .main-navigation li.focus > a {
  876. color: %1$s;
  877. }
  878. }
  879. ';
  880. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) );
  881. }
  882. add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 );
  883. /**
  884. * Enqueues front-end CSS for the main text color.
  885. *
  886. * @since Twenty Sixteen 1.0
  887. *
  888. * @see wp_add_inline_style()
  889. */
  890. function twentysixteen_main_text_color_css() {
  891. $color_scheme = twentysixteen_get_color_scheme();
  892. $default_color = $color_scheme[3];
  893. $main_text_color = get_theme_mod( 'main_text_color', $default_color );
  894. // Don't do anything if the current color is the default.
  895. if ( $main_text_color === $default_color ) {
  896. return;
  897. }
  898. // Convert main text hex color to rgba.
  899. $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color );
  900. // If the rgba values are empty return early.
  901. if ( empty( $main_text_color_rgb ) ) {
  902. return;
  903. }
  904. // If we get this far, we have a custom color scheme.
  905. $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
  906. $css = '
  907. /* Custom Main Text Color */
  908. body,
  909. blockquote cite,
  910. blockquote small,
  911. .main-navigation a,
  912. .menu-toggle,
  913. .dropdown-toggle,
  914. .social-navigation a,
  915. .post-navigation a,
  916. .pagination a:hover,
  917. .pagination a:focus,
  918. .widget-title a,
  919. .site-branding .site-title a,
  920. .entry-title a,
  921. .page-links > .page-links-title,
  922. .comment-author,
  923. .comment-reply-title small a:hover,
  924. .comment-reply-title small a:focus {
  925. color: %1$s
  926. }
  927. blockquote,
  928. .menu-toggle.toggled-on,
  929. .menu-toggle.toggled-on:hover,
  930. .menu-toggle.toggled-on:focus,
  931. .post-navigation,
  932. .post-navigation div + div,
  933. .pagination,
  934. .widget,
  935. .page-header,
  936. .page-links a,
  937. .comments-title,
  938. .comment-reply-title {
  939. border-color: %1$s;
  940. }
  941. button,
  942. button[disabled]:hover,
  943. button[disabled]:focus,
  944. input[type="button"],
  945. input[type="button"][disabled]:hover,
  946. input[type="button"][disabled]:focus,
  947. input[type="reset"],
  948. input[type="reset"][disabled]:hover,
  949. input[type="reset"][disabled]:focus,
  950. input[type="submit"],
  951. input[type="submit"][disabled]:hover,
  952. input[type="submit"][disabled]:focus,
  953. .menu-toggle.toggled-on,
  954. .menu-toggle.toggled-on:hover,
  955. .menu-toggle.toggled-on:focus,
  956. .pagination:before,
  957. .pagination:after,
  958. .pagination .prev,
  959. .pagination .next,
  960. .page-links a {
  961. background-color: %1$s;
  962. }
  963. /* Border Color */
  964. fieldset,
  965. pre,
  966. abbr,
  967. acronym,
  968. table,
  969. th,
  970. td,
  971. input[type="date"],
  972. input[type="time"],
  973. input[type="datetime-local"],
  974. input[type="week"],
  975. input[type="month"],
  976. input[type="text"],
  977. input[type="email"],
  978. input[type="url"],
  979. input[type="password"],
  980. input[type="search"],
  981. input[type="tel"],
  982. input[type="number"],
  983. textarea,
  984. .main-navigation li,
  985. .main-navigation .primary-menu,
  986. .menu-toggle,
  987. .dropdown-toggle:after,
  988. .social-navigation a,
  989. .image-navigation,
  990. .comment-navigation,
  991. .tagcloud a,
  992. .entry-content,
  993. .entry-summary,
  994. .page-links a,
  995. .page-links > span,
  996. .comment-list article,
  997. .comment-list .pingback,
  998. .comment-list .trackback,
  999. .comment-reply-link,
  1000. .no-comments,
  1001. .widecolumn .mu_register .mu_alert {
  1002. border-color: %1$s; /* Fallback for IE7 and IE8 */
  1003. border-color: %2$s;
  1004. }
  1005. hr,
  1006. code {
  1007. background-color: %1$s; /* Fallback for IE7 and IE8 */
  1008. background-color: %2$s;
  1009. }
  1010. @media screen and (min-width: 56.875em) {
  1011. .main-navigation ul ul,
  1012. .main-navigation ul ul li {
  1013. border-color: %2$s;
  1014. }
  1015. .main-navigation ul ul:before {
  1016. border-top-color: %2$s;
  1017. border-bottom-color: %2$s;
  1018. }
  1019. }
  1020. ';
  1021. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) );
  1022. }
  1023. add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 );
  1024. /**
  1025. * Enqueues front-end CSS for the secondary text color.
  1026. *
  1027. * @since Twenty Sixteen 1.0
  1028. *
  1029. * @see wp_add_inline_style()
  1030. */
  1031. function twentysixteen_secondary_text_color_css() {
  1032. $color_scheme = twentysixteen_get_color_scheme();
  1033. $default_color = $color_scheme[4];
  1034. $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
  1035. // Don't do anything if the current color is the default.
  1036. if ( $secondary_text_color === $default_color ) {
  1037. return;
  1038. }
  1039. $css = '
  1040. /* Custom Secondary Text Color */
  1041. /**
  1042. * IE8 and earlier will drop any block with CSS3 selectors.
  1043. * Do not combine these styles with the next block.
  1044. */
  1045. body:not(.search-results) .entry-summary {
  1046. color: %1$s;
  1047. }
  1048. blockquote,
  1049. .post-password-form label,
  1050. a:hover,
  1051. a:focus,
  1052. a:active,
  1053. .post-navigation .meta-nav,
  1054. .image-navigation,
  1055. .comment-navigation,
  1056. .widget_recent_entries .post-date,
  1057. .widget_rss .rss-date,
  1058. .widget_rss cite,
  1059. .site-description,
  1060. .author-bio,
  1061. .entry-footer,
  1062. .entry-footer a,
  1063. .sticky-post,
  1064. .taxonomy-description,
  1065. .entry-caption,
  1066. .comment-metadata,
  1067. .pingback .edit-link,
  1068. .comment-metadata a,
  1069. .pingback .comment-edit-link,
  1070. .comment-form label,
  1071. .comment-notes,
  1072. .comment-awaiting-moderation,
  1073. .logged-in-as,
  1074. .form-allowed-tags,
  1075. .site-info,
  1076. .site-info a,
  1077. .wp-caption .wp-caption-text,
  1078. .gallery-caption,
  1079. .widecolumn label,
  1080. .widecolumn .mu_register label {
  1081. color: %1$s;
  1082. }
  1083. .widget_calendar tbody a:hover,
  1084. .widget_calendar tbody a:focus {
  1085. background-color: %1$s;
  1086. }
  1087. ';
  1088. wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) );
  1089. }
  1090. add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );