WordPress Customization: 5 Ways To Pimp Your Website

In this post I am going to show you 5 different ways you can customize your WordPress website.

WordPress is such a flexible CMS and Blog system, that you can change almost anything.

Of course you need to know what your options are, and how you can make these changes.

Even if you are not a technical person, this post will still give you some ideas for your pimping website.

So let’s take a look at some of the ways and means you have available to you, and why you would use each of them.

When we are done, your website will rock!

WordPress CSS – Tweak Your Website’s Look and Feel

One of the easiest ways to change your WordPress website is to tweak the CSS.

If you have not been studying web development and design, then maybe you are not up with all the terms.

No problem, let me quickly explain the basics.

CSS determines the rules that display how your website looks.

HTML which you have also probably heard about, is more about the structure (ie. what and where things are).

So by changing a few things in the CSS of your WordPress theme, you can easily achieve a lot in terms of the look and feel.

I want to give you an idea of what can be changed through CSS, without giving you a complicated web design lesson.

So here are a few ideas to get your creative juices flowing:

 

Color – anything on your site that involves color (backgrounds, buttons, borders, menus, widgets, etc.)

You can change the color of your whole site, or just one part. Any element can be changed, as well as it’s border.

You can also change the font color – site-wide, or just for a specific element type (like the heading – H2).

This is one of the most fun and powerful areas of CSS.

 

Size – we are talking width and height here, as well as padding and margin (which determines the space around things).

If you want to make your buttons bigger then you would add some padding.

Maybe you want your header to be higher, to allow space for a bigger logo?

Or perhaps your sidebar is too wide and is crowding your blog posts.

Again, this is a very useful area of CSS for tweaking things to your liking.

 

Position – although HTML controls some of this, you can also change how things are sitting on the page.

For example, if you need a box to float at the top of your page (like a opt-in form widget) you can make it stick to a specific spot, even when someone scrolls.

You can also place one thing a specific distance from another, or make elements line up in a row.

 

Shape – not as commonly used as the others, but an option that can slightly change the shape of some elements.

One of the main things you have probably seen quite often is rounded corners on buttons.

 

As you can see, there are almost an infinite number of things you can change, or tweak.

So if something on your site is bothering you, chances are a professional Web Designer (like me) can help you.

How to edit your CSS

Ideally your theme will provide a place to add “custom” css somewhere in the Appearance menu.

Normally this will add the non-standard css somewhere where it will not be accidentally overwritten (during a theme update for example).

Worst case scenario, you have to go to the Appearance -> Editor menu, which will then open the css file by default.

You can then add your CSS in there.

Note: If you make the changes directly in the css file, I recommend making a copy of all your changes if you need to upgrade your theme, as it is likely that you will lose your CSS changes.

WordPress Shortcodes – Add Cool Things to Your Pages

WordPress shortcodes are a great little trick you can use to add things to your site on the fly.

I have been getting a lot of these kinds of requests lately, so I am really excited to show you how this works.

Let’s start with an example I have used quite a lot. Custom buttons.

Say you want to add a highly visible button towards the end of your blog post to send people to a new product you are selling.

Using the standard WordPress options in the editor, you have no chance.

You could code it by hand in the Text tab of the editor, but even if you knew how, every time you needed such a button you would have to add the HTML and CSS.

It does not have to be so painful.

Enter Shortcodes

Many WordPress themes come with a bunch of shortcodes, so you might have seen them already. Your theme might even have a bunch of them.

But if you need another one, or you don’t have any at all, then you can add them yourself (yes, you need to know how, I am getting to that).

Here is an example of a shortcode I created recently:

[button text=”Click Me” url=”https://madlemmings.com” color=”fff333″]

This shortcode adds a button to your page or post with 3 options:

• Text – what is written on the button
• URL – where you will go when it is clicked
• Color – what color the button should be (using CSS hex codes for color)

So any time you need a button within your pages or post, you just add this shortcode in the text tab of the editor, and voila!

 

A Button From Shortcode Although shortcodes might look a little confusing at first, once you get the hang of them, they are quite simple and very useful.

Adding a shortcode to your theme

Without creating a full-blown shortcode tutorial, here is the low-down on creating a shortcode.

1. Add shortcode code to your functions.php file (you can access this from the Appearance -> Editor menu, on the right you will see Theme Functions)

2. Possibly change your theme css to make the new shortcode element look perfect

3. Use the shortcode to your heart’s content

Note: You need to be confident with a little PHP and CSS to get this done. If you make a mistake in the PHP and press save, you might not be able to get back into WordPress – I did this last week and had to go and remove my mistake via the cPanel directly. So be careful.

WordPress Editor – Add Your Own Styles

This one is similar to shortcodes, but in some ways a lot easier to use.

With a little bit of extra code, you can add custom options in your WordPress editor that you can apply to your content on the fly.

I use this kind of thing for adding boxes and borders to content that I want to highlight.

This is what the dropdown menu looks like in my editor

I have a bunch of boxes and lines that I can apply to break up or highlight my content. And I also have a photo credit style I use to make the photo credit font smaller.

You can do the same, or even more interesting things if you want, and all straight from your editor.

This requires a little more complex programming in your functions.php file. But it is reasonably straight forward if you have a bit of technical knowledge.

Get in touch if you want this kind of work done on your site. It is quite a cheap thing to get done.

And it can really add some great effects to your posts.

WordPress Custom Page Templates – Pages Exactly As You Want

Sometimes small tweaks and shortcodes are just not enough to achieve what you want on a page.

That is where WordPress custom pages come in handy.

You can create a custom template and add it to your theme, and then use it when you create a new page on your website.

When would you want to do this?

• If you want a fully customized page – like my Services page (sexy, huh!)
• You want a page as the basis for a lot of pages you create (eg. a page without a sidebar, usually standard in most themes)

There are many ways you can use this idea, because as always, WordPress has created a very flexible CMS for us to enjoy!

Just get a little creative. It will save you a lot of time in the future.

How to create a custom page template

There are two main steps to creating a custom page template:

1. Create the template itself and add it to your theme directory (it needs specific code at the top for WordPress to recognize it as a template)
2. Choose this template when you are creating a new page (it appears in a dropdown menu – see image below)

Your page is then based on the code that is in this template. What exactly that is, is up to your creativity. But it provides you with a lot of options and power.

WordPress Custom Theme – Create Your Own Child

This is more of a general idea that WordPress has provided for theme customization.

Rather than changing the actual theme, you can “spawn” a child theme and work on that.

That means that the base theme is preserved and not altered in any way. This is great for making sure that any theme updates do not interrupt your precious changes.

For example, if you want to customize some of the pages or post types your theme designer provided, or even the css, this is really the best way to do it.

However, I would only recommend this for people serious about learning theme development and customization.

There are other simpler ways to add changes to your themes (as shown above).

Final Words

When you first get into WordPress, it can be a little overwhelming with all the options and functions you have at your finger tips.

But once you get comfortable, and start to know what you really want your website to look like, WordPress customization starts to become a question.

Now you have a whole bunch of ideas that you can consider the next time you wished you could change something on your site.

Now you can!

And don’t forget, if you need some help with your website, perhaps one of my website services will help

  Photo credit: ugglan via photopin cc