“WP CSS Generator” Documentation by “GoDev” v1.0.1


“WP CSS Generator” - WCG

Created: 10/10/2017
By: GoDev
Email: support@wpcssgenerator.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Get Started
  2. CSS Group
  3. Add New CSS Group
  4. Add new Selector
  5. Google Fonts
  6. Get Your Code

Get Started - top

To use this plugin unnecessary is have a base knowledge about:

In this video, you can see how we use inspect to find Menu CSS selector, add a new group of WPCSS options and use Customize setting for styling the menu link color and hover background color.

Use WP CSS Generator to stay calm and get controle under CSS Code.


A) CSS Groups - top

Preview all CSS Groups with load order.

  1. Order - Drag and drop to sort groups. The code will be generated by this order. This order is important for generate CSS and load hierarchy.
  2. Groups - Group names. Click to edit group. You can delete group under group options.
  3. Status - Display group options in Customize. WordPress Customize can bag if you turn onto much groups in same time. Please don't use more than 3 group at the same time.
  4. Viewport - Responsive group of options. If you use Media Query for this group
  5. + Add Group - Create new group for options. Keep in mind that grouping options is as good as possible for your group review to be rational

B) Add New CSS Group - top

Create new group of CSS Selectors

  1. Group Name - Enter Unique group name. Please check if you have already created a group for selector which you want to add.
  2. Add Selector - Press to get options for new selector.
  3. Media Query - Enter CSS media query. Press icon for shortcut
  4. Save Group - Save group after add all CSS selectors.

C) Add Selector - top

Add new selector under the group.

  1. Name - Drag and drop to sort groups. The code will be generated by this order. This order is important for generate CSS and load hierarchy.
  2. CSS Selectors - Group names. Click to edit group. You can delete group under group options.
  3. CSS Properties - Display group options in Customize. WordPress Customize can bag if you turn onto much groups in same time. Please don't use more than 3 group at the same time.
  4. Important! - Responsive group of options. If you use Media Query for this group

D) Customize WCG - top

All active groups willbe displayed in Customize:

Under groups are CSS selectors

Each select contains CSS options which you select in C) Add Selectionr - 3. CSS Properties

These CSS Selector options will stylize your HTML object while setting up CSS properties.


E) Google Fonts - top

This video shows how to add Google fonts in WCG System.

Also, you can use other plugins to import Google fonts.


F) Get Your Code - top

Under Tool, you can get your CSS code generated by WCG by WordPress standards ready for distribution.

  1. Minify - SEO frendly CSS code. Important for page load speed.
  2. Developer - CSS code friendly to edit.

Notice: After you generate your code, copy minify code in Customize >> CSS. After that you can turn of WCG plugin and accelerate page load speed.


Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

WP CSS Generator Team

Go To Table of Contents