Skip to content

Instantly share code, notes, and snippets.

@westonruter westonruter/functions.php
Last active Nov 5, 2019

Embed
What would you like to do?
Child theme of Noto Simple with full AMP compatibility
<?php
/**
* Noto Simple AMP functions and definitions
*
* @package Noto_Simple_AMP
*/
// Indicate that the theme works well in both Standard and Transitional template modes.
add_theme_support(
'amp',
array(
// The `paired` flag means that the theme retains logic to be fully functional when AMP is disabled.
'paired' => true,
/*
* Configure mobile nav menu toggle, per <https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/>.
* The configuration here takes the place of the custom script in navigation.js, porting the functionality
* to use amp-bind instead; see <https://amp.dev/documentation/components/amp-bind/>.
*/
'nav_menu_toggle' => array(
'nav_container_id' => 'site-navigation',
'nav_container_toggle_class' => 'toggled',
'menu_button_xpath' => '//nav[ @id = "site-navigation" ]/button',
),
/*
* Configure nav submenu toggles, per <https://amp-wp.org/documentation/playbooks/navigation-sub-menu-buttons/>.
* Note that Noto Simple does not make use of such buttons, using an older pattern used in core themes like
* Twenty Thirteen where a user must tap once on the parent nav menu item once to cause the submenu to appear;
* the user can then either tap on the parent nav menu item again to navigate to that page, or they can click
* on one of the revealed submenu items. In Twenty Fifteen, this pattern for mobile submenu navigation has been
* replaced by a more accessible method of adding submenu toggle buttons next to each parent item, allowing
* navigation to a parent nav menu item link without having to tap it twice. Because Noto Simple does not use
* these buttons, the style.css in the child theme has additional CSS to style the submenu toggle buttons when
* they appear on not just mobile but any touch interface.
*/
'nav_menu_dropdown' => array(
'sub_menu_button_class' => 'dropdown-toggle',
'sub_menu_button_toggle_class' => 'toggled',
),
)
);
/**
* Determine whether it is an AMP response.
*
* This function is used as a "Conditional Tag" in WordPress. It can only be used at the `wp` action or later.
*
* @link https://developer.wordpress.org/themes/references/list-of-conditional-tags/
* @see is_amp_endpoint()
*
* @return bool Is AMP response.
*/
function noto_is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}
/**
* Ensure that the parent theme's stylesheet remains in use.
*
* The parent theme in `noto_simple_scripts()` enqueues the `noto-simple-style` stylesheet with a stylesheet URL as
* returned by `get_stylesheet_uri()`. When the child theme is active, the return value of `get_stylesheet_uri()`
* will reflect the URL to the style.css in the child theme. So it is filtered here to force the URL to be for the
* style.css in the parent theme, thus preserving the associated stylesheet version defined when registering.
*
* @see noto_simple_scripts()
* @see noto_simple_amp_scripts()
* @see get_stylesheet_uri()
*
* @return string Parent theme's style.css URL.
*/
function noto_simple_filter_stylesheet_uri() {
return get_template_directory_uri() . '/style.css';
}
add_filter( 'stylesheet_uri', 'noto_simple_filter_stylesheet_uri' );
/**
* Enqueue (and dequeue) scripts and styles.
*
* @see noto_simple_scripts()
*/
function noto_simple_amp_scripts() {
// Enqueue child theme CSS which extends parent theme's CSS (noto-simple-style).
wp_enqueue_style(
'noto-simple-amp-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'noto-simple-style' ),
'0.1'
);
// Dequeue scripts which are not AMP-compatible or not relevant in AMP.
if ( noto_is_amp() ) {
/*
* Remove skip-link-focus-fix since the AMP framework has it built-in,
* per <https://github.com/ampproject/amphtml/issues/18671>.
*/
wp_dequeue_script( 'noto-simple-skip-link-focus-fix' );
/*
* Remove navigation.js since handled by the flag in amp theme support above.
*
* - The toggling of the nav menu on mobile is handled by the `nav_menu_toggle` theme support config above.
* - Support for toggling submenus on touch screens is implemented via the `nav_menu_dropdown` config above.
* - The logic in `toggleFocus()` is handled by the AMP plugin automatically converting `.focus` CSS selectors
* into `:focus-within` selectors.
*/
wp_dequeue_script( 'noto-simple-navigation' );
// Dequeue scripts which are handled by noto_simple_amp_scroll_to_top().
wp_dequeue_script( 'noto-simple-smooth-scroll' );
wp_dequeue_script( 'noto-simple-main' );
}
}
// Priority 11 to run later than noto_simple_scripts() at priority 10.
add_action( 'wp_enqueue_scripts', 'noto_simple_amp_scripts', 11 );
/**
* Add scroll-to-top fade-in/out based on whether the masthead is in view.
*
* The use of <amp-position-observer> and <amp-animation> take the place of the `onscroll` and `showToTopButton` logic
* in the noto-simple-main script.
*
* The addition of `html { scroll-behavior: smooth }` in style.css replaces the use of the noto-simple-smooth-scroll
* library and SmoothScroll in the noto-simple-main script.
*
* @link https://amp.dev/documentation/examples/visual-effects/scroll_to_top/
*/
function noto_simple_amp_scroll_to_top() {
if ( ! noto_is_amp() ) {
return;
}
?>
<amp-animation id="notoSimpleBackToTopShow" layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#back-to-top",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id="notoSimpleBackToTopHide" layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#back-to-top",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<amp-position-observer
target="masthead"
on="exit:notoSimpleBackToTopShow.start; enter:notoSimpleBackToTopHide.start"
layout="nodisplay">
</amp-position-observer>
<?php
}
add_action( 'wp_footer', 'noto_simple_amp_scroll_to_top' );
/*
Theme Name: Noto Simple AMP
Theme URI: https://gist.github.com/westonruter/b904977a296da091584a7a2264df2882
Author: Weston Ruter
Author URI: https://weston.ruter.net/
Description: Child theme of Noto Simple with AMP compatibility.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noto-simple-amp
Template: noto-simple
*/
/*
* This replaces the entirety of the the noto-simple-smooth-scroll. As an alternative, the footer.php template could
* be overridden in the child theme with `<a id="back-to-top" href="#page">` being replaced with
* `<button id="back-to-top" on="tap:page.scrollTo(duration=600)">`. But the scroll-behavior property has 75%
* global browser support, so this seems acceptable given it is a progressive enhancement.
* See <https://caniuse.com/#feat=css-scroll-behavior>.
*/
html {
scroll-behavior: smooth;
}
/*
* Add styling for dropdown toggles. Note the behavior is different in AMP as in non-AMP because in non-AMP the submenu
* is expanded when tapping on the parent link the first time, whereas in AMP there is a dedicated button to expand
* the submenu.
*/
body.amp-mode-touch .main-navigation ul .dropdown-toggle.toggled + ul {
width: 100%;
position: unset;
box-shadow: none;
padding-left: 2em;
font-size: 0.9em;
float: none;
}
/* Ensure the dropdown button can be positioned absolutely. */
body.amp-mode-touch .main-navigation li {
position: relative;
}
/* Make sure the button doesn't overlap any link text */
body.amp-mode-touch .main-navigation li.menu-item-has-children > a {
padding-right: 50px;
}
.main-navigation .dropdown-toggle {
display: none;
}
body.amp-mode-touch .main-navigation .dropdown-toggle {
display: block;
position: absolute;
right: 2px;
top: 0;
font-family: monospace;
font-weight: bold;
}
.main-navigation .dropdown-toggle:after {
content: "+";
}
.main-navigation .dropdown-toggle.toggled:after {
content: "-";
}
/* Override the :hover style rule */
body.amp-mode-touch .main-navigation ul .dropdown-toggle:not(.toggled) + ul {
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
body.amp-mode-touch .main-navigation ul .dropdown-toggle.toggled + ul {
left: auto;
display: block;
}
body.amp-mode-touch .main-navigation ul .dropdown-toggle.toggled + li > a {
padding-left: 0;
}
body.amp-mode-touch .main-navigation ul .dropdown-toggle.toggled + li:last-child {
border: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.