Aaron Forsyth

CLAS buttons are used on the Exchange website, the college website as well as various other sites.  They were designed as images, but need to be expanded and updated.  I decided to redo them with text and CSS.  Here are the original image buttons:

Here is the proposed new design:

I’ve finally implemented the new theme – UNC Charlotte Theme – on all of our sites.  This was a big project that I hope nobody noticed.  The reason you should not have noticed any changes is because they were almost entirely backend code changes.  The biggest difference visually is that we’ve moved the max width for sites from 960px to 1140px.  

There are several new options you can enable on your site.  The most visually different option is the new variation called UNCC Epsilon.  This variation mimics the new Drupal theme that is being implemented across our college and department sites.  Additionally there are new header options including the choice to use a slider as your header.  In order to use a slider for your header, you’ll need to create a slider first.  As mentioned in the previous post, I’ve created Page Hierarchy Menus for sites that previously relied on the default page hierarchy for their menu.  Some sites might notice a slight change in the menu order because of this.  You can modify the menu structure by logging in to your site and going to the Customizer in the WP admin bar.

If you previously used the Simple Custom CSS plugin or the PC Custom CSS plugin, all of your CSS has been moved into WordPress’ additional CSS option.  You can see all of your code by logging in to your site and going to the Customizer in the WP admin bar.

On to the next project!

As I’ve been working to update our instances of WordPress to the new theme, I’ve learned a few things.  I thought I’d take a minute to document them for myself (and anyone else who cares to read).

Source Code for a Page

Viewing the source code for a page can be helpful when troubleshooting problems on a page.  Typically I use the Chrome inspector to see the underlying HTML/CSS and resolve an issue.  In this case, however, I was trying to compare a page in our production and development environments.  I pulled up the source for both pages and did a diff on them using Notepad++.  The files were identical.  But when I looked at the pages in the Chrome inspector, there were clear differences.  Ultimately, I discovered that viewing the source only shows what the server sent at the time the browser requested the particular webpage.  This does not include changes made on the client by JavaScript. 

WP URL Autocomplete

I also learned that WordPress will autocomplete URLs for you.  For example, this post is located at https://pages.charlotte.edu/forsyth/blog/2018/03/09/tips-and-tricks/, but if you only input https://pages.charlotte.edu/forsyth/blog/2018/03/09/tips into the address bar, WordPress will still navigate to this post.  In WordPress this is called canonical redirect.

WP Menus

WordPress allows users to automatically add new top-level pages to a WordPress menu.  You can select this option by checking the box below your menu.  

However, subpages – pages you create with a parent using the page hierarchy – don’t get added automatically.  I’m not sure why WordPress has not implemented this as it seems intuitive to me.  In fact, if you do not create a menu and your theme allows a fallback, then WordPress will create a menu including subpages, using a function called wp_list_pages.  Having a fallback menu complicates things in it’s own way.  For example, if you do not want a menu, you have to create a menu with no menu items.  Very counter-intuitive.  I’ve done a couple of things to try to “fix” this.  First, since our theme previously used a fallback, many sites were relying on that fallback.  I wrote a script to create menus for those sites, which mirrored the menu they had previously.  The new menu, called Page Hierarchy Menu, automatically adds new top-level pages.  Then I added a plugin called Auto Submenu to take care of any subpages.  

Much of the work I am doing builds on what Crystal Barton (my predecessor) built originally.  We have a theme she developed called Variations Template Theme (VTT), which provides the base for our UNC Charlotte themes.  Alex Chapin and I have had several discussions about where to take VTT and how to continue development.  

Currently our site themes are built by taking VTT, a child theme, and a variation from a plugin.

VTT (Parent Theme) -> UNC Charlotte Faculty Staff (Child Theme) -> UNC Charlotte Variations (Plugin)

The child theme primarily allows specific variations from the plugin.  I proposed that we change this however, due to some quirks in how files are loaded by WordPress:  CSS files are additive, however template files are loaded as first found.

CSS: Parent -> Child -> Plugin  –Load all of these and combine them.

Template Files: Child -> Plugin -> Parent  –Load the first template file only.

I think a better way to use VTT is to eliminate the plugin so that we only have VTT and the child theme.  Then we can control variation options via a setting within the theme.  In WordPress this setting is entered in the theme_mod record in the wp_options table in the database.

I have decided to resurrect this blog after 3 1/2 years of inactivity.  In July 2015 I left my role as a Technology Support Analyst in CLAS to work for the Graduate School.  I was hired as a Business Technology and Applications Analyst there.  I worked on a couple of web projects including eGEM (now GPDNet) and the Graduate Admissions website. I also provided backend support for DegreeWorks as well as various other small technical projects.  I really enjoyed the work and my time there, but was called back to CLAS in July 2017 as the Academic Technologies Developer.  Now, I spend all my time working on web development.  I hope I can use the blog to post updates about the work I’m doing in CLAS as well as technical tips and tricks I find useful.