You might have noticed that this WordPress website is fully AMP compatible. We actually made a child theme of the popular TwentyTwenty theme to improve Google Search ranking, improve page experience on desktop/mobile and increase revenue from Google AdSense (20%). This theme does 3 things:
- Perfect Core Web Vitals, Page experience and Mobile experience score using minimal CSS modification.
- Adds 2 sidebars!
- Can be easily converted to be fully AMP with the official AMP plugin for WordPress.
What are the changes made?
functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style';
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(),
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}Takes the style.css of the parent theme and then uses its own style.css
if (function_exists('register_sidebars'))
register_sidebars(4);By default there are 2 places already where you can add widget to the TwentyTwenty theme. This is footer 1 and footer 2. This code then registers a total of 4 sidebars, that is, an additional 2.
template-parts/content.php
<main id="main">
<aside class="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(3) ){} ?>
</aside>
<div class="main-content">
<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
<div class="entry-content">
<?php
if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
the_excerpt();
} else {
the_content( __( 'Continue reading', 'twentytwenty' ) );
}
?>
</div><!-- .entry-content -->
</div><!-- .post-inner -->
</div>
<aside class="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) {}?>
</aside>
</main>This code is responsible for displaying the content for pages. Here we have separated the page in 3 parts:
- <aside class=”sidebar”></aside>
- <div class=”main-content”></div>
- <aside class=”sidebar”></aside>
You will notice that the aside html elements contain PHP code which are injecting any Widgets that you can add in the admin dashboard at Appearance->Widgets->sidebar 3 or 4.
style.css
In the style.css we define important values in order to meet several requirements set by Google for UI requirements to have perfect core web vitals as described in this post.
The important part however is that we separate the following:
/*
Sidebar stuff
*/
@media only screen and (min-width: 1280px) {
#main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.single .main-content {
width: 60%;
}
#main > .sidebar {
padding-top: calc(1rem * 1.5);
width: calc(20% - 2rem);
margin-top: 1rem;
text-align: center;
display: block;
}
#main > .aside {
display: block;
}
#main > .sidebar > li {
list-style-type: none;
}
}
@media only screen and (max-width: 1279px) {
#main > .sidebar {
display: none;
}
}
.wp-block-code {
background-color: white !important;
}
p {
font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
}The important part in this CSS code is that for devices with screen size of 1280px wide and above; we are separating the page into 3.
- 20% left sidebar
- 60% main content
- 20% right sidebar
We then have a few rules of hiding the sidebars incase we have smaller screens. Note that this means if you want to put ads in the sidebars you should go ahead with responsive ads or amp ads. This is because hiding normal ads with display:none in AdSense is not allowed.
Feel free to download, zip and install the theme. The code is at https://github.com/Lougarou/twentytwenty-but-has-sidebars.
