Simple Custom CSS Version 4.0 Released

Standard

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

Background

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

screenshot-1
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!

sccss-v1
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!

Advertisements

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.

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!

Why you need to get into WordPress Unit Testing

Standard

What is Unit Testing?

A non-technical definition of Unit Testing, is “a way to make sure your code won’t break stuff.” In the WordPress world, it means using a provided library of tests to check if your code will return errors. Basically, it’s a program that you put your code files into, and when you run it, you will be notified if there are problems.

It’s important to know that WordPress Unit Testing is typically done with PHPUnit. You’ll see that name thrown around here and there when researching this topic.

Why Automated Testing?

Holy crap, WHY NOT?

In the past, I wasted a lot of time clicking back and forth between posts and settings pages to ensure that my new plugin or theme wouldn’t throw any errors in a WordPress install. Now, you can just type a few commands and your code will be analyzed quickly and thoroughly. Automated Unit Testing lets you quickly check your code in many, many different contexts and scenarios.

Unit Testing has proven invaluable to me in my attempts to write patches for WordPress Core. One time I ran some code I thought would work, and it broke WordPress in 9 other places. Luckily I was able to test it before I submitted it for review, right?

Unit Testing can also reveal unexpected output. Recently, automated testing revealed to me something I didn’t expect to see: when typical date formats were passed into a function, it executed perfectly, but when just one other date format was sent through, it spit out data I hadn’t accounted for. I’m not sure I would have caught that error on my own. It would have required running my code by hand many times and many ways.

Typically, testing looks like this:

  1. Edit code.
  2. Switch to browser.
  3. Input data (e.g., create a new post/comment, ativate a plugin, change admin settings, etc).
  4. Cross fingers.
  5. Check 80,987,096 places for error messages.
  6. Hope you didn’t miss anything.
  7. Repeat 9,464,643,943 times, just to be sure.
  8. Spend the rest of your day answering support questions about errors caused by your last Plugin.

The automated testing process looks more like this:

  1. Edit code.
  2. Switch to terminal.
  3. Start unit testing ($ phpunit).
  4. Make a glass of ice tea.
  5. Wait for Test Results.
  6. ???
  7. Profit.

How to Test your WordPress App, Theme, Plugin, or Patch

Tom McFarlin wrote a great series on this topic, so I won’t waste time and space trying to explain it all over again (and probably in an inferior way). Check his article out on WPTuts+: The Beginner’s Guide to Unit Testing: What Is Unit Testing? Specifically, check out the section titled “Preparing the Environment.” It will help get you started.

Other Resources

Conclusion

Unit testing is very important. It is way faster and way more thorough than you are. It is powerful and will save you a lot of headaches and embarassment when your code goes live. You need to get into Unit Testing.

Your Turn

So, what has been your experience with Unit Testing? What tips do you have for those getting started? Share your thoughts in the comments!

If you’re ready to get to the meat and potatoes, check out the next post, “Tutorial: Writing a Unit Test for WordPress.”