WordPress wrangling

Screenshot of WordPress Customizer screen
One of the best and worst things about WordPress is the way the developers keep changing things. Just when I think I’ve got a handle on the mysteries behind theme development they add in radical new features to learn.

Customizer

The 3.4 release brought the Customizer screen which gives blog owners a central place to alter the look of a theme in a visual manner.

The idea of being able to change the style of a website on a whim was exciting but the default options of changing the background color or header photo didn’t go far enough for me. So I got out my trusty text editor and started hacking php. There are some nice resources for adding options to the customizer screen but it was still a learning experience. In the end:

  • I wound up with the ability to set the background color and transparency of the content area so I could set the page background color without worrying about legibility issues.
  • I also created options for link and text colors but I find I don’t use the text color option. It’s easier to read dark text on a light-colored background so I tend to stick to that combination.
  • The options I’ve had the most fun with besides the colors is the Google Fonts.

There are multiple plugins for using Google Fonts in a WordPress theme but they require you to know the HTML tags or CSS selectors and you can spend hours tracking down cascading issues (yes, I speak from experience). Creating my own theme from scratch, I was able to keep the typography simple so I can just type in the names of two Google Fonts and it all changes smoothly.

To make all of this customization work, I had to get over my distaste for adding CSS to the in the tag of the html templates. I’ve avoided it for years as it adds unnecessary page weight and download time by repeating the same thing on every page. But I decided that it was worth it for the effect I wanted to achieve and I have certainly enjoyed it. On a larger website I would use a CSS preprocessor like Sass or LESS that would let me make changes to the CSS file or simply convert the CSS file to PHP so I could call the variables directly.

Featured Images

I loved the 2012 theme (which was the current default when I started this process) but couldn’t commit to it because I didn’t like the way it handled featured images. After a great deal of cursing and research it became apparent that I didn’t understand what they were for. There is no way to style them individually, which makes it impossible to style them in respect to the images themselves or the other content in the post. The lack of a clear explanation and options is immensely frustrating and makes them useless for me. I wound up going through all my past posts and changing the Featured Images to regular images in the content so that I can style them as needed.

Navigation Menu

Menu editing page The Menu option is a nice interface for managing website navigation. You can specify individual pages, categories, even custom URLs. Creating the menu as a separate object that is then called in the theme rather than imbedding it directly allows for easier setup for new blogs and changes.

One option it doesn’t have that you find in many websites it a search box. They can often be added in the theme template and made to look like part of the menu but that didn’t work with the responsive menu style I chose. I found a piece of code for the Functions.php file that added a search box for me.

//Add Search Box to the menu bar
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '
  • ‘ . $searchform . ‘
';
return $items;
}

Just add the code anywhere in the file and your menu now has a search form attached at the end.

Functions.php

Functions.php is a very powerful tool in WordPress theme development, allowing you to create or override how WordPress behaves. the Functions file lets you abstract behavior from the display code in the theme to make it easier to manage. There are many examples of code available from the WordPress community to let you do most of what you might want.

/**
* Make search results page list all
*/
function change_post_per_page( $query ) {

if ( $query->is_main_query() && $query->is_search() ) {
//Display all posts for search results
$query->query_vars['posts_per_page'] = -1;
return;
}}
add_action('pre_get_posts', 'change_post_per_page', 1);

There is very little a knowledgable developer can’t do within the Functions file but keeping it organized can be a challenge. Comments are always your friend in coding but you almost can’t live without them here. So many different code blocks can get confusing if you don’t leave yourself notes on what they do. As you can see from the top, this block lists all the results from a search on a single page rather than breaking it up into ten post blocks. I did this because the search results page uses the “Blog pages show at most” setting from the Settings > Reading page. So if you tell WordPress to only have ten posts per blog page, that’s how many search results will be returned. It you only list the results titles and summaries, ten is a little short and can be annoying.

Next is my Customizer code. First I set the custom colors, then the transparency option for content background, and finally the Google Fonts.

// Add custom text, background & link colors
add_action( 'customize_register', 'hg_customize_register' );
function hg_customize_register($wp_customize)
{
$colors = array();
$colors[] = array( 'slug'=>'header_text_color', 'default' => '#222222', 'label' => __( 'Header Text Color', 'cl3' ) );
$colors[] = array( 'slug'=>'content_text_color', 'default' => '#222222', 'label' => __( 'Content Text Color', 'cl3' ) );
$colors[] = array( 'slug'=>'link_color', 'default' => '#1e73be', 'label' => __( 'Link Color', 'cl3' ) );
$colors[] = array( 'slug'=>'content_bg_color', 'default' => '#ffffff', 'label' => __( 'Content Background Color', 'cl3' ) );
$colors[] = array( 'slug'=>'accent_color', 'default' => '#bbb', 'label' => __( 'Accent Color', 'cl3' ) );
foreach($colors as $color) { // SETTINGS $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'theme_mod', 'capability' => 'edit_theme_options' )); // CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] ))); }} 

//BACKGROUND TRANSPARENCY add_action( 'customize_register', 'bg_customize_register' ); 
function bg_customize_register($wp_customize) { 
$wp_customize->add_section( 'background_transparency', array( 'title' => __( 'Background Transparency', 'cl3' ), 'priority' => 65, ) ); 
$wp_customize->add_setting( 'background_transparency', array( 'default' => '100', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); 
$wp_customize->add_control( 'background_transparency', array( 'label' => __( 'Background Transparency', 'cl3' ), 'section' => 'background_transparency', 'settings' => 'background_transparency', 'type' => 'select', 'choices' => array( '100' => '100', '.95' => '.95', '.90' => '.90', '.85' => '.85', '.8' => '.80', '.75' => '.75', '.7' => '.70', '.65' => '.65', '.6' => '.60', '.55' => '.55', '.5' => '.50', '.45' => '.45', '.4' => '.40', '.35' => '.35', '.3' => '.30', '.25' => '.25', '.2' => '.20', '.15' => '.15', '.1' => '.10', ), ) );
 } 

To make the transparency work, I have an extra step.

//Break a color hex code (#ffffff) into rgb (125,125,125)
function hex2rgb($hex) {
   $hex = str_replace("#", "", $hex);

   if(strlen($hex) == 3) {
      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
   } else {
      $r = hexdec(substr($hex,0,2));
      $g = hexdec(substr($hex,2,2));
      $b = hexdec(substr($hex,4,2));
   }
   $rgb = array($r, $g, $b);
   return implode(",", $rgb); // returns the rgb values separated by commas
  // return $rgb; // returns an array with the rgb values

}

A code block in my Functions page converts Hex colors to RGB values. I then run that code on the content background color in the header and call the results as RGBA with the opacity setting in place of the A.

//TYPOGRAPHY OPTIONS 
//Add Ability to switch between Google fonts 
add_action( 'customize_register', 'font_customize_register' ); 
function font_customize_register($wp_customize) { $wp_customize->add_section( 'typography', array( 'title' => __( 'Typography', 'cl3' ), 'priority' => 85, ) ); 
$wp_customize->add_setting( 'header_font', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); 
$wp_customize->add_control( 'header_font', array( 'label' => __( 'Choose a font for the headings. Leave alone or choose "Default" for Georgia.', 'cl3' ), 'section' => 'typography', 'settings' => 'header_font', ) ); 
$wp_customize->add_setting( 'text_font', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); 
$wp_customize->add_control( 'text_font', array( 'label' => __( 'Choose a font for your text. Leave alone or choose "Default" for Trebuchet MS.', 'cl3' ), 'section' => 'typography', 'settings' => 'text_font', ) ); 
}

For the colors, using them just means calling the variables in the Header file but the fonts need a little more. The first block in the head strips out any spaces in the font name and replaces them with +s. The stripped names are then used to call the font in the URLs along with the needed weights. If custom fonts aren’t set, it defaults to fonts available on most systems.


Blockquote Shortcode

Finally, one of the things you can use the functions file for is to define shortcodes you can use in posts that WordPress will expand into the appropriate content. The one I use most is for formatting blockquotes. It’s easier for me to remember the snippet format and let WordPress convert it to the appropriate HTML5 for me.

I use:
[blockquote url="http://url.domain" cite="Author Name" title ="Title of the article or website"]
Quote here [/blockquote]

And WordPress transforms it into:
<blockquote cite=”url.domain”>

Quote here

The function code is:

&nbsp;//Blockquote shortcode
function bc($atts, $content = null) {
extract(shortcode_atts(array(
"cite" =&gt; 'Unknown',
"url" =&gt; 'url',
"title" =&gt;'title'
), $atts));
if ( $cite == 'Unknown' ) {
return

‘.$content.’

'; } 
elseif ( $url == 'url' ) { return '

‘.$content.’

- ‘.$cite.’
'; } 
else { return '

‘.$content.’

'; } } add_shortcode("blockquote", "bc");

And that’s the last post in this series. Hopefully you found it interesting and useful. The round up is next.

Leave a Reply