Excluding a software as a service from Events Calendar pages and others using conditional tags

I’m not shy about my admiration of the Events Calendar suite of plugins from Modern Tribe. If you happen to follow me on Twitter I mention them almost whenever someone asks for a recommendation or example of a premium plugin that works well.

Recently, I hit a page limit on a web governance software as a service and decided that I wanted to exclude low priority pages from their automated checks. Over the last few months I’ve worked on a script that loads this service into my footer as plugin so I can use it for different themes. But the time has come to exclude template types to save some money on the software service subscription that caps out at 5,000 pages.

WordPress Template Conditions I’d like to Exclude

  • Archive pages (blog indexes)
  • Attachment pages (media files)
  • All types of Events Calendar pages.
code block with text
<?php echo 'php'; ?>
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){


	else()
} 


Overriding Gutenberg’s default editor width and font

Setting Gutenberg's post editor width

By default Gutenberg sets the editor width to 580px on the desktop unless the browser window is narrower. Since Kubrick’s post content area is 480px we’ll need to override the width so text wrapping occurs at the same width as the final post. for that we simply set new declarations for the wp-block class tag.

blocks.css

/* Block width override */
.wp-block {
        font-family: "Liberation Sans", sans-serif;
        line-height: 1.4em;
        max-width: 480px;
}

Creating smaller buttons for Gutenberg

Standard buttons

This week I ran into a practical problem with WordPress’ default button blocks being simply too large for certain situations. Fortunately, extending Gutenberg blocks isn’t too difficult. Following the Gutenberg Handbook I’ll be adding to my existing files. These files have been enqueued previously to my theme.

  • myguten.js
  • blocks.css

myguten.js

The following will register three new blocks allowing them to be selected under the Button Block’s Styles accordion.

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'rounded-small',
    label: 'Rounded Small'
} );

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'outline-small',
    label: 'Outline Small'
} );

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'squared-small',
    label: 'Squared Small'
} );
Button Style Choices
The new buttons should show up in the block editor Styles accordion.

blocks.css

First, I create some overrides for the editor and front end of the website, my blocks.css file is enqueued to load for both areas. Next, I add button specific CSS styles for font size, padding and margins.

/* *
 * Button Blocks
 * */

.is-style-outline-small,
.is-style-outline-small .wp-block-button__link {
	background-color: transparent;
}

.is-style-squared-small,
.is-style-squared-small .wp-block-button__link {
	border-radius: 0;
}

.is-style-rounded-small,
.is-style-rounded-small .wp-block-button__link,
.is-style-outline-small,
.is-style-outline-small .wp-block-button__link,
.is-style-squared-small,
.is-style-squared-small .wp-block-button__link {
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
}

Results

Three button styles
Block Editor: Three new smaller versions of Gutenberg’s default button design in the WordPress post editor.
buttons on the front end of th website
Live Website: The buttons have a similar appearance on the front end of the website.

Upgrading a classic theme for Gutenberg

With the release of WordPress 5.0 in early December 2018 web developers were forced to make a decision, install the Classic Editor plugin and continue to enjoy the post editor we’ve used for years or jump the new block editor experience. However, I quickly found a few of my themes were not ready.

I decided to challenge myself this weekend by taking the longtime defunct Default Theme also known as Kubrick and make it Gutenberg ready.

Kubrick needed surprisingly few tweaks to function properly.

After replacing defunct to include the sidebar all that was needed was a few minor CSS updates and the front end looked just as it did in 2010 when this workhorse of a theme was last updated.

The left and right margins adjusted to match the header and footer’s design

With the front end working properly I was ready to override the post editor’s default appearance.

Gutenberg’s default appearance

After some code research I enqueued custom CSS to override the post editor’s styles.

now the post editor reflects the layout and design of Kubrick’s post content area. Right down to the painfully small 13px text.

The final results almost perfectly mimic the front end.

The text is justified, I assumed it was left aligned… Woops.

And now… for the code

<?php
// Added to the bottom of functions.php
// Enqueue CSS and JS
require_once( __DIR__ . '/lib/enqueue-assets.php' );
functions.php
<?php
// enqueue-assets.php
namespace Default_Theme\Theming;
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_block_editor_assets' );
/**
 * Enqueue theme CSS in Editor only.
 */
function enqueue_block_editor_assets() {
        wp_enqueue_style(
                'kubrick-editor-css',
                get_stylesheet_directory_uri() . '/blocks.css',
                null,
        time() // Changedd for production
    );
}
enqueue-assets.php
/* * 
 * blocks.css 
 * styles the block editor for the 2010 Default Theme "Kubrick"
 * */

.wp-block,
.editor-post-title__block .editor-post-title__input {
        font-family: "Liberation Sans", sans-serif;
        max-width: 480px;
        
}

.wp-block,
.wp-block-paragraph.editor-rich-text__tinymce {
        font-family: "Liberation Sans", sans-serif;
        font-size: 13px;
        line-height: 1.333;
}
.editor-post-title__block .editor-post-title__input {
        font-size: 19px;
        font-weight: 700;
}
blocks.php

Kubrick still has its various front end flaws. But in a couple hours of research and past practice I was able to prepare an old theme for a new life post Gutenberg.

Resources