Apr 01

WordPress: Graphene Theme Template Code for Banner Image

<div id=”header”>

$header_img = ‘<img src=”‘ . $header_img . ‘” alt=”‘ . $alt . ‘” width=”‘ . HEADER_IMAGE_WIDTH . ‘” height=”‘ . HEADER_IMAGE_HEIGHT . ‘” class=”header-img” />’;
if ( ! is_front_page() && $graphene_settings[‘link_header_img’] ) {
$header_img_tag = ‘<a href=”‘ . apply_filters( ‘graphene_header_link’ , home_url() ) . ‘” id=”header_img_link” title=”‘ . esc_attr__( ‘Go back to the front page’, ‘graphene’ ) . ‘”>’;
$header_img_tag .= $header_img;
$header_img_tag .= ‘</a>’;

$header_img = $header_img_tag;
echo $header_img;

<?php /* Header widget area */
if ( $graphene_settings[‘enable_header_widget’] && is_active_sidebar( ‘header-widget-area’ ) ) {
echo ‘<div class=”header-widget”>’;
dynamic_sidebar( ‘header-widget-area’ );
echo ‘</div>’;

<?php /* The site title and description */
if ( ! in_array( get_theme_mod( ‘header_textcolor’, HEADER_TEXTCOLOR ), array( ‘blank’, ” ) ) ) :
if ( is_front_page() || is_home() ) {
$title_tag = ‘h1’;
$desc_tag = ‘h2’;
} else {
$title_tag = ‘h2’;
$desc_tag = ‘h3’;
<?php echo “<$title_tag class=\”header_title push_1 grid_15\”>”; ?>
<?php if ( ! is_front_page() ) : ?><a href=”<?php echo apply_filters( ‘graphene_header_link’ , home_url() ); ?>” title=”<?php esc_attr_e( ‘Go back to the front page’, ‘graphene’ ); ?>”><?php endif; ?>
<?php bloginfo( ‘name’ ); ?>
<?php if ( ! is_front_page() ) : ?></a><?php endif; ?>
<?php echo “</$title_tag>”; ?>

<?php echo “<$desc_tag class=\”header_desc push_1 grid_15\”>”; ?>
<?php bloginfo( ‘description’ ); ?>
<?php echo “</$desc_tag>”; ?>
<?php endif; ?>

<?php do_action( ‘graphene_header’ ); ?>

Apr 01

WordPress: Can I Add a Logo to the Banner through the Dashboard with the Graphene Theme ?

It just seems logical that you should be able to easily add a logo to the banner of your website. Every site should have a logo and the logo should be in the banner to help visitors be sure they are on the correct site. Whether you can add that banner depends on your theme. Many themes have an interchangeable, full -width banner background, but some of them don’t have a place to add a smaller image.

Is There an Existing Image Default to the Theme?

Graphene has a full width image in the banner by default. If this image is one you want to keep and you want to put your logo over the top of it, it would be helpful for this image to be a background image, instead of an inserted image. Inserted images should provide content. Background images are more in the lines of ambiance. In the case of the Graphene banner image, it is an inserted image.

Graphene Theme default image is an Inserted Image

WordPress Dashboard Appearance Find Header ImageHow would you know? You could check the theme’s documentation. Or, you could just look in the most obvious places:

  1. Appearance -> Customize
  2. Appearance -> Header
  3. Appearance -> Graphene Options
  4. Note that other themes may have their own menu instead of going to Appearance first.


Mar 21

User Experience Case Study: RepairClinic.com

Replacing a microwave trayThe Need

I broke the microwave tray. It shattered into a thousand pieces on the floor as I was cleaning the microwave. Other than using them and cleaning them, I don’t do anything with them. But, I went to a local appliance store to find one. I figured I could remember what it looked like, so I didn’t do the smart thing and note the make and model. I found some with the 3 little jobbies in the middle, but I didn’t have the diameter.

So, I decided to look online (it’s easier when you can run over to the microwave to get the information.) . Not only did I find the part, but I found a site with amazing user experience for the novice at appliance tasks!

What I Found

A Google Search Does not Necessarily Take you to the Home PageI did a Google search for kenmore microwave 721.62644200, and went to the first organic result. Notice that the results from a Google search to not necessarily take you to the home page of the site. In fact, I would have hit the Back button, if I had gone to this site’s home page. I wanted to find a tray, not be told how wonderful the site is. In fact, the page I landed on told me more about how wonderful the site is than all the sliders in the world.

After I had looked at their information about the part and ordered a new tray. I started noticing other features on the page. People will do that! If they are able to find what they want, they will often use more of your site, if you have designed your site with the goal of giving them more to do than just meet the immediate need.

On the left sidebar, I found an interesting feature. They give you a different way to find what you need. Example Left Navigation By ProblemInstead of searching with the make and model of your appliance, you can search by looking up a problem. Somehow, they have managed to get out of their internal, business organization and figure out how a potential client thinks about appliance repair. Maybe they analyzed the types of questions people ask when they call.

Not only have they thought out the questions, they have thought out the answers. I’m going to guess that these are the same answers you would get if you called to ask them a question. It is common for tech support to be set up with the answers in a database that the online techs look up. It’s possible that they have just attached the same database to their website, which is a great way to reuse their data to get both tech support and marketing (and SEO).

As a matter of customer service, by providing web information, chat and phone service, they cover most viewer preferences. Also, they have refined the question link results on the web site so that the answer is about the model you are interested in specifically. Another great customer service feature is that each part tells the difficulty to replace it and has a video on how to do it. If you click on the Skill Level link, a window opens that explains the levels further.

User Interface Planning

Repair Clinic Levels ExplanationIt would be interesting to find out whether these features have developed over time and how their planning was done. I thought it would be interesting to go to the Wayback Machine to look at the development of their site over time, but, unfortunately, they have a robots.txt no follow. What a shame.

Another downside to this company is that, if you want to reach them for anything other than ordering, it is difficult to get through on the phone. All calls seem to be routed through the same place.



Mar 17

What the Function to Register Sidebars Looks like in the Graphene Theme

* Register widgetized areas
* To override graphene_widgets_init() in a child theme, remove the action hook and add your own
* function tied to the init hook.
* @since Graphene 1.0
* @uses register_sidebar
function graphene_widgets_init() {
if (function_exists( ‘register_sidebar’ ) ) {
global $graphene_settings;

register_sidebar(array( ‘name’ => __( ‘Sidebar Widget Area’, ‘graphene’ ),
‘id’ => ‘sidebar-widget-area’,
‘description’ => __( ‘The first sidebar widget area (will always be displayed on the right hand side).’, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

register_sidebar(array( ‘name’ => __( ‘Sidebar Two Widget Area’, ‘graphene’ ),
‘id’ => ‘sidebar-two-widget-area’,
‘description’ => __( ‘The second sidebar widget area (will always be displayed on the left hand side).’, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

register_sidebar(array( ‘name’ => __( ‘Footer Widget Area’, ‘graphene’ ),
‘id’ => ‘footer-widget-area’,
‘description’ => __( “The footer widget area. Leave empty to disable. Set the number of columns to display at the theme’s Display Options page.”, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

* Register alternate widget areas to be displayed on the front page, if enabled
* @package Graphene
* @subpackage Graphene
* @since Graphene 1.0.8
if ( $graphene_settings[‘alt_home_sidebar’]) {
register_sidebar(array( ‘name’ => __( ‘Front Page Sidebar Widget Area’, ‘graphene’ ),
‘id’ => ‘home-sidebar-widget-area’,
‘description’ => __( ‘The first sidebar widget area that will only be displayed on the front page.’, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

register_sidebar(array( ‘name’ => __( ‘Front Page Sidebar Two Widget Area’, ‘graphene’ ),
‘id’ => ‘home-sidebar-two-widget-area’,
‘description’ => __( ‘The second sidebar widget area that will only be displayed on the front page.’, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

if ( $graphene_settings[‘alt_home_footerwidget’]) {
register_sidebar(array( ‘name’ => __( ‘Front Page Footer Widget Area’, ‘graphene’ ),
‘id’ => ‘home-footer-widget-area’,
‘description’ => __( “The footer widget area that will only be displayed on the front page. Leave empty to disable. Set the number of columns to display at the theme’s Display Options page.”, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

/* Header widget area */
if ( $graphene_settings[‘enable_header_widget’]) :
register_sidebar(array( ‘name’ => __( ‘Header Widget Area’, ‘graphene’ ),
‘id’ => ‘header-widget-area’,
‘description’ => __(“The header widget area.”, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );

/* Action hooks widget areas */
if ( count( $graphene_settings[‘widget_hooks’] ) > 0 ) {
$available_hooks = graphene_get_action_hooks( true );

foreach ($graphene_settings[‘widget_hooks’] as $hook) {
if (in_array($hook, $available_hooks)) {
‘name’ => ucwords( str_replace(‘_’, ‘ ‘, $hook) ),
‘id’ => $hook,
‘description’ => sprintf( __(“Dynamically added widget area. This widget area is attached to the %s action hook.”, ‘graphene’), “‘$hook'” ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
// to display the widget dynamically attach the dynamic method
add_action( $hook, ‘graphene_display_dynamic_widget_hooks’ );


do_action( ‘graphene_widgets_init’ );
add_action( ‘widgets_init’, ‘graphene_widgets_init’ );

Mar 13

WordPress: How to Add a Sidebar to your Theme


The word “sidebar”, as is used in WordPress, is misleading .  In Drupal it is called a “block”, which more clearly expresses what it is. In WordPress, a sidebar is a box that holds stuff in the areas that are outside of the main Post or Page area. The size and shape of the box may be invisible because it has no outline or background color, but it is still a rectangle as far as the programming goes. That sidebar can be in the header, the footer or, indeed along the sides of the main content.

For the purpose of this article, we will add a sidebar into the banner of this site to hold the logo. The theme does not provide a function to do that, but WordPress supplies that lack in the sidebar function.  Click here to find out whether your theme has a Dashboard function to add a logo. We will also add a sidebar to the right side of the black bar to hold the phone number.

WordPress: Using the phone number as a tagline

Basic Steps

The basic steps to add a sidebar are

  1. Register the sidebar in the functions.php file
  2. Add the sidebar to a template file
  3. Add widgets to the sidebar
  4. Format the sidebar and widgets with CSS

Register our Sidebar, part 1

If you have created your child theme since WordPress 4.0 was released, your child theme should already have a functions.php file with a function for loading the child theme files. Your parent theme also has a functions.php file. If your theme is simple and follows the basics of WordPress, there will be code to register sidebars in the parent functions.php file. You can see which sidebars are already coded by going to Appearance -> Widgets in the Dashboard. If you want to continue to use the sidebars in the parent theme, you can have sidebars registered in both places. If you don’t want the parent theme sidebars t is important not to just delete the from the parent theme because future theme updates will just put them back. Instead, you will need to add code to the child theme functions.php file to deregister those sidebars.

Example of theme default sidebars - Graphene

If your theme has a more complicated file structure, like the Graphene theme used for this site, you may find that the sidebars are registered in files other than functions.php. And, if you are working in a theme that is new to you, there is some hunting time to figure out where the sidebars are registered. (It is important that the developer tells the client up front whether they are knowledgeable about the theme that is chosen. It is also important for a client to know that finding a developer that is knowledgeable about ever theme or even a very specific theme could hold up the project indefinitely. It’s better to pay a developer with coding experience to figure out that theme you love). Graphene registers sidebars in includes/them-setup.php. Click here to see what the sidebar code looks like.

Now the question is, “Is there something in the Graphene parent theme that will not allow additional sidebars to be registered in the child theme functions.php file?Comments in the function itself say the following, “To override graphene_widgets_init() in a child theme, remove the action hook and add your own function tied to the init hook.” So, we should consider two options:

  1. Do we want to override (not see) the sidebars from the Graphene theme and only see the ones we create.
  2. Do we want to keep the sidebars in the Graphene theme and add others of our own.

For starters, let’s try #2. The basic code for one sidebar looks like this. You can see the full sidebar function here.

function graphene_widgets_init()
if (function_exists( ‘register_sidebar’ ) )
global $graphene_settings;
register_sidebar(array( ‘name’ => __( ‘Sidebar Widget Area’, ‘graphene’ ),
‘id’ => ‘sidebar-widget-area’,
‘description’ => __( ‘The first sidebar widget area (will always be displayed on the right hand side).’, ‘graphene’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-wrap clearfix %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => “<h3>”,
‘after_title’ => “</h3>”,
) );
} // end if to test for the register_sidebar function
do_action( ‘graphene_widgets_init’ );
} // end function
add_action( ‘widgets_init’, ‘graphene_widgets_init’ );

Register the Sidebar, part 2: Steps to Changing and Understanding the Code

  1. Change function name graphene_widgets_init() to function ymontana_webmaster_widgets_init(). There is no magic in having a specific name. You could call it ‘George’ and it would still work, but keeping the “_widgets_init” is helpful in following the code and debugging. The reason for the name change is that WordPress can’t load two functions with the same name. Both the parent and the child functions load, so we can’t have a function in the child theme with the same name as the parent theme. So put the name of your theme in the function name!
  2. register_sidebar and function_exists are functions that are part of the WordPress core. This line helps avoid PHP errors.
  3. global $graphene_settings; is where WordPress will store information about the sidebar when it is created. Change it to $MontanaWebmaster_settings; or your own theme name. Like in #1, this could actually be called anything, but using _settings or _sidebar_settings is helpful for debugging.
  4. Change the name of the sidebar in register_sidebar(array( ‘name’ => __( ‘Sidebar Widget Area’, ‘graphene’ ), to register_sidebar(array( ‘name’ => __( ‘Banner Logo’, ‘Montana Webmaster’ ),. That is the name that will show up in the Dashboard -> Appearance -> Widgets. In your case, you will change it to the name of the sidebar you want!
  5. Change ‘id’ => ‘sidebar-widget-area’, to ‘id’ => ‘banner-logo’,. This is the “slug” or the machine name of the sidebar. This name must not have capital letters and can only have a hyphen to separate the words in the name.
  6. Change ‘description’ => __( ‘The first sidebar widget area (will always be displayed on the right hand side).’, ‘graphene’ ), to have a description of the new sidebar and your theme name.
  7. The next 4 lines add layers to the sidebar that allow you to customize it with CSS. There is no need to change them, unless you have a specific reason to do so.
  8. Now that your code is set to create the parts of the sidebar, you have to tell WordPress to actually do something with it! That is what the core function do_action() is for. You will have to give the function call the name of your function do_action( ‘montana_webmaster_widgets_init’ );.
  9. Finally, you have to integrate the code so that it works inside of all the other things that WordPress is doing. Change add_action( ‘widgets_init’, ‘graphene_widgets_init’ );  to the name of your function add_action( ‘widgets_init’, ‘montana_webmaster_widgets_init’ );
  10. Now, you should see the function in your Appearance -> Widgets. (Note, that if your copy and paste turned the straight quotes into curly quotes, you will have to change them back to the straight quotes to work.
    New sidebar is added to the child theme

Using the Sidebar in the Dashboard

Once the sidebar has been created in the code, you can add widgets to it. You may have to choose a new plugin for this task before you can do it!

There are a number of widgets that can be used to add an image. Image Widget is one. Simple Image Widget is another. We have noticed that the amount of attention to updates, especially security updates, on these plugins is irregular. This doesn’t just mean updating the plugins when there is an update. It means keeping up-to-date on whether the plugin author is keeping their software secure.

Example WordPress Dashboard: Using Content BlocksThe site currently has the Custom Post Widget plugin, which can be used for both text and images. This plugin allows you to add Content Blocks . One of the side effects with Content Blocks is that they tend to put <p> and </p> around each element of the widget. This puts extra space between elements, so you may need to add an extra layer in the CSS to collapse the space. We will use a Content Block to hold the logo. One of the little inconsistencies with WordPress is that you cannot see these <p> </p> in the text version in the Dashbaord. Instead you have to go to the browser and View Source.

Next, we need to add the Content Block to the sidebar as a Widget. Go to Appearance -> Widgets (1)  in the Dashboard. If you have the Custom Post Widgets plugin installed, you will see Content Blocks (2) as one of the widget choices. Drag Content Blocks over the top of the sidebar you want to add it to (3).

WordPress Dashboard Adding Content Block Widget To Sidebar

WordPress Dashboard Sidebar Content Block ChoicesBecause the Custom Post Widgets plugin allows you to add as many Content Blocks as you want, you have to set which one you want to show in that position in the sidebar. Then Save.

Reviewing the process, now, you have registered the sidebar; you have created the Content Block and you have added the Content Block to the Sidebar, but the WordPress templates do not have any code to put it in a particular place on the site.

Adding the Sidebar into the Template

These instructions will show how to add the sidebar to a WordPress template file in a child theme that is based on a theme that is not a framework theme and that follows the WordPress standard practices. You can find out how to create a child theme here.

Example of WordPress Child Theme FilesWe need to add our sidebar to the banner area of the site. At this time, there hasn’t been much customization on the site. Notice that the only files in the child theme are style.css and functions.php, while the Graphene theme folder has a full range of files. The file structure and the code in the files of the Graphene theme are much more complicated than the file structure and code in the default WordPress themes. But, Graphene is not as complicated as a framework theme like Genesis or Avada. That makes it easier to add code to the Graphene theme. To add the logo to the banner, we will copy the header.php file into the child theme and add custom code to this theme.

WordPress Graphene Theme FilesAdding a sidebar to a template file is done with the WordPress core function dynamic_sidebar(‘Name of Sidebar’); To do that, we need to figure out where in the template code to add it. That means that we need to be able to read HTML and PHP. There are 182 lines of code in the Graphene header.php file, but many of them are the double spacing between lines of code to make it easier to read.

This process can get a little confusing because there is an optional header background. The code in header.php for banner images in the Graphene Theme can be found here.


Mar 09

When a WordPress Plugin Update Breaks

Example of WordPress plugin Types fields used on home pageToday, I received a call from a client that a very important part of their WordPress dashboard functions were missing. The purpose of this article is to walk through the debugging process.


The client, Western Forestry and Conservation Association,  is a non-profit organization that manages continuing education training for foresters and other forestry and natural resources conferences and workshops. Their ability to post these events on their website is critical.

Instead of posting everything in the body of a post, Western Forestry needs the information about each event to be broken up into fields so that information that is on the post for each event can also be used on the home page and on other parts of the site. Notice this example from the home page where 8 fields are used for each conference.

  1. Conference Title
  2. Home Page Photo
  3. Start Date
  4. End Date
  5. Conference Location
  6. URL to PDF version of conference materials
  7. URL to registration page

Example of WordPress Types Plugin Field GroupsBy default, WordPress posts are not set up with custom fields. To have custom fields in Posts, you add a plugin such as Types or ACF. On this site Types was used. With the original install, the menu for the Types plugin contained a Custom Fields item. To create fields, you had to start with a Field Group. Then you can add fields to the Field Group. In this case, most of the fields used are in the Upcoming Conferences Field Group.

Fields are created, changed and deleted in the Types menu in the Dashboard. They are also assigned to certain types of structures, such as all Posts, all Pages, or specific Categories in the Types plugin. But, the fields show up in the Posts below the main body of the Post. The strange thing is that Multiple Registrations fields are showing, but Upcoming Conference fields aren’t.

The Problem

The problem that was found today is that the fields are no longer showing below the body of the Post. That means that the site owner can no longer enter the information needed for each event.

Tracking Down the Problem

There are three main questions that must be answered, 1) how did the problem happen, 2) how extensive is the problem, 3) what is the solution.

Question 1: How Did the Problem Happen?

Whenever there is a problem with a plugin, the first thing to check is whether an upgrade caused the problem. This is where keeping good records about updates is critical. According to my records, the Types plugin was updated to version 2.9 on 2/17/16. That is almost 3 weeks prior to the client finding the problem. If the client has added or updated content since then, they would have noticed the problem earlier, if it has to do with the update. This is uncertain.

Example of new Types menuQuestion 2: How Extensive is the Problem?

We know that the data entry form for the field isn’t showing, but this brings two more questions.

  1. Are the fields actually gone from the plugin setup
  2. Is the data that was entered for previous conferences gone?

Going to the Types menu in the Dashboard, the menu items have changed. That is another fact that points to a plugin update causing the problem. Also, all the fields are still showing in the new format

If the fields were gone from the database, the existing workshops would not be showing up correctly, but the information is all showing

Example Dashboard Types Fields Remain After UpdateSo, the only question that remains is why aren’t the fields showing in the  Posts in the Dashboard?

Question 3: The Solution

It looks like the only problem was the item on the right side side: Use Field Group. It needs to be set to when ANY condition is met!

So, in the end, it was one little setting that caused the problem!




Jun 27

WordPress: I want One Little Thing, and now I have to have a Child Theme

I just want a phone number in the banner. Or maybe I want the phone number in the navigation bar and I want a logo in the banner. Websites are dynamic. They should be changing with the needs of the organization, unlike print materials that are finished when they are printed. That shouldn’t be so hard. I mean, it’s WordPress after all!

WordPress: Using the phone number as a taglineWell, maybe it’s not just a couple of clicks after all. What if I chose a theme without a pre-built place to put a phone number in the banner? WordPress by default has a title and a tagline in the dashboard Settings. Almost all themes put these somewhere, so I could take the easy way out and just put the phone number in the tagline, as shown in the screenshot.

But that’s ugly. I want to put the phone number in the upper right hand corner or at the right side of the menu bar. Too bad. The theme doesn’t do either of those. Because the theme is not set up to allow the user to move the phone number around to various locations, your options are to create a child theme or choose a different theme with the phone number in the upper right hand corner. And, if you choose a different theme, you will find that there are things that theme doesn’t do that you want …

Everything Affects Everything Else

But, before I start moving things around, I should consider the design. The current design has a banner image that is not conducive to having a phone number over the top of it. That is why I could consider putting the phone number in the menu bar. At some point, I would like to have a custom banner background. If I want the phone number in the upper right hand corner, I need to communicate that to the graphic artist, or I may find myself right where I started! If I decide that I would like to have different banner images on different pages, I will have to remember that the image has to be simple in the place where the phone number is, or the phone number will not be readable.

So, if the theme doesn’t give me a place to put the phone number in the banner, and I still want the phone number in the banner after careful consideration, how do I accomplish that goal? WordPress has provided an excellent structure to to that: a sidebar. But, the theme does not have a sidebar in the banner. So, now you have to create a child theme.

How to Create the Child Theme

  1. To create a child theme, you have to be able to work in the files. Some themes come with an editor right in the dashboard, but it’s wise to become familiar with the WordPress structure if you are going to work in the files. For that task, you need a program that can do FTP or, preferably, SFTP.
  2. WordPress Themes FolderWordPress usually installs with the three latest default themes. For example, in 2016, it loads with TwentySixteen, TwentyFifteen and TwentyFourteen. In the case of the example on the right, two of the default themes were removed and Graphene was added. The goal is to create a child theme from Graphene to change the banner.
  3. First make a folder for the new child theme.
  4. Example of WordPress Theme folder with child theme folderBefore you can start making the changes you want, there are two items you need to add to files in the child theme: style.css and functions.php. These two files are different from other files you may add to your child theme because they do no contain the same code as the parent theme.Some time ago, you could just add style.css with the child theme information, but that has changed. Now, you add code to both style.css and functions.css. The information for creating a child theme is found in the WordPress codex.
  5. First, we will add a file called style.css. This file is one of the basic files in all WordPress Themes. When you want to change the way elements on your site are positioned or formatted, you can override the parent styles in the child style.css file. To create the child theme, we are going to work in the comments of this file. The WordPress core uses that information to load both your theme and the parent theme.
  6. The page from the WordPress Codex linked above will give you the text to add to style.css. Even if you don’t add any new styles, you still have to have this file in your child theme. I added the following to the top of style.css. It is much shorter than the lines in the codex, but since this is just for customizing my own site, not a theme for general use, it’s fine:
    Theme Name:   Montana Webmaster
    Author:       Nora McDougall-Collins
    Template:     graphene
    Text Domain:  graphene-child
  7. In functions.php, I will add:
      add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
      function theme_enqueue_styles() 
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  8. The basic files in a WordPress Child ThemeNow, the basic child theme is created and shows in Appearance -> Themes.  At this point all functions and formatting are coming from the parent theme. The benefit of doing the work is that now we can start making changes to the child theme. Then the parent theme can be updated without losing those changes.
  9. In the screenshot below, you can see that the new child theme shows up in Appearance -> Themes. The other two themes that are installed have images, but the new child theme doesn’t. If your child theme has a graphic design, you can add a thumbnail too by adding a file called screenshot.png to the theme files.How a WordPress child theme shows in Appearance -> Themes
  10. Note that this describes the method to create a child theme using the core WordPress functions. Some of the framework themes have their own dashboard system.
  11. The next step in this project is to use the functions available in the WordPress core to create a sidebar.

Jun 23

E-Commerce Woes: Where’s the Cart?

One of the reasons it’s so expensive to have a developer work on your e-commerce is that there are just so many things to think about and so many options. One of those little things came up recently in an Ubercart for Drupal 7 project.

Note that many shopping cart  issues are not Drupal specific. No matter what technology you use, the basic functional shopping  cart questions are the same. The difference between technologies is how they are implemented and how many options that technology gives you.

User Interface Problem: How do I Know Whether I Have Products in my Car?

The issue of abandoned shopping carts is a major concern for online retailers. Many articles are written on how to entice the viewer to take the shopping process all the way to completion, so that the site owner actually has a sale. It is much easier for a viewer to abandon a shopping cart online than in a store because the abandoned online cart doesn’t come with the embarrassment and inconvenience of putting the merchandise back!

IExample of Shopping Cart count notice from Shopifyn a recent design for a site with e-commerce, the site owner did not request a shopping cart icon on the site. That would be a little icon that shows how many items a viewer has in their cart. This is a very common feature in sites with e-commerce and is a reminder that they haven’t “checked out”. Sometimes this feature is implemented with a cart icon, other times, as shown in the screenshot, it is a text reminder. The example shown here is from a Shopify theme.

It is the job of the graphic designer to communicate well with the client and include all the elements needed in the basic header, footer and sidebars. When there is a shopping cart, the graphic artist should also be knowledgeable about the basic functions and user interface for a shopping cart. That means that the graphic artist should have knowledge of web development, user interface (UI) and user experience (UX), as well as be involved in the planning process.

In this case, the oversight was caught, not by the client or the graphic artist, but by the developer  in testing the Ubercart install. This is an example of how the testing process can result in changes to the original website plan!  One of our developers was testing the transaction processing, and noticed that she had no way of telling whether they system had kept the products she had added to the cart when she logged back into the site. While the website owner had approved the design before it moved to implementation, in a collaborative process, developers will watch for inconsistencies and fine tuning and the website owners will value that process.

Possible  Solutions

Possibility 1: Ubercart has some kind of a little function that you can add to your pages. WordPress plugins often come with such a widget.

Possibility 2: The is “yet another module” that you can add to do this task.

Possibility 3: There is a core Drupal function for this.


This problem is rather difficult to search for. A search for “drupal 7 ubercart items in your shopping cart” only had one entry in the first page of results that was even relevant.

  1. http://drupal.stackexchange.com/questions/16887/ubertcart-cart-does-not-follow-my-cart-count
  2. http://www.zyxware.com/articles/4607/drupal-how-to-theme-ubercart-shopping-cart-block-in-drupal-7

Possibility 1

Drupal 7 Ubercart Shopping Cart BlockBoth posts above mention that Ubercart adds a Shopping Cart block into Structure -> Blocks. This is indeed the obvious answer because it’s using a core function in Drupal.

But, it’s not that easy! This block adds a lot of pieces that you may not want on your page! This is an example of the fact that you need to know what you want before you implement.

What are the Specs?

  1. Do you want a title?
  2. Do you want a cart image that links to the shopping cart page?
  3. Do you want it to tell whether there is anything in the cart?
  4. Do you want tht total cost of the items in the shopping cart to show?

These are elements that should be in your graphic design, that is, they should have been figured out before the coding started.

What Does the Ubercart Shopping Cart Block Do?

Drupal 7 Ubsercart Shopping Cart WidgetThe block on its own is pretty ugly, but it has quite a lot of functionality.

  1. It has a title
  2. It has a shopping cart icon
  3. It tells the number of items
  4. It tells the total code
  5. It has a link to View the Cart

Ubercart takes care of the functionality, but you have to take care of the look and feel. At this point, the formatting is picking up from the default, not what you want. With CSS, you can choose to format or hide any of these options. Or, you could choose not to have the options at all. Instead, you could choose to just have a View Cart button that takes the viewer to a page that has further information.



Jun 20

Drupal 7: Planning your Login and Logout Function

The purpose of this article is to give the site owner who needs to save on planning costs a resource to do some advance learning and planning.

Planning and the Cost of Planning

Even a task as simple as a Member Login has a number of implementation options. Each option also has its own side effects to consider. A basic requirements list for the project may state that the website needs to allow Members to login. If that is all that is agreed on, the developer(s) can make the login any way they choose. When website owners think through the details of how they want these functions to work, the development process goes much more smoothly.

If a website owner, doesn’t know the options or doesn’t provide a detailed documentation of specifically how they want a login function to work, it is long term smart to pay the developer for some time to review the options and side effects. Or, the website owner can take the time to research the options, as there is a wide range of information available online.

Looking at two Options

Example of a login button within a designHere is a simple option for a block that is commonly placed on the right side of a banner or in a sidebar. The design shown here accommodates three elements 1) a search box, 2) a member login, 3) social media links. The design is nice and clean, but does it do the task that is needed on a particular site? The best web development process allows for change

The login option shown in the first section is a link. That means that when you click the Login button, it will take the viewer to another page to login. When this option is well implemented, the button will change to say “Member Logout” or just “Logout” after a successful login.We would say that this button has two states: 1) the login is not set, 2) the login is set.

The website owner may decide  that the login interface could be done with a form in the banner to make it more convenient for the client. Why make the user go to another page just to get to a small form with two fields? ThExample Login Logout Form without going to another pageis type of decision is part of a collaborative process that should involve the site owner, the graphic artist and the developer because now the graphic design needs to be changed, the CSS coding needs to be changed, and the settings (Drupal 7 in this case) need to be changed.

Option 1: Task Requirements / Goal

Create a button-style link that will have two states:

  1. If the Viewer is not logged in, the link text will be Member Login and link to the Drupal login page to allow the user to enter their user name and password.
  2. If the Viewer is logged in, the link text will be Member Logout and redirect to the home page in a logged out state.

Drupal Structures Involved

  1.  The three elements are in a Drupal 7 Block.
    • The Block has to be created in the Dashboard under Structure -> Blocks
    • The pieces for Search, Member button link, and social media button links have to be added to the Block in the page for that Block
  2. The Block has to be added to the Banner area in the main Blocks screen
  3. The elements in the Block have to be formatted with CSS in the files.

Drupal Options to Implement Option 1

  1. Drupal 7 default login blockDrupal 7 has a User Login block as part of the basic install. We could just use that, but it would not match the design from the graphic artist.
    1. Our problem here is that we want other elements in the same block as the Login/Logout function.
    2. Also, the default login block produces a login form on the page, not a link to the login page, so that fits Option 2, not Option 1
  2. This structure could be implemented in a Menu or Menus. Creating this structure as a menu would involve a lot of “workaround.”  It would require significant rework of the CSS to switch the shape from a default vertical or horizontal menu to the design from the graphic artist. There would also be additional work involved in adding a search and images to the links.
  3. This structure could be coded into the template file. I don’t recommend this because it does not allow the client access to make changes without learning to code. While it takes a very computer savvy content manager to manage Blocks, it is another learning curve altogether to learn how to code.
  4. This structure could be implemented in a  new Block that holds all three elements. This is the method that was chosen.

What does the Drupal 7 Login / Logout Function Do?

  1. The first question is, “What do we want it to do?”
    1. The programming needs to check whether a viewer is logged in or not when they first go to the site.
    2. Should the button link respond when a Viewer rolls their mouse over it? Again, we come to a question that should have been worked out in the original design process with the graphic artist. A web savvy graphic artist will identify every element in the design that is a link and create a graphic response. In this case, we have several options.
    3. The visual button is not a graphic file. Instead it is created with CSS. But
  2.  https://drupal.ucsf.edu/smart-loginlogout-links – this reference is for adding the functionality to a menu






May 26

Drupal 7: Switching from Ubercart to Drupal Commerce

This article is about fixing the problems discovered in the recent article: How Content Management Systems Get out of Sync. Ubercart could not be made to do the job needed by the client, so a switch is being made to Drupal Commerce. The work demonstrated in this article will be done in a cloned site, as the original Ubercart install is still intact in the current development site.

Understanding How the Switch will Affect the Site Structure

Drupal 7 administrative menu items affecting Ubercart

Drupal 7 Ubercart Product Classes function as Content TypesIn Drupal, modules, such as Ubercart, are installed through the Modules menu (3). Most of your content structures are setup through Content Types (2). But, when you have specialized content, the module may have a different starting point than Content Types. In the case of Ubercart, your product/service content types start with Store (1). More specifically, if you click on Store, product content types start as Product Classes, but what they really are is specialized Content Types. That means that not only do they show up in Product Classes, but they also show up in Content Types and in Add Content. It also means that you can add fields to the fields that are already there by default from the Store Product Class. But, you cannot delete them from Content Types; you have to go back to Store to delete them.

Drupal 7 Ubercart delete Product Class from StoreIf you remove a Product Class from Store, it still exists in Content Types, which Drupal 7 Ubercart example of modules that cannot be disabledmeans that you may not lose all your previously entered data.

Removing Ubercart

What happens if you disable Ubercart without removing the Product Classes? Keep in mind that Ubercart is made up of 30+ modules and submodules in 5 module groups. It’s not a trivial thing to either disable or delete it. Disabling the modules has to be done in several steps because of the dependencies in these modules, that is some modules cannot be deleted until other modules are removed – the checkboxes are greyed out. Even with all the modules that can be disabled, the Product and Store modules do not allow you to uncheck them.

Disabling the Product Classes does not change the ability to disable Product and Store. The successfully disabled modules are now available for uninstalling. Before setting the Ubercart Modules to disabiled, there were oDrupal 7 Ubercart disabled modules in uninstall panelnly a few modules available for uninstall. Drupal 7 modules available for uninstall before work on Ubercart uninstall

it took three different uninstall cycles to remove all the modules shown in the screenshot. Again, some of the checkboxes are greyed out because of dependencies.

In trying to disable the rest of the modules, some of the modules that were deleted seem to be showing in the list. Pay per Node Ubercart which is not in the Ubercart module groups had to be removed before Product could be removed, and Product had to be removed before Store could be removed. Now the Store item is gone from the Administrative menu!

After you Uninstall, you still have to remove the files from the server: sites -> all -> modules. The Pay-per-node modules are in a different directory. Will they apply to Drupal Commerce too?

One concern came up in the process of deleting Ubercart. The Roles module was in the Uninstall list. There is a Roles function in People -> Permissions. The Roles module that was in the uninstall list does not seem to have any relation to People -> Permissions -> Roles.

Events, Donations and the Views that they are connected with still seem to be working. The question will be whether they can be made to work with Drupal Commerce!

Drupal Commerce: Install and Setup

There seem to be about 21 submodules in Drupal Commerce, and they are all in one group.

There is a new “Store” item in the Administrative menu, but it is in a different position.Drupal 7 Administrative Menu: the store link is in a diferent place for Drupal Commerce than for Ubercart

In Drupal Commerce, the Products do not become Content Types, but they can be used by Content Types as Entity References.





Older posts «