Simple Custom CSS Turns Three!

Standard

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

Standard

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.

Github/Bitbucket

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!

Please Change Your Genesis Favicon

Standard

I love the Genesis framework* for WordPress. It is an amazing tool for speeding up the development process, and I even use it on my personal site.

Its wide acceptance across the WordPress world is unfortunately highlighted by the proliferation of Genesis favicons on these sites.

The Genesis Favicon is a black square or circle with a white capital “G” in it. It is a dead giveaway that you’re running your site on Genesis.

If you’re developing custom sites for your clients, you probably don’t want that visible. Your client would probably prefer to have their own branding in their favicon.

The fix for this is pretty simple, thanks to the hooks that Genesis offers.

What is a Favicon?

A favicon is that little square icon that appears in your browser window (or tab). It’s actually not a typical image, but an .ico file type.

The black circle in this browser tab is an example of a Genesis favicon.

The black circle in this browser tab is an example of a Genesis favicon.

To create your own favicon, create a square logo image with your brand of any size larger than 16x16px (you can even use transparent .pngs). Then, go to a site like favicon-generator.org and convert it to an .ico.

Including Your Custom Favicon in a Genesis Child Theme

Typically, this file is named “favicon.ico,” but you can call it whatever you want. The name “favicon.ico” is used in my code sample, so you may have to adjust that as needed.

Add your favicon to your Genesis Child theme’s directory, and add the following code to your child theme’s functions.php.

Note: Browsers are pretty stingy about caching these favicons. This means that you’ll need to open your site in a private/incognito window to see the changes take effect. New visitors to your site won’t need to do this.

*Not an affiliate link

New WordPress Plugin: Send System Info

Standard

When providing support for WordPress do you waste time going back and forth with the client asking for information about their website? Information like versions of WordPress, PHP and MySQL, as well as configuration of each can be invaluable to diagnosing a problem quickly and accurately.

After some work with the team on the Stream Plugin, I realized the need for users to easily gather information about their site’s configuration. This idea gave birth to the Send System Info Plugin for WordPress.

This plugin not only displays the site information, it allows the user to send this data to you in three forms:

  1. A downloadable plain text document, handy for archiving for later comparison
    SSI-Top
  2. An email generated within the plugin
    SSI-Email
  3. A URL that allows secure remote viewing of this data
    SSI-Remote-Viewing

My favorite feature of this plugin is the remote viewing URL, which points to a plain text page of the site information. The cool thing is that this URL can be regenerated, wiping out access to those who have the previous URL.

This is especially handy for posting site information in support forums, where you have no contact email address with those providing support, like the WordPress.org Support Forums. This link can be posted to the forums, and when you are done getting the support you need, simply regenerate the URL and later visitors to the forum will have no access to your information. This is a much more secure method of getting help than simply writing your server information into the forum.

I’ve had some great help from Frankie Jarrett and Luke Carbis and Pippin Williamson on Send System Info. You can help out, too! I have a GitHub repo available at https://github.com/johnregan3/send-system-info, and contributions are always welcome. I want this plugin to be as useful as possible for the WordPress community.

I invite you to download Send System Info and give it a test run. I think you’ll be surprised at how much information is available, as well as it’s simplicity and how easy it is to use. Give it a shot!

The First Step To Coding Like A Pro: Formatting

Standard

At its core, good formatting is more than putting a spit shine on your plugin or theme. Its something that is done from the moment you crack open that first blank text document and begin writing. Formatting is the practice of careful, conscious coding.

I interviewed for an awesome job last week. They were interested in me and wanted to see a code sample of my work. I didn’t have much that was ready for review (because I’ve been working in Front End Development for the last year), so I wrote a Plugin from scratch. I went 96 hours with only a couple of naps, working my hardest to crank out coding perfection. I threw in everything that I could think of: AJAX, OOP, Validation/Sanitization, Actions & Filters, the Settings API, even localization. When I was done, I proudly submitted it for review.

What was the reviewer’s response back to me? “Your code is sloppy.” In fact three-fourths of his comments related to tabs and spacing.

Why did he care so much about such small details? Once I took the time to think about it, the answer became obvious.

Why Formatting Matters

1. It makes your code better.

If your code is written to the correct standard, it has been written and reviewed with attention to detail. It takes several passes to get any file up to standard, and in the course of formatting, you’d be surprised how many bugs you can find. Reviewing your code means refining your code. To put it another way, I can’t imagine you’ll ever see beautiful code that throws lots of errors or breaks things.

Furthermore, organizing functions in a logical way helps you see new ways to write your program. It can show you places where you are repeating yourself, revealing good sections to turn into classes/methods. Don’t forget the DRY principle of programming: Don’t Repeat Yourself.

Good formatting includes commenting your code. It makes your work easy to navigate, allowing others to troubleshoot errors, as well as reminding you of whatever the heck you were doing during the late night coding binge when you wrote it. Well documented code is much easier to extend as well.

2. It makes you look better.

It requires a lot of discipline to write clean code, and it is quickly assumed that the author of organized, well-planned code is a person with an eye for detail. Adherence to coding standards demonstrates that you are well-versed in the language/platform you’re working with. Most of all, it shows that you care; if you’re going to put in the time to do excellent work, chances are you’ll do excellent work for a client or employer.

Principles of WordPress Formatting

So, what goes into good formatting? If we need to adhere to the standards, what are they?

First of all, go take a look at the WordPress Coding Standards Doc. There are four sections, one for PHP, HTML, CSS, and JavaScript. Take the time to review each document. Here are some highlights from the docs:

PHP Highlights

  • Indent your code, and use Tabs instead of Spaces
  • Include commas after the last items in arrays
  • No shorthand PHP tags
  • Read up on the section “Space Usage
  • Commenting/Documenting code. There’s a lot here about the PHPdoc format of commenting, the industry standard.

HTML in a Nutshell

CSS Notes

  • Each Selector should be on its own line
  • Use lowercase, hyphenated selectors (not camelCase or underscored)
  • Always end in semicolons (C’mon, folks, is it necessary to say this?)
  • Order Properties alphabetically

JavaScript Formatting

  • “Always put spaces on both sides of the opening and closing parenthesis of if, else if, for, forin, do, while, and switch blocks.”
  • Name functions and variables using camelCase, not underscores.
  • Use the var keyword as much as possible to keep variables out of the global scope
  • Never end an Object with a comma
  • jQuery and that pesky $

Best Practices

Some of these rules will be natural for you based on your background, but for those which aren’t, keep a list of important formatting points handy. Practice these standards in everything you write, no matter how seemingly insignificant, and they’ll become part of your personal style of coding.

Unless you’re still using NotePad, your IDE (text editor) should have some good tools to help you format your code correctly. Turn on syntax highlighting based on the language you’re using, and set your preferences to eliminate trailing spaces on save.

One of the best ways to clean up your code is to have it reviewed by others. Find some other WordPress geeks and review each other’s code. Be teachable. The process will be humbling, but it will grow you as a developer.

Conclusion

In the end, I got the job! When all was said and done, the reviewer was able to see past my amateur-ish-ness and see potential in my work. Good leaders acknowledge that this is a learning process for us all (In fact, in writing this post I’ve noticed a few things I need to go back and fix in my own code).

So what questions do you have about WordPress formatting? Do you have a horror story about ugly code? Leave a note in the comments!

What is a WordPress Theme?

Standard

A WordPress Theme is like a skin for your website. Themes control the look and feel of your site’s front-end. A Theme establishes the layout, colors and positions for all the elements of a page.

Themes don’t include the content of your site, like posts or widgets or menus. They simply tell the content where to go and what to look like on the page.

You can get a ton of free Themes at WordPress.org, or check out some incredible premium themes at places like WonderThemes or ThemeForest.