Last week I was talking about the difficulties I was having with Symbol Selection. At it’s crux, the issue is explaining something visual that’s clear to me but may not be to others.
What I ended up doing was making in-line documentation. When you edit a category, you see the option to change the icon, but now it has some exposition:
This is pretty simple, I now, but the point is that if you get that far and go “Wait, what?” your eyes will hit that link and you’ll probably click on it and get the new Appearance page:
The page is generated by an mu-plugin, and quite simply it scans the folder for all the symboicons and shows you each one. Since it’s in an mu-plugin and the images are a part of the theme, I put in an extra check to see if the folder is there and, if so, show an error.
class SymboliconsSettings {
public function __construct() {
add_action( 'init', array( &$this, 'init' ) );
}
public function init() {
add_action( 'admin_menu', array( $this, 'add_settings_page') );
}
// Sets up the settings page
public function add_settings_page() {
$page = add_theme_page(__('Symbolicons'), __('Symbolicons'), 'edit_posts', 'symbolicons', array($this, 'settings_page'));
}
// Content of the settings page
function settings_page() {
?>
<div class="wrap">
<style>
span.cmb2-icon {
width: 80px;
display: inline-block;
vertical-align: top;
margin: 10px;
word-wrap: break-word;
}
span.cmb2-icon svg {
width: 75px;
height: 75px;
}
span.cmb2-icon svg * {
fill: #444!important;
}
</style>
<h2>Symbolicons</h2>
<?php
$imagepath = get_stylesheet_directory().'/images/symbolicons/';
if ( !file_exists( $imagepath ) && !is_dir( $imagepath ) ) {
echo '<p>Your theme does not appear to have the symbolicons folder included, so you can\'t use them. How sad. It should be installed in <code>'.get_stylesheet_directory().'/images/symbolicons/</code> for this to work.';
} else {
echo '<p>The following are all the symbolicons we have to chose from and their file names. Let this help you be more better.</p>';
foreach( glob( $imagepath.'*' ) as $filename ){
$image = file_get_contents( $filename );
$name = str_replace( $imagepath, '' , $filename );
$name = str_replace( '.svg', '', $name );
echo '<span role="img" class="cmb2-icon">' . $image . $name .'</span>';
}
}
}
}
new SymboliconsSettings();
It’s not perfect, but it helps.
