How to use CSS in WordPress Plugin

Introduction

We will discuss here how to use CSS in WordPress plugin. We will use the same plugin we created in the example. We have seen how to use AJAX, jQuery in our previous tutorial. This example will also show you how to en-queue CSS file. Till now our simple email subscription form does the necessary things what it required. But in this example we will apply some style to make it look more better.

The basic idea of this post is to show you how to use CSS (Cascading Style Sheet) in WordPress plugin. You might have better idea to make the subscription form more stylish.

WordPress provides wp_enqueue_style() function for en-queuing the JavaScript files.

This function provides a safe way to add/enqueue a stylesheet file to the WordPress generated page.

Prerequisites

Make sure you read first on how to use AJAX, jQuery in WordPress plugin tutorial.

Creating CSS File

It is always good practice to put the files into different folder instead of in the plugin’s root folder.

So we will create a css file called roytuts-email-subscription.css under css directory. Of course your css directory should be kept under your plugin’s root folder.

The source code of the css file is given below:

.form-style{
	padding:5px;
	background: #FFF;
	border-radius: 10px;
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style .inner-wrap{
	padding: 5px;
	background: #F8F8F8;
	border-radius: 6px;
	margin-bottom: 5px;
}
.form-style input[type="text"] {
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	padding: 5px;
	border-radius: 6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border: 2px solid #fff;
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
.form-style input[type="button"]{
	background: #2A88AD;
	padding: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
	font: normal 30px 'Bitter', serif;
	-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	border: 1px solid #257C9E;
	font-size: 15px;
}
.form-style input[type="button"]:hover {
	background: #2A6881;
	-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}

The above style sheet looks simple and applies styles for button, input elements, div area.

Updating HTML in Subscription Form

Make sure you updated the HTML parts in subscription form as shown below:

<div class="form-style">
    	<h3>Subscribe to receive update on posts</h3>
    	<div id="roytuts-msg"></div>
    	<div class="inner-wrap">
    		<input type="text" id="roytuts_contact_email" name="roytuts-email" placeholder="Email Address" name="field3" />
    	</div>
    	
    	<div class="button-section">
    		<input type="button" id="roytuts_submit" value="Subscribe Now!" />
    	</div>
    </div>

Enqueuing CSS File

Now we will enqueue the above css file. The enqueuing code should be kept into the plugin’s main PHP file.

We will use the same function roytuts_enqueued_assets() to register and enqueue css file.

wp_register_style('subscriptionstyle', plugin_dir_url( __FILE__ ) . '/css/roytuts-email-subscription.css');
wp_enqueue_style('subscriptionstyle');

In the above code we first register the css file using wp_register_style(). The first parameter is the name of the handler, second parameter is the location of the css file.

Final Output

Your subscription form on the site will look similar to the below image:

css in wordpress plugin

Now hope it looks better than the previous subscription form. You can apply more style to give more look to the subscription form.

Source Code

Download

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *