How To Install maxCSS Plugin For WordPress In 4 Steps

How To Install maxCSS Plugin For WordPress In 4 Steps


  • Share on Pinterest

In this short tutorial, we will review the installation process of the Max CSS plugin for WordPress in 4 steps.

This is a simple plugin that I wrote some time ago, in order to facilitate the development of CSS code in the WordPress default editor.

It adds an icon that the user can click and maximize the screen of the editor. This enhances the readability of your code.

As a result, it will help you to inspect and find any potential bugs making the development process easier.

So let’s start by following the following steps.

Step 1

First, you will need to click on the Plugins link in the right sidebar of WordPress.

Installation of max css step 1 - click on plugins link in the sidebar

Installation of max css – step 1

Step 2

Next, you will need to click on Add New and search for the term maxCSS in the WordPress plugins directory. After that, the plugin will show up in the search results.

Add maxCSS plugin and search – step 2

Add maxCSS plugin and search – step 2

Step 3

Following that, you should click on Install Now link.

Install maxCSS - step 3

Install maxCSS – step 3

Step 4

Next, you will have to activate the plugin by clicking on the Activate button.

Activate maxCSS - step 4

Activate maxCSS – step 4

At this point the installation of the maxCSS plugin is complete. In the following sections, we will see how you use it.

Usage

First, you will need to click on the Appearance link in the right sidebar of WordPress. After that, a dropdown menu will open. You will have to click on the Customize link as is shown in the image below.

Usage of maxCSS - step 1

Usage of maxCSS – step 1

Following that, the customizer screen of your theme will show up. You will need to click on the Additional CSS in the right sidebar as is shown below.

Click on additional CSS on your theme customize view

maxCSS usage – step 2

As a result, the Additional CSS editor will display and the maxCSS button is displayed as is shown below.

maxCSS icon is displayed in the CSS editor

maxCSS icon is added in the CSS editor – step 3

The result of clicking on the maxCSS icon is displayed below. When you click again it will exit the fullscreen mode.

CSS editor in full screen

CSS editor in full screen – step 4

Finally, if your browser does not support the fullscreen functionality an information dialog will show up.

Thank you for reading.

Happy coding

LET’S KEEP IN TOUCH!

We’d love to keep you updated with our latest news and offers 😎

We don’t spam! Read our privacy policy for more info.