Do you think that the custom CSS editor in the WordPress customizer is a hassle? Do you want to just add some CSS or JavaScript to your website without having to use a slow FTP-client? Or do you want to be able to work together with other people when making design changes to a website?
Everyone knows that working with scripts, CSS and Javascript can really be a pain if you are not a developer or you might not have the full skillset to edit your themes style.css file. You might want to fix a small bug in your CSS or maybe speed up your development workflow and do testing while you are working with a client?
Today we will review a plugin called Generation Editor for CSS & JS that we stumbled over which is developed by The Generation, a leading WordPress Agency in Sweden.
Let’s get started
We found the perfect plugin! Generation Editor is a fully-featured CSS and JavaScript editor built with custom post types that are tightly integrated with the WordPress coding framework.
Create minified CSS and JavaScript-files for your website in minutes and don’t worry if you happen to overwrite your own design changes. You can easily go back in time with the built-in support for WordPress revisions.
Sounds good right?
The Generation editor makes it really simple. Let me show you. Let’s say you want to add the Facebook pixel to your header. Start by buying the plugin for only 15 USD here and download the contents.
Once downloaded, upload your plugin to your WordPress website. With Kepler Hosting you can easily spin a new WordPress install with a few clicks. Try Kepler Hosting today!
After you downloaded the plugin from Themeforest and have successfully uploaded the Generation Editor for CSS & JS to your WordPress Website.
You are more or less good to go.
Now you need to navigate to your WordPress site settings and there you will find a new sub-menu item called “G-Editor”
Once you click on the G-Editor menu item, you have successfully set up the plugin, and now you have the freedom to easily add code to your header, body or footer. In this example, we added our Facebook Pixel code and voila! Your Facebook pixel code is now in your header!
The Good thing about this plugin is that is it so simple. There is even a developer-friendly mode that can both minify and un-minify your code.
But this is not all. Now you know how easy it is to add scripts to your header! Now let us show you the best part! CSS editing!
When you activate the plugin you will find two custom post types in your WordPress sidebar. “CSS & JS” Click on the CSS menu item.
Here you will be able to create different CSS files. When we work with clients and fix code, we often use this plugin so that our clients can see what we have changed and where. This is a good way to be sure that we only fix the problems that needs to be fixed and don’t cause any other issues. It is also a good way to document what has been done with the build-in revision tool.
For example, we often create two CSS files and add the changes we need in the different files. But you can, for example, also create a temporary file to test a few things.
In this case, we want to update the font size on our banner. (Note: Anyone can do this) All you need is some help from google without any coding knowledge. With the Generation Editor for CSS & JS, you will be able to make minor CSS changes on your own, right away!)
LET US GIVE IT A TRY!
Start by viewing your website. In this case, I want to make my “Hello World” title 100px. I use Google Chrome to inspect the element. Find the right line of code and class. Copy & Past into my Generation Editor CSS file and there I added a new line “font-size: 100px;” hit save and then head back to my homepage!
Looks good right? Do you see how easy that was? To sum things up, check out the features list and make your life easier and get a copy of the Generation Editor for CSS & JS
Features
- Version management system – easily rollback your changes just like you’re used to with regular posts
- Multi-user support, work on the website layout simultaneously
- Optimized and minified code – Don’t worry about slow load times, the plugin automatically compresses the code when added to your site
- Save without reloading – ajax saving of all CSS/JS-posts
- Shortcuts – Save your code with CMD/CTRL + S like you’re used to
- Add custom code to your head, body and footer [NEW]
- Development mode – debug your code easily by printing the code uncompressed on your pages
