Code Snippets Used When Creating An Oxygen Site

Introduction

For learning purposes I’m building a new site using Oxygen. I typically use some code snippets on my sites and added a few to my regular library for Oxygen specifically. I wanted to share them in case there are some that are useful to other site builders or Oxygen users.

For programmers, a code snippet is some code that you tend to reuse multiple times and that you keep somewhere so that you don’t need to retype them over and over. Many code editors have a code snippet feature, or a plugin to add this feature. In WordPress, a code snippet is some PHP, CSS, or Java Script that you want to use on your site. They are usually small enough that it does not warrant creating a plugin to hold them.

I’ve used the free Code Snippets plugin for WordPress for years and it has been a real convenience. Recently a new plugin surfaced called Advanced Scripts. It is also a plugin for adding and managing code snippets, and has added a large number of features that I didn’t imagine I needed, but now really appreciate having. So I’m using that plugin on the new Oxygen site.

Common Snippets

These are the snippets I use on a lot of sites.

Add a link to the plugins page to the admin toolbar

I’ve often wondered why there is a link to the themes page in the admin bar but no link to the plugin page. I rarely visit the theme page, but go to the plugins page all the time. So, here is the snippet I use for adding a link to the plugins page to the admin toolbar. It shows up under the site name.

add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}

Disable Post Editor Defaulting to Full Screen

At some point the Gutenberg core team decided that the admin menu should be hidden by default when you go into the editor. I don’t like that. They provided a menu option to disable Full Screen Mode but it saves the preference in the browser … and I’ve set my browsers to erase all history on close. Also, Gutenberg shows a welcome popup when you first go into the editor. This is another annoyance, in my opinion, that doesn’t remain dismissed for me. So here is some code from a plugin that does those two things:

add_action( 'admin_head', function () { ?>
	<style>
		.wp-admin .components-popover.nux-dot-tip {
			display: none !important;
		}
	</style>

	<script>
		jQuery(window).load( function(){
			wp.data && wp.data.select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) && wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
			wp.data && wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ) && wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
		});
	</script>
<?php } );

Site Specific Snippets

These are snippets I’ve added or modified just for use on my Oxygen site.

Login / Logout Menu Item

I often add a Login / Logout menu item for convenience. Menu locations are often declared in the theme, but since Oxygen doesn’t use a theme I had to modify my regular snippet to work without a declared menu location. I found a description of how to do this here.

add_filter( 'wp_nav_menu_top-menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in()) {
        $items .= '<li class="menu-item"><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in()) {
        $items .= '<li class="menu-item"><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Adding a Sidebar

Sidebars are another thing that is usually setup by the theme. What I’ve seen online about how to add a sidebar with Oxygen is to use a plugin. I started to set this up with a plugin and then it hit me that this must also be just another WordPress function. This is explained in the WordPress theme handbook. Note that you need to add a widget to the sidebar before trying to add the sidebar to an Oxygen template.

add_action( 'widgets_init', 'register_main_sidebar' );
function register_main_sidebar() {
  $args = array(
    'name'          => 'Main Sidebar',
    'id'            => 'main-sidebar',
    'description'   => 'This sidebar is shown on the right side of posts and pages',
    'class'         => 'wpdd-main-sidebar',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );
 register_sidebar( $args );
}

Adding Oxygen Global Colors to Gutenberg

I am amused when WordPress themes or plugins talk about “global” colors but the feature only works in the theme or plugin. In other words, they are not truly “global.” Oxygen has a nice global colors option and I wanted to get these colors into the Gutenberg editor. I asked in the Oxygen Facebook group and got a number of nice suggestions. Alex Tester pointed me to a snippet on the issue in Github and Matt Hias shared a solution from his blog. I ended up using the first option as the code looked simpler.

/**
 * Add Oxygen's global colors to Gutenberg's backend editor palette
 */
function pavenum_gutenberg_oxygen_palette() {
	$gutenberg_colors = [];
	
	$oxy_colors = oxy_get_global_colors();
	foreach( $oxy_colors['colors'] as $oxy_color) {
		$gutenberg_colors[] = [ 'name' => $oxy_color['name'], 'slug' => 'color-' . $oxy_color['id'], 'color' => $oxy_color['value'] ];
	}
	
	add_theme_support( 'editor-color-palette', $gutenberg_colors );
	add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'pavenum_gutenberg_oxygen_palette' );

/**
 * Add corresponding CSS to frontend Gutenberg blocks
 */
function pavenum_gutenberg_oxygen_palette_frontend_css() {
	
	$gutenberg_colors_frontend_css = "";
	
	$oxy_colors = oxy_get_global_colors();
	foreach( $oxy_colors['colors'] as $oxy_color) {
		$gutenberg_colors_frontend_css .= ".has-color-" . $oxy_color['id'] ."-color { color: " . $oxy_color['value'] . "} ";
		$gutenberg_colors_frontend_css .= ".has-color-" . $oxy_color['id'] ."-background-color { background-color: " . $oxy_color['value'] . "}";
	}
	
	wp_register_style( 'gutenberg-oxygen-colors', false );
	wp_enqueue_style( 'gutenberg-oxygen-colors' );
	wp_add_inline_style( 'gutenberg-oxygen-colors', $gutenberg_colors_frontend_css );
}
add_action( 'enqueue_block_assets', 'pavenum_gutenberg_oxygen_palette_frontend_css' );

Discussion and Conclusions

I initially mentioned that I was trying to use code snippets instead of plugins to keep the site light-weight and fast. Sridhar Katakam pointed out that some plugins don’t add any bloat and are a convenience, so I shouldn’t equate code snippets with “the Oxygen way” or anything like that, which makes sense. Using code snippets was just my choice and subjectively it feels lighter to me because I’m using fewer plugins. However, I’m a pragmatic site builder and encourage you to find what works and makes sense for you, snippets or plugins, it is likely not a big deal either way. I’ll update this post if I add more code snippets to the Oxygen site in the future.