Category: WordPress

Web Technologies & Development at 2018 Tech Summit

2018 Texas A&M University System Technology Summit
Moody Gardens Convention Center, Galveston, TX
February 26-28

The Texas A&M University System Technology Summit is the place technology experts come to learn from the best, exchange ideas on common challenges and spend time together. Professionals have the rare chance to blend technical learning across a wide range of subjects. TechSummit offers sessions to help you master your daily work, while enjoying a taste of island time. This year’s web track is full of valuable sessions:

  • New App, Who Dis? : A Journey Into Modo’s Mobile App for Education
    A presentation on what went into Tarleton’s decision to leave their old (Ellucian) mobile app and go to a new app powered by ModoLabs. Presentation includes what Modo is, pros and cons of the two apps, and lessons learned throughout the process of getting people to abandon the old app and embrace the new one.
  • Code K-9
    Automation has become an integral part of any successful team in software industry. A team which can master the concept of doing more with less, can achieve rapid product development with consistent higher standards. PHP Code Sniffer, which analyzes your code directory against a set of rules/coding standards, will be discussed.
  • Infrastructure as a Service at UNT: A Case Study of a Successful Private Cloud
    The University of North Texas System provides IT services to three universities in the Dallas area. By embracing Infrastructure as a Service (IaaS), we have successfully provided self-service cloud services to our customers with greater reliability compared to traditional IT systems, and significant cost savings compared to public cloud offerings. We have proved that the journey to the cloud starts in your data center on premise.
  • Getting the Most Out of HTML Emails
    Email continues to be the most reliable form of communication to campus members, but mastering this tool can be very intimidating. Using campus tools like Bulk Mail, Maestro, and Listserv allows you to do and learn more to reach your audience. Join this session to explore the possibilities (and constraints) of HTML emails, how to use analytics to determine the success of your message, and address accessibility in your inbox.
  • Creating a Custom WordPress Plugin 101
    WordPress has many functions that come “out of the box” and you can find plugins that perform a lot of functions. What do you do when you can’t find a plugin to meet a need or you need to change some functionality of a plugin? We will discuss the basic principles of plugin design and development. We will take a look at a custom plugin that modifies an existing plugin. Lastly, we will look at a custom plugin that has an admin form, custom database table, and presents content to users. Come hear how you can use custom plugins to tailor WordPress to your needs.
  • Find: “Motivation” – Describing and Finding The Right Image
    “A picture is worth a thousand words” is an understatement. In this talk, we will unlock the data in an image. With a functional examination of strategies, techniques, and technologies we will define and leverage what images hide in plain sight. 
  • Enhancing Web Accessibility and User Experience with ARIA and HTML5
    HTML5 offers some great ways to make our sites more accessible, but there is one catch: not all browsers support these new techniques. Enter ARIA (Accessible Rich Internet Applications), which can extend the capabilities of HTML by adding attributes and allowing interaction of dynamic changes to content that are well supported by most browsers and assistive technology. In this session, you’ll explore the differences between HTML5 and ARIA and learn how ARIA – when properly implemented – can complement your HTML5 markup to enhance the accessibility of your website.
  • Next-Generation Campus Portal Implementation
    TAMUCT has recently implemented a next gen campus portal environment that allows students, faculty and staff to quickly locate and access services—from any computer or mobile device. This session will outline why a new portal was needed, the implementation process and the lessons learned during the first semester of use.

Pre-conference workshops specific to web development:

  • Workflow Essentials for Web Development
    This workshop will expand your knowledge of the web development process by providing you with a few essential tools and tricks needed to help you create more user-friendly and accessible websites.

GoWeb After Dark

Howard Technology Solutions treats you to hors d’oeuvres and a complimentary first drink. Join the Texas A&M GoWeb group and end your day in a casual setting. Network with web professionals and discuss everything web, from the latest trends on analytics, accessibility and branding to recent successes and challenges.

Please check out the complete schedule and we hope to see you in Galveston!

Donald St. Martin & Morgan Hammond
Track Chairs, Web Technologies & Development

Continuous Deployment with Codeship and WP Engine

Overview of continuous deployment pipeline

The purpose of this article is to share our approach to continuous deployment for WordPress plugins and themes on our servers at WP Engine. Continuous deployment is the automated testing and delivery of code to development and production environments. Knowing your web host’s requirements is essential to setting up a continuous delivery process. Once you know this, then you can evaluate a service and later develop a solution that meets your needs. I have implemented this for more than a dozen WordPress themes and plugins, and I believe that effort was worth the time it is saving us now.

Video Tutorial

Our Approach

Codeship automates the process of testing, building, and deploying code to your server, and was the first such product I found which would integrate with our web host (WP Engine). It watches a repository, clones an updated branch to a virtual machine, runs your commands on it, and then deploys the result to your servers. Services like Codeship allow us to automate our existing development and deployment workflow so that changes to the code in our Git repositories are automatically made on our servers.

We use three custom bash scripts in our Codeship projects: setup, build, and deploy. The setup script runs first and is mostly identical for all branches:

# Setup
# Get around restriction on shallow pushes by WP Engine
git filter-branch -- --all
git checkout branchname
# Add User Data
git config --global "codeship-shortreponame"
git config --global ""
# Combine remote git servers
git remote add servers $SERVERNAME_ENVIRONMENT
git remote set-url --add --push servers $SERVERNAME_ENVIRONMENT
git remote set-url --add --push servers $SERVERNAME2_ENVIRONMENT
# Install needed modules
npm install -g grunt-cli
npm install -g grunt@0.4.0
npm install -g bower
npm install -g ruby
gem install compass
# Move repo files to a named folder
shopt -s extglob
# Move repo files whose name begins with a period
mv .sass-lint.yml $FOLDERNAME/.sass-lint.yml
# Exclude development-only files from commit
rm .gitignore
mv .codeshipignore $FOLDERNAME/.gitignore
# Move named folder into a structure identical to the root directory of a WordPress server
mkdir -p $DIRECTORY

It adds git user data, defines a list of remote server repositories, and installs command line modules on the virtual machine. The staging servers are listed as remote git repositories in the staging branch’s setup script, and our production servers are listed as remotes in the master branch’s script. Then it replaces the repository’s gitignore file with our .codeshipignore file and moves all files into a folder structure relative to the root directory of our servers:

# large/disallowed file types
# a CDN should be used for these
# Directories that may or may not exist in repo AND should not be on the server
# Only using one file from bower_components/html5shiv

Our typical build script imports Node and Bower modules and uses Grunt to compile Sass and Coffee files:

# Build
composer install
npm install
bower install
grunt develop

It uses the repo’s gruntfile (example) to perform a different set of tasks for the staging and production servers:

module.exports = (grunt) ->
    pkg: @file.readJSON('package.json')
      files: [
      tasks: ['sasslint', 'compass:dev']
          config: 'config.rb'
          force: true
          config: 'config.rb'
          force: true
          outputStyle: 'expanded'
          sourcemap: true
          noLineComments: true
          jQuery: true
          console: true
          module: true
          document: true
          src: [
        configFile: '.sass-lint.yml'
      target: ['css/src/**/*.s+(a|c)ss']
          archive: ''
        files: [
          {src: ['AgriFlex/*.php']},
          {src: ['css/*.css']},
          {src: ['img/**']},
          {src: ['js/*.js']},
          {src: ['bower_components/fastclick/lib/fastclick.js']},
          {src: ['bower_components/foundation/{css,js}/**']},
          {src: ['bower_components/modernizr/modernizr.js']},
          {src: ['bower_components/jquery/{dist,sizzle}/**/*.js']},
          {src: ['bower_components/jquery-placeholder/*.js']},
          {src: ['bower_components/jquery.cookie/jquery.cookie.js']},
          {src: ['bower_components/respond/{cross-domain,dest}/*.js']},
          {src: ['bower_components/html5shiv/dist/html5shiv.js']},
          {src: ['vendor/**', '!vendor/composer/autoload_static.php']},
          {src: ['functions.php']},
          {src: ['']},
          {src: ['rtl.css']},
          {src: ['screenshot.png']},
          {src: ['search.php']},
          {src: ['style.css']}

  @loadNpmTasks 'grunt-contrib-compass'
  @loadNpmTasks 'grunt-jsvalidate'
  @loadNpmTasks 'grunt-contrib-watch'
  @loadNpmTasks 'grunt-sass-lint'

  @registerTask 'default', ['compass:pkg']
  @registerTask 'develop', ['sasslint', 'compass:dev', 'jsvalidate']
  @registerTask 'package', ['compass:pkg', 'jsvalidate']

  @event.on 'watch', (action, filepath) =>
    @log.writeln('#{filepath} has #{action}')

Note that we use Compass’s expanded output with sourcemaps for developing Sass files and a compressed output for production. A web browser’s inspection tool can detect sourcemaps and use them to show you where a CSS rule is located in your Sass files. This is essential for troubleshooting or modifying Sass as quickly as possible.

Once the build script has finished, the deploy script commits changes to the cloned repository and pushes them to our WP Engine servers:

# Deploy
git add --all :/
git commit -m "DEPLOYMENT"
git push servers HEAD:master --force

If this is the first time you’re using the Git Push feature for a particular WP Engine install, you might need to use this git push command instead to avoid a “missing branch” error:

git push servers HEAD:refs/heads/master --force

We can only send code to WP Engine servers from Codeship using their git push feature. It replaces user input authorization with an SSH key. The .codeshipignore file allows us to exclude unneeded files from the commit and reduce upload times. Since our projects are authorized git push users with the WP Engine servers we push to, the last command pushes our final commit to the remote server repositories we defined during setup.

The video tutorial demonstrates how to implement this process. What follows are the same steps I take to connect each of our repositories to our WP Engine servers using Codeship.

Using Codeship to deploy Github repos to WP Engine

  1. Create a new Codeship project and connect it to a Git repo URL
  2. On the Codeship General Project Settings page, copy the SSH public key
  3. On each WP Engine install you want connected, use the SSH public key to add a new Git Push developer named codeship-shortreponame.
  4. Show what the variables page looks like On the Codeship project’s Environment settings page, create a new variable named SERVERNAME_PRODUCTION and SERVERNAME_STAGING for each WP Engine install you want connected.
  5. On the same page, define a FOLDERNAME variable as the name of the folder your repo’s files should be placed within. Also define a DIRECTORY variable as either wp-content/plugins or wp-content/themes.
  6. Show what the deployment pipeline page looks likeOn the Codeship project’s Deployment settings page, create one pipeline for the repo’s master branch and another for the staging branch.
  7. Create separate custom scripts in each pipeline for the setup, build (optional), and deploy portions of the process.
    • The setup script only has a few variables that need to be changed for each project: branchname, shortreponame,, and SERVERNAME_ENVIRONMENT.
    • The build script contains your existing build process, such as importing NPM modules or preprocessing css and js files.
    • The deploy script has no variables.
  8. Ensure your Git repo has a master and staging branch.
  9. Checkout the staging branch of your repo and add a .codeshipignore file to its root directory using this template as a guide.
  10. Show what the build output page looks likeCommit the change and push it to your repository. This will trigger the Codeship build process, which you can watch on the project’s main page as it moves through each line of your custom scripts.
  11. Once the build has finished, it will send the code to the staging server if successful or stop on the first line that results in an error. If it is successful, it will be pushed to the server! Whether or not it is successful, you can click on any line of the script to see its output, so if it fails you can use this to troubleshoot that command.
  12. When your build is successful, you can merge the staging branch to the master branch on your computer and then push it to the repository. This will trigger the master pipeline, which will either deploy it to your production server or result in an error.

And that’s it! Now you have an automated deployment process integrated with your existing Git repository, and all of your servers can have the latest, tested version of your plugins and themes each time you push to it. If you found this article helpful, please leave a comment. You can view the public repositories of Agrilife Communications on Github for more information about their build processes. I can be reached by email at


CMS Systems In Use Across Campus

Several years ago we did a survey of what content management systems were in use across campus.  After several years of change in this space we thought it would be good to see what those numbers look like now.

A trend of consolidation stands out.  Through self selection, the majority of us are naturally aligning around Cascade and WordPress.  Most of those who have not made that migration are considering it.  The exception is Provost IT, which is firmly tied to Kentico.


  • Bush School – moving into Cascade
  • College of Architecture
  • College of Engineering – moving from Umbraco to Cascade
  • College of Geosciences
  • Health Science Center
  • Libraries
  • Division of Marketing & Communications
  • TAMU Galveston
  • Tarleton State University – for the entire university


  • AgriLife
    • Extension programs
    • Department of Wildlife & Fisheries
    • Department of Entomology
  • College of Dentistry – for news site
  • College of Education – moving from Drupal to WordPress
  • College of Engineering – for some smaller sites
  • College of Science
    • Department of Statistics
  • College of Veterinary Medicine – moving from Umbraco to WordPress
  • Health Science Center
  • Mays Business School
  • Division of Marketing & Communications – for news site
  • Public Policy Research Institute
  • Student Affairs
  • TAMU Qatar
  • TEEX – will soon begin using for microsites


  • Education – but actively moving to WordPress


  • College of Engineering – but actively moving to Cascade
  • College of Veterinary Medicine – but actively moving to WordPress
  • Finance & Administration – but considering moving to Cascade or some other platform


  • Provost IT


  • College of Education – but actively moving to WordPress


  • TEEX


  • Transportation Services -but considering moving to Cascade or some other platform


  • College of Science – but likely to change

Web Technologies & Development at 2017 Tech Summit

2017 Texas A&M University System Technology Summit
Moody Gardens Convention Center, Galveston, TX
February 20-22

The Texas A&M University System Technology Summit is the place technology experts come to learn from the best, exchange ideas on common challenges and spend time together. Professionals have the rare chance to blend technical learning across a wide range of subjects. Tech Summit offers sessions to help you master your daily work, while enjoying a taste of island time. This year’s web track is full of valuable sessions:

Pre-conference workshops specific to web development are:

GoWeb After Dark

Equidox by Onix treats you to hors d’oeuvres and a complimentary first drink. Join the Texas A&M GoWeb group and end your day in a casual setting. Network with web professionals and discuss everything web, from the latest trends on analytics, accessibility and branding to recent successes and challenges.

Please check out the complete schedule and we hope to see you in Galveston!

Donald St. Martin
Track Chair, Web Technologies & Development

HTTPS and the CAS Maestro WordPress plugin

At the College of Engineering, we are in the process of adding SSL certificates to all of our WordPress sites. On top of faster load times with HTTP/2 and higher page rankings in Google’s search engine, we also wanted our WordPress logins to be secure. It is a simple procedure that adds one more layer of obfuscation. Well, it was supposed to be a simple procedure but I ran into an issue when securing the WordPress login process.

Student Affairs IT Launches New Responsive Site

The Division of Student Affairs Department of Information Technology has just launched a new site. The site is based upon WordPress and uses a very popular theme called Avada by Themefusion, which is billed as the #1 selling WordPress theme in the world. We selected Avada primarily because it is very responsive. But also because the built-in theme feature set is so robust, that you can do almost any type of design without a large amount of custom CSS work. This makes it a good theme for our departmental customers who want to have a sharp looking site without having to wait for IT to mock it up. The site is also integrated into our departmental Twitter feed so stories go out via social media.

Wanted! A few good developers to add to my design process

Smashing Magazine recently added a post to their site?from Paul Boag which is a must read! ?It reiterates many of the reasons why our department began?incorporating the developers into our initial conversations when developing websites.

In addition, the article?reinforces the idea that we should stop seeing developers as the enemy or “those people” but rather as allies to the cause of creating creative and effective websites.

If my word is not enough, maybe reading this article at Smashing Magazine will help melt your hardened heart.

LESS and SASS: Shortcuts for Creating Great CSS

At the April 2014 IT Forum, John Phillips and I had a great time discussing the differences between LESS and SASS, and how using a CSS preprocessor can decrease your front-end development time. All of the examples used in the demonstration are listed using Codepen is an online playground for developing SASS, LESS, JavaScript and HTML. Feel free to play with the examples to gain a better understanding of SASS and LESS.

Also, here is a link to the PDF version of our presentation to download and review.

Flexbox – True Layout Properties for CSS without a Framework

We have tried everything to tame the elusive HTML layouts. We began with tables, then divs using CSS floats and even changing the display property but nothing was easy without a number of hacks and feats of magic.

Now entering, Flexbox! The flexbox module is a collection of wonderful new CSS properties that?I’ve been excited about since I came across it on more so, when I attended a workshop at the WebVisionEvents conference in May. It is the true layout module in CSS without a framework.

Webkit adds support for high-resolution displays

Webkit just added support for the new?srcset?attribute.?From the Webkit blog:

WebKit now supports the?srcset?attribute on image (img) elements (official specification from the W3C). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don?t. Importantly, it also provides a graceful fallback for browsers that don?t yet support the feature.

Although it will be a while before this is usable across a broad spectrum of browsers, it’s progress in a good direction.