Rebuilding the Feature 5 Grid to Create More Than a Comeback

WebDevStudios recently completed a challenging, yet very satisfying, WordPress project for The Comeback, a popular sports fan website. Among many duties, our team was tasked with rebuilding the Feature 5 grid functionality and extending it to support multiple grids, archive pages, and update styling. These changes involved creating a new “grid” CPT with the category taxonomy, refactoring the existing functionality into a plugin, and cleaning up how grids are created.

If you’re unfamiliar with the Feature 5 Grid, it is a grid at the top of a page the features or highlights five popular posts from various categories. It provides the editorial staff with the ability to curate these five stories to create a personalized experience for each site and page in the network.

cameron campbell

Cameron Campbell

Our main developers on this successful project were Cameron Campbell, Senior Frontend Developer/Designer, and Matt McAchran, Senior Backend Developer. Here’s their account of the obstacles they faced, the solutions they provided, and how they enhanced the overall experience of The Comeback.

 

 

Matt McAchran

 

“The old functionality was built directly into the theme; and since the grid was stored as an option, only one could exist at a time. The first step was to move the existing functionality into a plugin and refactor the code to store different grid attributes (posts, show on homepage, mobile settings) as postmeta. This enables multiple grids to be created in a scalable way.

 

 

The cross network searching for posts is powered by ElasticSearch and hits the global network alias, which points to all indices on the network. We only needed to store three pieces of information for each grid item (the location in the grid, ID of the post, and the ID for the blog the post belongs to).

The grid template was refactored to use a single template to allow for easy restyling and grids are cached on the front-end for performance.

The Comeback team wanted to also address the visuals of the Feature 5 grid. Some of the key goals were to provide a more visually complex/appealing experience for users in order to capture their attention and funnel them deeper into the site.

On the plugin side (in the Admin area), the grid needed to mimic the front end view as opposed to selecting posts from a meta box and only seeing the name of the post. This would allow their team to get a sense for the aesthetic of the grid and how images would work together. It also provided them with a way to quickly see if images needed to be edited in order to provide the aesthetic they were looking for. So we implemented the front end styles in an admin stylesheet and tweaked some of the proportions in order to account for any WordPress elements such as sidebars.

Some of other improvements we made to the front end of the grid were to bake in a more accessible experience, allowing the grid items to be tabbed through via screen reader for a better overall experience.”

You dream it. We build it. Let’s work together. Check out our portfolio, and when you’re ready to let WebDevStudios turn your big ideas into a big website, contact us.

Evolution of CSS: Becoming a CSS Composer

I have been coding CSS almost daily for over 10 years. I don’t say that to try and establish supremacy, but merely to give some context to the subsequent observations. There are quite a few days I still feel more like a CSS poser.

Keeping with the Non-Traditional Traditions

I received my degree from a private liberal arts college, but only after a large and intentional vacation from formal education after high school. The college had a non-traditional, experimental program that was typically advertised toward “returning adults,” and this is where I chose to finally continue my formal education. It allowed me to not necessarily have a major, but a “focus” in communications, and specifically, an “interdisciplinary program with courses in multimedia theory and design.” So I was able to dabble a little in graphic design, 3D animation, music theory, and multimedia computer programming. This is where I was introduced to HTML, CSS, and Flash.

(Note: I did not take any computer science classes, which would have probably pointed me in a different trajectory career-wise. Instead, I was more fascinated with the visual, as opposed to the computational disciplines.)

It can be easy (although probably no easier than any other excuse) to have Imposter Syndrome when your formal education is founded on a multi-disciplinary degree, i.e. Jack of all trades, master of none. However, as some have pointed out…

“Learning isn’t a zero-sum activity.”

The Myth of the Myth of the Unicorn Designer” by Thomas Cole

Code Is Poetry

My first few jobs heavily involved HTML, CSS, and Flash, of course, as well as dabbling in many other languages and systems. However, I quickly gravitated toward WordPress when I was tasked to research alternative content management systems (CMS) for a state college. I started to become familiar with all the concepts that made up a good and bad CMS and was able to research where each private and open source solution lie on the feature vs cost spectrum. I became passionate about the idea of open source software, and WordPress was, and still is, at the forefront.

Code is poetry.

Today, the WordPress tagline “code is poetry” has become a mantra in my everyday work. So much of what we, as Front-End Developers, write relies on syntax, logic, and structure. Also, good code (as there is plenty of bad code and poetry) requires elegance and simplicity. The meaning with code and poetry can be both on the surface and simultaneously abstract.

Enough About ME!

So why am I giving you my entire bio? Because again, I think it is important to providing context to why I’m fascinated and passionate about composing CSS. In the upcoming posts, I’ll cover some key points along the history of CSS to try and demonstrate where I see CSS evolving. Remember, writing code is a multi-disciplinary venture, and one should never stop learning.

Stay tuned for the next post in this series:

  • Evolution of CSS – Part II: CSS Class Naming Conventions
  • Evolution of CSS – Part III: Overview of Tachyons

How to Migrate a Widget to a Custom Post Type

WordPress tutorials, WordPress how-to, WordPress education, learn WordPress, Zerif Lite theme, #WPdrama, WordPress drama, Zerif LIte banned, WordPress banned Zerif Lite, ThemeIsle banned Zerif Lite, migrate a widget to a custom post type, how to work with custom post types

Recently, one of my favorite themes, Zerif Lite, was suspended from the WordPress repo. As I was reading about the issues involved, it got me thinking: Just how hard is it to migrate a widget to a Custom Post Type? According to ThemeIsle, this was one of the factors which led to their decision, arguing that “changing this in an existing theme means that whoever’s currently using it will get their site messed up.” Let me be clear: I refuse to take sides here, as there are valid points from both parties, so let’s leave the drama somewhere else. For now, let’s move forward and do something productive. Let’s migrate those old widgets.
Continue Reading

Level Up With jQuery Dimensions

It’s hard to believe that I’m well into my second year of being a front-end dev here at WDS. It has been an awesome experience and I’m truly blessed to work with such a great group of people. Halfway through 2015, I officially caught the bug known as Javascript and I started really trying to learn the language. This inevitably also meant expanding my knowledge of jQuery.

As a quick aside, you might be asking, “jQuery in 2016? Really?” My answer to this is HECK yes. According to BuiltWith, 80% of the top 1 million websites use jQuery.

Learning Javascript is more of a marathon than a sprint.

It’s becoming more and more clear along the way there are concepts and techniques that will really go far in leveling my skill-set as a front-end developer. Two of these concepts are dimensions and offsets. For me, it’s not so much about implementing the code for these concepts but having an in-depth knowledge of their meaning.

It wasn’t until recently that I started experimenting with the real power of each concept. Use them in conjunction and you can do some pretty crazy DOM manipulation!

For this post, we will focus on dimensions and follow up with another post on offsets.

Continue Reading

My Local: Getting Started with Laravel Homestead

Getting Started with Laravel Homestead

Developers have their own way of working, and I’m no exception. With a half a dozen apps running at any given time to make my code structure, workflow, and deployments as smooth as possible, I depend on simple easy-to-use tools to get things done. However, the one thing that is constantly changing is the local work environment. This is all based on preference, personal tastes, and your job. I build websites on WordPress with Laravel Homestead.

My local development environment for this is Laravel Homestead. Homestead is free and runs in VirtualBox (or VMware), on Vagrant and includes, Ubuntu 16.04, Git, PHP 7.0, HHVM, Nginx, MySQL, MariaDB, Sqlite3, Postgres, Composer, Node (With PM2, Bower, Grunt, and Gulp), Redis, Memcached and Beanstalkd.

Continue Reading

The Six Questions Developers Need to Ask Before Turning in Tasks

Developers, ask yourself these six questions before turning in any task

Everyday I spend time working on products for our great clients, I specifically spend a great deal of it writing code and building features. But I’m not just creating new features, I’m also creating new opportunities…opportunities to break that product. Here are the questions developers need to ask before turning in their tasks, and how they’re going to help you code smarter.

Continue Reading

Winning With Code Reviews

code r

Here at WebDevStudios we put a lot of emphasis on code quality. After handing off a product to a client, we never know who may be looking at and/or maintaining our code. We want to be proud and confident that the next person will not have an OMGWTFBBQ-head-smashing-into-keyboard moment, but one of delightful surprise.

How do we consistently create and maintain a high level of quality code? Through peer code reviews.

Continue Reading

Why You Should Learn Another Programming Language

why you should learn another programming language, WordPress, why you should learn JavaScript, why you should learn Python, why you should learn PHP, why you should learn Ruby, programming languages, programming, coding, learning to code, professional coder, professional programmer
If you’re a developer in the world of WordPress, you typically know one programming language: PHP. You may have some familiarity with Javascript, but PHP is likely where you feel most comfortable. That doesn’t mean comfortable is where you should stay, though. Let’s talk about why you might want to start learning another programming language, even if you’re not going to use it on a day-to-day basis for your job.

Let’s start at the beginning: How did you learn PHP? One of the greatest aspects of the modern web development world, especially for WordPress, is that there are so many different ways that you can gain entry. You may have taken a programming course in high school or college. You may have attended a local Meetup or WordCamp where you could learn from others who have knowledge that you didn’t have. Or you may have taken online courses to learn or sharpen your skills. Regardless of your background, you probably know PHP well (or well enough), but you also know that there are plenty of areas of the language that you don’t know well.

Why would you want to learn another language, when you may already feel like you could still stand to learn more about PHP? Well, there are plenty of great reasons, but I’m going to cover just a few:

Continue Reading