Customizing the “Subscribe to Comments” Plugin

Guest post by Indrek Saarnak, who’s the author of OnlineBlogger.

Have you wondered how to change the layout of the WordPress plugin Subscribe to Comments subscription manager? There’s no easy solution provided by the author of the plugin, so after looking at its core file I found out it’s actually quite easy by using an extremely simple tweak. With this tutorial I’m going to show you how you can also give it a nice custom design.

What actually is “Subscribe to Comments”?

Subscribe to Comments is a robust plugin that enables commenters to sign up for e-mail notification of subsequent entries. The plugin includes a full-featured subscription manager that your commenters can use to unsubscribe from certain posts, block all notifications, or even change their notification e-mail address! It’s an excellent plugin used by so many people, but it was last updated in Dec 2007 with no easy option for changing its layout. That’s the reason for this simple tutorial.

Just how much can I change it?

By default the subscription manager looks like this:

This is what my subscription manager looks like after a few modifications:

How to achieve this?

First we need to modify the plugin a little bit. Browse to the plugin directory wp-content/plugins/subscribe-to-comments and open the file named subscribe-to-comments.php and scroll down to line 950:

<style media="screen">

@import url( <?php echo get_settings('siteurl'); ?>/wp-admin/wp-admin.css );

</style>

Replace it with the following code:

<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/subscription-manager.css" type="text/css" media="screen" />

This little tweak makes it possible to use a custom CSS file. According to this the file would be named subscription-manager.css and it would reside in your active theme directory. Of course you can name it what ever you want. After this it’s just a matter of coding and experimenting different looks.

Customization – how am I supposed to do that?

First you need to know the basics of CSS. If you’re not yet familiar with it maybe this would be the perfect time to get to know it! As they say the best way to learn something is by doing it. Look at different examples and read what every property actually does and what it’s used for. A good place to start is w3schools.com website.

Ok, lets move on. Thankfully the HTML markup is pretty reasonably put together so there aren’t that many blocks of CSS code we need to write. By that I mean every section has the same classes and coding styles.

Here’s an overview of what blocks should be used for the CSS file:

body {}

input {}

input[type=”submit”] {}

h2 {}

h3 {}

a {}

ul, ol {}

fieldset {}

.updated {}

.updated-error {}

So as you can see there’s not much to it.

Give me an example

Below is a sample code from what you can get started on creating your own custom layout.

body {

font: 13px Tahoma;

color: #000000;

margin: 50px;

}

h2, h3 {

font: 1.82em Tahoma;

font-weight: normal;

}

a {

text-decoration: underline;

color: #5c461b;

}

input {

font: 15px Tahoma;

font-weight: bold;

padding: 6px;

border: 1px solid #C0C0C0;

}

fieldset {

padding: 10px;

border: 1px solid #C9C9C9;

background: #F5F5F5;

margin: 0 0 30px 0;

}

Just copy/paste the code inside the subscription-manager.css file and you’ll see the subscription manager starting to look like something – something decent.

If you like what you already have with this example code that’s good. But I encourage you to take it a step further – experiment with the background (give it a nice color or even a background image), change the font, try different colors and border types. If you don’t know how – learn it. Believe me, it’s worth the time!

A template you can use

If you don’t want to mess around with coding you can use a template that I’ve put together for this tutorial. It includes the CSS file with a few images (which should be uploaded to your themes /images folder).

Download


11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
SABRI RAZIN
January 19, 2011 4:58 pm

THE LINK FOR DOWNLOAD IS OUT U CAN FIX THIS?

john
February 5, 2010 8:34 pm

Any idea how to change the font color for the “Notify me of follow up comments” on the comment form.

Paul Cunningham
January 31, 2010 12:36 pm

This is awesome! Thanks for sharing, I’ve been thinking about styling that plugin’s page for ages.

Indrek
January 31, 2010 7:05 pm

You’re welcome, Paul!
If you come up with a custom design why not share it with the rest of us…

WPShout.com Article « Yellowecho.com
January 27, 2010 8:43 am
Il meglio della settimana #46 | BigThink
January 23, 2010 1:28 pm

[…] Customising the “Subscribe to Comments” Plugin Come personalizzare il plugin per la sottoscrizione dei commenti. […]

Nicolas
January 22, 2010 7:49 am

Sweet! I will try to do that on my site first and then probably on all other sites that have this Plugin. I have one question though. What happens if the Plugin get’s updated? Won’t the hack in the file be lost?

Indrek
January 22, 2010 9:49 pm
Reply to  Nicolas

Maybe you can post the links for others to see what you came up with in the end.

You’re right! When the plugin gets updated the hack will be lost. But when you look at the plugins info you’ll see that it was last updated 2007-12-14. So I doubt the original owner will do any updates on it – unless someone takes it over. And if this would be the case you can always replace those few lines again – shouldn’t be too hard (unless you have a whole bunch of sites using this hack).

Mark
January 20, 2010 8:56 pm

You should probably mention that if one is using a child theme, then these files will need to be placed in the parent theme’s directory.

Indrek
January 21, 2010 9:26 am
Reply to  Mark

Thank you Mark for your comment.
Forgot to mention that since I haven’t used child themes personally.