University Marketing & Communications » Web Teamhttp://www.washington.edu/marketing/web/
University of WashingtonTue, 03 Mar 2015 20:55:09 +0000en-UShourly1http://wordpress.org/?v=4.1.1UW 2014 child theming updateshttp://www.washington.edu/marketing/web/uw-2014-child-theming-updates/
http://www.washington.edu/marketing/web/uw-2014-child-theming-updates/#commentsWed, 17 Dec 2014 01:07:16 +0000http://www.washington.edu/marketing/?post_type=web_team&p=7115This past month I presented at the November 2014 Web Council on how we’ve taken child theming to a new place. Here is some official documentation to accompany and expand upon that presentation.

First things first: the old way of initializing a $UW object with your chosen functionality (detailed here) still works. What’s different is we have introduced a couple variables in the template for the $UW object ($child and $parent) to streamline the amalgamation of your $UW object from your child theme and our parent theme. Below is a sample from one of our child themes created in this fashion, the UW Social theme:

You’ll notice that in child themes, the $parent has a case where we explicitly define it to be the directory of uw-2014 if $parent and $child are the same. Without this logic, we ran into the dreaded WordPress White Screen of Death. Naturally we investigated and came up with this fix, and that investigation yielded some useful information that brought us to the wonderful state we are at right now.

Here’s what’s going on: The theme, on first initialization, doesn’t know what its parent theme is until the style.css is loaded. PHP code in functions.php executes before style.css is loaded. We defined $parent as the location of the setup directory in the template directory. This will be your theme for new themes or uw-2013 for old child themes, at least until the entire stack is loaded for the first time and the identity of the parent theme is stored in the database. This is the WordPress theme execution stack:

This order of operations unveiled to me not only what was happening with the issue we were having, but the central problem that we had delivering on the promise of editing the $UW object in the child themes. The $UW object is initialized in the parent theme, which only executes after the child theme has initialized. This means that $UW is always undefined in the child theme.

As an added wrinkle, if you are to add a $UW object to the child theme, that $UW is also out of scope in the parent theme. This means that although you can make a $UW object like our object using pieces of our object, our parent $UW object will still get built. Unlike functions, variables don’t make the journey from one theme to another. Why? I’m not really sure. Because they don’t, our !isset($UW) logic was found to not work as expected. We solved this by executing a function and defining/instantiating the $UW object inside of it. Now we can lean on the established convention of !function_exists logic to override our parent object with your child theme object:

Now this gets us to the point where a developer could simply create their own function named setup_uw_object and our theme will call their function instead of ours, leading to a $UW (or whatever they might want to call it) object that incorporates anything from our theme that the child theme’s developers choose to include. Some of our partners are already doing this, like Ben Erickson in Alumni Affairs. We’re doing it too with some of our themes. Here is the requisite child theme logic in the aforementioned Social theme:

Look how little code that requires to execute. You may notice that while we are still calling the instantiated object $UW while we are instantiating a class with a different (more specific to the theme) class. I prefer the convention where the $UW object is the $UW object, regardless of whatever class is instantiated to make it. That’s purely a stylistic choice. The different class name, on the other hand, is a convention I strongly recommend following. While the UW_Social class serves the same purpose as the UW class (hence the same $UW variable name in each usage), they are different classes with different attributes and should not share a class name. You might also be interested to know that we, in general, don’t extend the UW class to create child theme classes. The reason for this is that this UW class is a very simple class that merely serves as an organized wrapper for other instantiated classes. There’s not really any efficiency to be gained by extending the UW class, except that you should be able to omit the __construct() function from your class. Altering what happens in the UW::includes() and UW::initialize() functions would require completely overwriting those functions anyway. The only case where it would make sense effort-wise is if you are accepting everything our UW class brings to the table unaltered and merely adding more classes and objects to the UW::includes() and UW::initialize() functions. Then you could call parent::function_name() in each function and add your own stuff, but at that point you could just let our theme make the $UW object while you make a companion class and object instead.

Now that we have that all amended and clarified, let’s get to the new and exciting stuff: stateful access to the $UW object in child themes. In my research into the WordPress core loading process, I rediscovered the idea of adding custom actions to the theme. We’ve been doing that within our theme for a while now, most notably to help out with pretending to serve WordPress from root on the www1-4 servers. While looking into custom actions, I discovered that it’s possible to pass parameters to the action handler. Like any other action, custom actions will cause their handler to run regardless of where they are added and whatever variables passed to the handlers will be available. So, in order to grant child themes access to the $UW object and its attributes in a way that would allow the child theme to change its attributes and not load things we want removed from the parent object, we had to do a new action upon initialization of the $UW object in the parent theme, then pass that already initialized object into the action handlers. The $UW object that is passed to the child theme (or anything that does an add_action(‘uw_object_initialized’, function); where the function accepts an argument) is a reference to the initialized object in the parent theme. This means that any changes you make to the $UW object in that function actually change the $UW object in the parent theme. That logic in our parent theme looks like this:

and utilizing it in a child theme looks like this:

Doing something such as adding an image size is now as simple as adding a new member to an array in an instantiated class, allowing the class and hooks therein to take care of all the work for you:

This is the realization of the dream I had when I first started organizing the code in our theme in the object-oriented style. Giving child themes stateful access to functionality introduced in the parent theme offers a lot of flexibility in child theming and reduces the amount of code necessary to make an effective child theme. The end result is pretty cool code that satisfies my desire for both organization and flexibility. After scouring the internet and chatting with the Seattle WordPress community, I can confidently say that this is a whole new take on WordPress, one that I think is really well-suited for the university. I hope you all enjoy using it. We certainly have.

]]>http://www.washington.edu/marketing/web/uw-2014-child-theming-updates/feed/0Friday link roundup – November 14http://www.washington.edu/marketing/web/friday-link-roundup-november-14/
http://www.washington.edu/marketing/web/friday-link-roundup-november-14/#commentsFri, 14 Nov 2014 17:03:25 +0000http://www.washington.edu/marketing/?post_type=web_team&p=7128Happy chilly Friday, and welcome to our now bi-monthly Friday roundup. This time around, we’ve uncovered at a free icon set, a guide to mobile UX diagnostics, and some amazing and free classes from MIT.

Wayne

Every Web designer knows the value of good iconography and the time it can take to design a good-looking and functional icon. Check out the Boldons Icon Set. The icons are cute, well-designed and free!

Leah

Since more than half of online traffic now comes from mobile, poor mobile experiences can be critical. Use this guide to mobile UX diagnostic to quickly uncover mobile usability problems with your website.

Jon

For all you self learners out there, I’ve found an absolute treasure trove. MIT’s OpenCourseWare is the bee’s knees. I’m about a month into a master’s-level algorithms course and I am learning a lot.

Pam

My favorite classes as an English lit undergrad were the most challenging ones, namely critical theory. My favorite philosophers to study was a pair named Deleuze and Guattari who explored (among other things) the concept of the rhizome as a structure that is not hierarchical in nature but grows outward horizontally. This concept has been used for many things, but most interesting is its description of technology. Just look at the mesh network as the perfect rhizome, as outlined in Making Internet Local.

Mindy

The folks at University of Minnesota have an amazing content strategy self-help guide available to the public. It’s it chock full of resources for anyone working on a Web content project to use, and it’s also the only time I’ve seen the accordion technique for hiding content used effectively.

]]>http://www.washington.edu/marketing/web/friday-link-roundup-november-14/feed/0Friday link round up – October 31http://www.washington.edu/marketing/web/friday-link-round-up-october-31/
http://www.washington.edu/marketing/web/friday-link-round-up-october-31/#commentsFri, 31 Oct 2014 17:56:54 +0000http://www.washington.edu/marketing/?post_type=web_team&p=7122Happy Friday and Halloween everyone! This week, we’ve rounded up all about how The Guardian designed their new website, why open source is the only way to develop these days, okays some nifty mobile animations.

Wayne

Good work-life balance is a crucial skill that thankfully, the UW encourages throughout its work culture and programs like The Whole U. Some of our peers are not so lucky as you can read in this article. If you or someone you know is struggling with mental overload related to work, Geek Mental Health Week is an online resource being built for Web professionals that might be helpful.

Pam

As I learned from Erin Kissane’s Source writeup, The Guardian has released a new version of its website, notably so for its development in a public GitHub repo and public beta release. The most interesting aspect of the redesign for me is the approach to content, namely that of a “container model” that addresses curation and presentation. Completely modular in design, The Guardian is able to maintain a consistent hierarchy across mediums (desktops, tablets and mobile) that also helps facilitate an experience of content discovery. I’m very excited to see where The Guardian goes with this – keep up with project updates on their blog!

Jon

Open source code is really the only way to develop nowadays. As Matt Asay on ReadWrite.com points out, even traditionally closed source companies like Adobe, Apple and Oracle have open source products because the talent (aka developers) demand it.

Kilian

Nothing too crazy here, but if you’re tired of the same old slide-out drawers on mobile and you need some inspiration, check out these mobile animations.

Wayne

Jon

If you’re a nerd (you are if you’re reading this, let’s all just be honest with ourselves) and you like football, you’ll love Football Outsiders advanced statistics. If baseball is more your jam, check out Fangraphs. These resources have deepened my appreciation and understanding of the games I love, all the while scratching my nerdy itch for hard facts and reaffirming my belief that there’s nothing that humans can’t eventually understand.

Pam

I’ve known about Lumosity for sometime — and even gone so far as to download the app. But I could never get past the onboarding process for some reason. It’s interesting to hear now that Lumosity’s claims for “brain training” could be following the same path as the “Mozart effect” for babies, but it’s too soon to tell. It’s an interesting read, especially when you note the tension between technology and academia — the former moves too fast, while the latter is too slow.

Mindy

Is Siri more than a personal search assistant? The author of how one boy with autism became BFF with Apple’s Siri probes that very question. It’s an especially fascinating piece because the author also happens to be the mother the autistic boy who has bonded with Siri.

Wayne

Leah

Here is a software that makes user testing a lot easier. Screencastify is a free Chrome app that records all screen activity and audio, capturing your participant’s interaction with the website and their vocal feedback. I’ve used this app for user testings for the new UW homepage and other sites, and it has worked great. I also took advantage of its webcam recording for user testing on mobile – I simply asked the participants to turn the laptop around and give it a good hug.

Jon

The internet is pretty wonderful, but open Wi-Fi networks are some of the most dangerous places to access it. Why public Wi-Fi is a hazard shows just how dangerous it can be to access the Web in your average coffee shop. The authors of the article brought a hacker with a little black box right out of the NSA Playset and watched him unravel the life story of everyone in the room. Personally, I’ll be sticking to hidden networks and ethernet until I come across a countermeasure.

Pam

This link isn’t technologically related, but it struck me as a thoughtful way to address homelessness in Barcelona. Hidden City Tours employs some of Barcelona’s most marginalized citizens to give tours – not as a charity – but as a social enterprise.

Mindy

If you’re a regular reader of our roundups, you might have noticed a theme for me: I’m a sucker for interactive concepts or games that involve learning. So for this week, I want to point you to the Kickstarter for Arcadia, a beautiful looking game that “lets you select a subject you want to know more about” and then “tracks and rewards your progress.”

MyUW for students redesign

The student-facing redesign of MyUW launched just before the start of fall quarter. Charlon Palacay, William Washington and Karin Roberts from Academic & Collaborative Applications (ACA) will give us a live tour of the new system, which offers an improved academic and time management experience.

Department blogging strategies

Thinking about starting a department blog? Already have a blog but need strategies for growing and nurturing it? Lisa Gettings from the Information School will share her secrets to success when it comes to wrangling blog content from your team of department experts: students, faculty, alumni and staff.

Cyber security

Did you know October is Cyber Security Awareness Month? Melissa Albin from the Office of the Chief Information Security Officer will share tips on computing security.

Mobile Minute

A monthly snapshot from the mobile world.

]]>http://www.washington.edu/marketing/web/october-2014-web-council/feed/0Friday link roundup – October 10http://www.washington.edu/marketing/web/friday-link-roundup-october-10/
http://www.washington.edu/marketing/web/friday-link-roundup-october-10/#commentsFri, 10 Oct 2014 16:37:39 +0000http://www.washington.edu/marketing/?post_type=web_team&p=7070Happy Friday, everyone! Even prepping for the big homepage launch can’t keep us from rounding up our favorite links. This week, we’re exploring low-fidelity prototyping, learning about “written” letters from robots, and playing a game that teaches programming concepts.

Pam

When you’re building a new CMS, Eileen Webb strongly suggests building content guidelines into the CMS itself. It’s almost a no-brainer, but hardly anyone seems to be doing it. Her reasons (with compelling examples, help text and special considerations) could convince just about anyone.

Jon

Since people are a lot more likely to open a letter that’s handwritten, savvy marketers have invested in handwriting robots. If you want to learn the difference between a real handwritten message and a message written by a robot, check out this article which details the flaws in human handwriting that robots can’t yet mimic.

Mindy

This week, I’m sharing a link that’s closer to home. iSchool Ph.D student Mike Lee made a game designed to teach computer programming to kids and teens through debugging puzzles. He calls it Gidget, and it’s an excellent 21st Century approach to programming literacy.

]]>http://www.washington.edu/marketing/web/friday-link-roundup-october-10/feed/0Friday link roundup – October 3http://www.washington.edu/marketing/web/friday-link-roundup-october-3/
http://www.washington.edu/marketing/web/friday-link-roundup-october-3/#commentsFri, 03 Oct 2014 17:11:43 +0000http://www.washington.edu/marketing/?post_type=web_team&p=7017We’re wrapping up this week with another edition of awesome links. Check out LinkedIn’s new university rankings, creative Web transitions, a technique to master programming languages, and more.

Jon

One of the things that doesn’t get much attention in the iOS 8 release is the incredible advances in HTML5 support and performance. As this Read/Write article explains, Apple developers never relied as heavily on native code as you might have thought. And now that the performance hit for Web apps compared to native apps has been reduced, we might start to see Steve Jobs’ original vision for mobile come true.

Leah

Using full-screen images has become an increasingly popular Web trend. Codrops came up with some creative article intro effects that embody interesting transitions from full-screen images to body text.

]]>http://www.washington.edu/marketing/web/friday-link-roundup-october-3/feed/0Friday link roundup – September 26http://www.washington.edu/marketing/web/friday-link-roundup-september-26/
http://www.washington.edu/marketing/web/friday-link-roundup-september-26/#commentsFri, 26 Sep 2014 20:26:24 +0000http://www.washington.edu/marketing/?post_type=web_team&p=6996Happy first Friday of the academic year! This week, we’ve rounded up some parallels on Web and culinary worlds, how to gorilla test mobile designs, and why breadcrumbs are awesome.

Pam

Most people wouldn’t venture to guess at the number commonalities between the Web and culinary worlds, As a lover of both, I was surprised at how many parallels there are thanks to yet another stellar A List Apart article: The Culinary Model of Web Design.

Wayne

Kilian

It took me a couple reads to figure out was going on, but this SVGPNG masking technique is great. Normally, if you require a photo that has a transparent background, you need to save it as a PNG. And that means you’re looking at huge a file size. The PNG masking technique allows for a JPEG to be used, but then uses a small two-color PNG to mask it (much like an alpha channel in Photoshop).

Mindy

During the two years I’ve been on the Web Team, we’ve gone back and forth on whether to use breadcrumbs or not in our theme. This article on how breadcrumbs are good for user experience sums up my feelings: They’re awesome!

It may be the start of a new academic year, but this is one Web Council not to miss!Katherine B. Turner

When: Thursday, September 25, 9-10:30 a.m.Where: Odegaard 220Who: UW employees who work with the Web, whether developers or content creators

Brand update

What’s the latest on the UW brand refresh for the Web? Join us to hear the current timeline, see the new Brand Resources site, learn the Web Team’s plan for releasing an updated WordPress theme, plus get a sneak peek at the new and bold uw.edu homepage. (Hey, not to worry! The homepage was posted on Sept. 19, so we made our deadline, but it just won’t go public for several weeks. Details to come!)

Google & SSL

To encrypt or not to encrypt, that is the question! Everyone is wondering if they need to switch to https connections, given Google’s recent and rare announcement to say it is using site encryption as a “light” ranking signal. Does this mean we all need to adopt https? Don DeVange, principal at DSquared-Media, says switching from http: to https: requires important considerations. He will share some insights.

PDF accessibility

Terrill Thompson will give us an overview of why PDF accessibility is important, plus recruit volunteers to help test a PDF remediation tool the UW is considering purchasing.

Mobile Minute

A monthly snapshot from the mobile world.

Amazon Web Services case study

Dane Odekirk will give a basic overview of how the Web Team is using Amazon Web Services. He’ll share advice and use cases for managing a server with EC2, running a database with RDS and storing your data with S3.