WordCamp Talk: Life-Changing Design and Development


Check out my talk from WordCamp Kansas City on June 28, 2019. I’d love to know what you think!

In this talk, we’ll discuss how our decisions as designers and developers affect people’s lives, as well as practical ways our daily work can actually change the lives of others for good. If we really believe that WordPress is about democratizing publishing — empowering anyone to share their voice with the world — then our work must always reflect that value. This means that our creations must be accessible to those with differing levels of physical abilities, as well as those with differing levels of experience and those who speak other languages. Citing real-life examples, we’ll learn to think differently about building WordPress and look at practical ways to implement this in our daily work.

How to Add Full Width Images in Gutenberg

Theme Preview with a Full-Width Image

Full width images are a sweet new feature that Gutenberg offers to WordPress theme developers. In order to enable these in your theme, it takes just a few lines of code.

Problem #1

By default, the Gutenberg Image Block only has the three classic alignment options: left-aligned, centered, and right-aligned.

Gutenberg Default Image Alignment Options
Gutenberg Default Image Alignment Options

Enabling Wide Images in the Gutenberg Editor

First, a bit of PHP.  Add this to your theme’s functions.php, or wherever else you are adding your add_theme_support() functions.

* Add Theme Support for wide and full-width images.
* Add this to your theme's functions.php, or wherever else
* you are adding your add_theme_support() functions.
* @action after_setup_theme
function jr3_theme_setup() {
add_theme_support( 'align-wide' );
add_action( 'after_setup_theme', 'jr3_theme_setup' );

Now, you can find two new icons on your Image Gutenberg Block, wide-align, and full-width.

Gutenberg Image Block Updated Options

When one of these options is selected, it will display correctly in the editor.  If you select wide-align, the image gets wider, and if you select full-width, the image fills the editor horizontally.

Wide Image Previews in the Gutenberg Editor

Gutenberg Image Block Wide Width in the Editor
A wide image in the Gutenberg Editor
Gutenberg Image Block Full Width in the Editor
A full-width image in the Gutenberg Editor

Problem #2

There’s just one issue: Although WordPress adds special classes to the image markup, this doesn’t affect your actual theme styles.

Gutenberg Image in the Theme, unstyled
An unstyled full-width image in the Theme.

The Solution

To solve this, add your own CSS.  Here’s a snippet I came up with:

.alignwide {
/* Set these margins to work with your own theme. */
margin-left: -80px;
margin-right: -80px;
max-width: 100vw;
.alignfull {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
.alignfull img {
width: 100vw;

A few notes about the CSS:

  • calc() tells the browser to calculate a value (usually) based on the screen size.
  • vw refers to “viewport width,” or screen width.

The Result

After the styles are applied:

Gutenberg Wide Image in the Theme
A wide-aligned image in the theme after adding the CSS.
A full-width image in the theme after adding the CSS.
A full-width image in the theme after adding the CSS.

So, with less than 20 lines of code, you can add this powerful and attractive feature to your themes.

Further Reading

Simple Custom CSS Version 4.0 Released


After nearly 2 years, I’m proud to announce that Simple Custom CSS has received a big upgrade!


I was fortunate enough to work on the first iteration of the WP Customize Code Editor Control and associated “Additional CSS” Customizer section released in WP version 4.7.  It was a huge learning experience, and my first major contribution to WP Core.

I’ve taken the lessons learned during that release to bring you a completely updated version of Simple Custom CSS!

The Customizer

screenshot-2aI’ve updated Simple Custom CSS to now use the Customizer, allowing live previews of your CSS before you save any changes.

I’ve styled the WP_Customize_Code_Editor_Control to give a similiar experience to the Core “Additional CSS” section, meaning that the editor is full width/height so that you have more room to view your code than the default display of the edtor.  And, just like Core, this supports CSSLint.

The Settings Page

The Simple Custom CSS Settings Page
CSS Linting in Simple Custom CSS
CSS Linting

The Settings page now supports CSSLint, which means that it will clearly point out syntax errors.  I’ve also modified the colors there to show more contrast, and to more closely match the core WP CodeMirror styles.

I’ve also updated the packaged CodeMirror to the latest versions.  These hadn’t been updated in nearly 4 years.

The Future

There are a few features I’d like to build out in the future, including support for Sass and LESS.  I have some ideas on how to do this thanks to Weston Ruter’s WP Custom CSS Demo Plugin.

Eventually, I’m going to remove the plugin’s packaged CodeMirror scripts.   WP core now includes the same CodeMirror scripts that have been used in the Simple Custom CSS settings page, but I’ve kept the plugin’s packaged CodeMirror JS just in case you’re running an older version of WP that doesn’t yet have CodeMirror support.

I also want to move the Customizer code to JS.  I’ve seen a lot of others use Simple Custom CSS as a base for their plugins and theme tools (which I think is great!) and I want to keep it in PHP for a while so other developers can better follow how I’ve set it all up.  I hope this will lead to more widespread adoption of the Code Editor Control.

Much further down the road, I want to remove the Settings page altogether.  I’d like to see wider adoption of the Customizer for settings, plus at this point for the plugin it has become redundant to maintain both editors.  When I do that, I’ll be sure to notify everyone in advance, and perhaps just point the “Appearance > Custom CSS” link to the Customizer Section directly.  I’d love your feedback on this.

Thank You!

v1.0 of Simple Custom CSS

I built this plugin out of personal need back in August 2013, and at the time I had no idea how much of a help it would be to others in the WP Community.

It’s thanks to you that Simple Custom CSS has come so far!  Your feedback and support have been so encouraging to me over the years, and I love having a way to give back to the Community that has given me so much.

I hope this update will make the plugin even more useful to you and give you a more powerful editing experience.

Here’s to many more years of Simple Custom CSS!

Simple Custom CSS Turns Three!


This month, 0ur Simple Custom CSS WordPress Plugin turns 3 years old, and it has made the GoDaddy Top 100 Plugins of the week!

As you can imagine, I’m quite proud.  This plugin began a quick four-hour project to solve a development problem I was having.  Now, it’s used in over 300,000 active WP installs.  Wow!

Thanks to everyone who has commented in the support forums, both asking and answering questions.  Also, a huge thanks to those who have contributed by issuing pull requests in our GitHub repo with code improvements and translations.

It’s crazy to think that something I cooked up in my home office is now used by so many people in so many diverse places.

I love being part of the open source WordPress community, where our work benefits people all over the world, and with all of us working together to make the internet a better place to communicate and share ideas.

Featured Image via GoDaddy.

Practical Tips for your WordPress Job Application


I’ve been increasingly involved in hiring at my company, and I’ve learned a lot about the job hunt from being in the seat across the table, so to speak. I’d like to pass my experience and perspective on to you to help you get an interview.

I’ve come up with some tips to help you land a job, specifically in the development field, and even more specifically if your application comes my way. Most of these tips would apply to any job search, and I’ve also included some more information on what development employers are looking for.

These are all things I wish I would have known earlier in my career. I truly hope this helps you put your best foot forward with your prospective employer!

Perception is Everything

Perception is everything. It’s not fair, but it’s a psychological fact: employers get a “feel” about who you are based on your communication. And, for as hard as I try to overcome that bias, it’s just naturally going to happen. “You never get a second chance to make a first impression.”

Rock your Initial Email

Your initial contact email to an employer is critical. You must make a statement as quickly as possible, and this means attaching examples of your best work in that email; don’t just send a written message.

It’s easy for an employer to make assumptions about you based on that initial contact, and you want to give me access to as much information about you as you can provide to help with that first perception.

It goes without saying that you must ensure you’re using good grammar and spelling in your email. This speaks a lot to your professionalism and attention to detail.

Attach a resume, functional code sample, and links to your best work. Having quick access to these items will help me have an objective view of what type of developer you are.

Bonus points for links to WP community contributions, including core patches and your own plugins and themes.

ProTip: don’t use your KurtCocaine@SofaKingCool.com email address to send this.

Your Resume

Make this look sharp!

It’s impressive to have a great design. You can find some great help with this on GraphicRiver.

Include a cover letter with a bit about yourself and your personal philosophy about development and what you are doing to grow.

Avoid overly general and/or convoluted wording about your former responsibilities. It just looks like filler or complete BS to me.

Outline relevant work experience. It’s irrelevant to me if you were a cashier at Wal-Mart, so in my opinion, you can ethically leave that off. These minor facts don’t take points off with me (unless you used to work for Comcast), they just add more data to scan through. I only use relevant development work experience in my own personal resume.

In our field, a solid portfolio of work is much, much more important than degrees or awards. List those, to be sure, but be aware that your actual work experience and quality is much more important.

Code Sample

Attach a code sample in your initial email. Make sure this is functional code that I can install and test, not just a few code snippets. I know how easy it is to pull some fancy looking stuff off of StackOverflow, and you don’t want me to even have that thought in my mind when I’m looking at your work.

Do some advanced stuff in your code sample. For Front End folks, use CSS3 transitions and keyframes. I also like to see Object Oriented Javascript. On the Backend, I like to see WordPress-flavored Ajax, API interaction, and Object Oriented Programming.

Whether Front End or Back End, all of your work should adhere to WP Coding Standards, including details like proper spacing on all code, as well as docblocks.

Online Presence

It’s been my personal mission to find out everything I can about a prospect before writing a response email to either set up an initial interview with the developer or writing the dreaded (but kindly worded) rejection email.

Even more than what you say about yourself, I want to find out who you really are. Having a positive, teachable team player is even more important to me than dealing with a snobby but talented code-jockey.

I’ll be all over the internet to find out everything I can about you. I think I’m reasonable enough to know that all of your online interaction isn’t going to be “professional” or development-related, but I will be looking for insight into your personality.

Google Yourself

30 Rock Google YourselfWhen researching a prospect, the first place I go is Google — sometimes before even digging deeply into their code. Your online activity says a lot about your personality, and to me, who you are is more important than your skillset.

Take some time and check out what Google has to say about you. I’m not saying you should try to have Google wipe undesirable facts about you, but if you have an old personal site that would look bad to a potential employer, you might want to take it down, edit your SEO settings in your robots.txt, require authentication to view the site, or even use Google Webmasters to block certain pages of the site from being crawled.

ProTip: I usually start with a search on “John Smith Developer,” or “John Smith Kansas City.”

Focus on beefing up the sites that are the top results for your name. This means things like your personal site, WP profile, LinkedIn account, etc.

By the way, I understand if I find an ancient Blogger site that was barely used at all. Don’t sweat it; I have those myself.

Social Media

The next thing I do is stalk you on social media to gauge your personality and interests. You don’t have to post a lot about development, I just want to get a feel for you.

Start by maintaining a social media presence. If you don’t have one, it looks like you live under a rock, and that’s not going to work in a media-driven field.

Remember that prospective employers will read everything you post. You don’t always have to be dressed in a suit in your pictures, but be mindful that your overall personality will be revealed by your tweets and posts.

Facebook is a common place I search. I like being able to read about your daily life. If you have questionable activities you don’t want me to see, change your privacy settings; if there’s a bong on the table in the background of a pic, I’m going see that. 😉

ProTip: Don’t let me find your Reddit username. We both know you don’t want me to see that.

Your Personal Site

Keep your site up to date. It doesn’t matter if it’s about your passion for N-scale model railroading. I just want to get to know you.

Remember that perception is everything to get that first interview. The design of your blog is a reflection of your work and attention to quality, even if you didn’t build it yourself. You get major bonus points if you did build it yourself. It doesn’t have to be fancy, but the code needs to be tight.

You don’t have to update your blog regularly; we all understand how hard it is to maintain a personal blog. However, if your posts are focused on your development, include some stuff about your passion for the work. Post helpful code snippets and your opinion about development tools and issues.

Also, it looks really good to host examples of your work, even if they’re not linked from the main blog. Full demo sites are great. They give you the power to make your own decisions about sweet design and technical features that you may not have on sites built for clients and picky designers.

If you’re not a designer, go and download a PSD or HTML template then build it out yourself. There’s no shame in that at all. Ultimately, I care more about your code than visual appeal, but once again, keep in mind that initial perceptions are important.


I love to see activity on your GitHub and/or Bitbucket accounts. This shows me that you’re developing your own personal projects, and that’s a big plus. These serve as code samples that you haven’t polished up before submission to an employer, so they reveal how you typically work.

Smarterer Score

There is debate about the reliability of a Smarterer score in relation to actual development skills, but it helps people like me get a feel for your knowledge of WordPress. Take the quiz on CodePoet and work to get your score over 700. I’ve known some incredible PHP/JS developers who I’ve been unable to hire simply because they don’t know the WP system. This score will give us both a quick glance at your proficiency.

Final Thoughts

Your work and online persona are an opportunity for you to shine before a prospective employer. I’ve included this “insider” information to help you make a great impression when you first reach out for a new position.

These are all things I wish I’d known several years ago, and I hope they will help you make a powerful first impression to those considering you as a new member of their team.

By the way, if you’re interested in working with me and my teammates on big projects with lots of fun challenges and opportunities to grow, hit us up at xwp.co. I’d love the chance for us to get to know each other!