Wonderful WordPress Plugins to Customise Any Theme

I’ve been using two free WordPress plugins a lot lately and I thought I would share my experience of them. I recommend them both as easy to use and effective.

Simple Custom CSS

Plugin page on wordpress.org: https://wordpress.org/plugins/simple-custom-css/

This plugin is for tweaking the look of a theme you like that is nearly what you want but just not 100%. It’s not for making a theme from scratch. If you have to change every aspect, well you need another theme. You also need to have an idea of what part of the style.css needs to be changed to do what you want, so if you have no knowledge of CSS, you would need to brush up on that first.

I’ve used it for changing the colour of fonts, for example when I added a background image, the basic font colour of the headings no longer showed up, and the sizes of the different heading styles (h1, h2, h3 etc). Also to change the colour of social media icons that weren’t showing up after changing the background colour. For me it has been particularly useful when I feel that things are more spaced out than I want, so I can alter margins and padding. And finally, I had the situation where I couldn’t see links very clearly, so I altered the formatting of them.

Once you have installed and activated the plugin, there is an option in the Appearance tab on the Dashboard menu, “Custom CSS” (it is showing in the image below). That reveals a panel to paste your CSS code into and then click the “Update Custom CSS” button.

CustomCSSPlugin

My method of working is to have two tabs open. One with my site dashboard, the other with a live page showing the aspect that I want to alter. That is in Firefox browser. I use the Inspector tool, which is one of the Developer tools from the menu top right, to find out the class of the element that I am interested in. The shortcut to open it is: Ctrl+Shift+C. Or you can right-click on an element and pick “Inspect Element” from the list.

This is a bit like being a detective and requires some trial and error and intuition to pick out which element you need to change. I have a local copy of my theme’s style.css open in Notepad++. I search on that for all of the instances of the class that I think is important. Then when I have found the part of the code that is controlling the class I am interested in, I copy that into the Simple Custom CSS panel. Next I change parameters and save. Then I refresh the tab that has the live page that I am trying to alter to see what effect that change has had. If nothing happens that suggests that the wrong class has been altered.

I have added some example modified code below for the heading sizes in the hueman theme (that I am using on this site).

/*  base : headings
/* ------------------------------------ */
h1, h2, h3, h4, h5, h6 { color: #2C2C2C; font-weight: 600; -ms-word-wrap: break-word; word-wrap: break-word; }
.entry h1 span, .entry h2 span, .entry h3 span, .entry h4 span, .entry h5 span, .entry h6 span { color: #2C2C2C; }
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6  { margin-bottom: 14px; font-weight: 400; line-height: 1.3em; }
.entry h1 { font-size: 28px; letter-spacing: -1px; }
.entry h2 { font-size: 24px; letter-spacing: -0.7px; }
.entry h3 { font-size: 22px; letter-spacing: -0.5px; }
.entry h4 { font-size: 20px; letter-spacing: -0.3px; }
.entry h5 { font-size: 18px; font-weight: 600; }
.entry h6 { font-size: 16px; font-weight: 600; text-transform: uppercase; }

And this is modified code for the format of links and blockquotes:

/*  base : entry 
/* ------------------------------------ */
.entry a { color: #860000; text-decoration: underline; }
.entry a:hover { color: #FF0D00; }
.entry blockquote { position: relative; color: #7C0000; font-style: italic; margin: 0 0 20px 0; padding-left: 50px; }

I emphasise, this is code I copied from the theme’s style.css and then modified, changing colours and sizes and padding. I found that I needed the .entry class by using the inspector tool. Other themes may have different class names.

I wanted to find a tutorial on how to use the inspector tool to add here, but there are lots and all of those that I found didn’t actually look like my set up (everyone seems to have Macs!). So that makes me realise I maybe need to learn a bit more about all of the capabilities of the developer tools, but that’s for another day.

Shortcodes Ultimate

Plugin page on wordpress.org: https://wordpress.org/plugins/shortcodes-ultimate/
Shortcodes Ultimate homepage: http://gndev.info/shortcodes-ultimate/

Video about the plugin:

This plugin has so many options that it would be easy to get either overwhelmed or carried away. I think it is something you should use sparingly. If you are adding lots of elements that are not in keeping with your theme, things can easily get messy. But if you want a quick way of adding a little extra something there are lots of nice features in this plugin. I have used it for dividing lines and buttons in a long post site that I have recently been working on, also the spoiler and accordion feature. This is where you have some text that you click on and it reveals some more – useful say for a list of FAQs. Using the spoilers on their own means you can open up all of the sections at the same time. Putting the accordion short code around the spoilers means only one section is open at a time, so when you open a new one the previous section you had open is closed. You can also select to have one section open (the first one for example) as a default when the page is first landed on.

This is an example of a spoiler (click on this title)
You can put text with any kind of normal formatting here, links, image, any embedded content. You can select the icons, give the element a class (so that you can change the format of all instances of that class) and you can add an anchor point to link to.

Image from DTTSP http://deathtothestockphoto.com, check their licence. Not available for reuse.

This is a divider with the ‘go to top link’ text, just using the default settings.

The plugin also has its own custom CSS section, which you can find if you look in the Shortcodes menu item that is added to the dashboard (below the Settings option on mine) and select the Settings from the subset of items. I won’t go into a tutorial for that here, but I will mention that this plugin has quite a few style sheets. I had a local copy of them all on my PC and used the inspector tool to find which class I was looking for. Then searched each of the style sheets until I found the code controlling that element class, in the same way that I described for the Simple Custom CSS plugin above. Then I copied that code into the custom CSS section. Then altered the parameters to new values that I wanted.

As an example, the default font for the spoiler title seemed too small, so I changed it to match the h3 format.

.su-spoiler-title {
	position: relative;
	cursor: pointer;
	min-height: 20px;
	line-height: 1.3em;
	padding: 7px 7px 7px 14px;
	color: #2C2C2C;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -0.5px;
}

If you want to see some of the features in action this page has accordion and spoilers with the format of the spoiler heading altered in the Custom CSS, plus dividing lines, plus buttons.

1355 Total Views 2 Views Today

You may also like...