Last updated on by pb
2 out of 2 people found this article useful.
So you’ve set up your Freeola Domain and Web Hosting, added WordPress and followed the basic guides. Now how do you spice up your new site and make it your own?
You know about Themes in WordPress, right? Those templates which supply layouts and extra Widgets to make your site look great. Well guess what? So do millions of others and every theme will end up being downloaded thousands of times.
You could learn to code your own theme from scratch or you could use these tips to help create something a little different.
Change the colours of your 'Theme'
The most simple change you can make is to choose a good colour scheme to set your theme apart. Go to “Appearance” on the dashboard and then click on “Customize” to change your colours. This solves the issue of having to delve in to code to change the colours, though some themes only have limited choices of colours you can change.
Create a Logo
Even using MS Paint you can come up with a catchy logo.
Go to "Appearance" then “Site Identity” once you have one and upload it to your site. It will appear immediately on the right showing you how it will look on your site.
You can also change the tagline and title of your site, or hide the title completely if your logo is in the form of the name of your site already.
Widgets
Adding widgets seems quite a basic pre-requisite for getting your site looking its best and it's certainly something everyone should do. There are thousands of different widgets available - from those that provide a list of reviews or scores on media websites, to those that display your Twitter feed, regular news bulletins and comments from users on your forum (if you have one).
Most themes allow you to place widgets on the left and right but some also allow them on the front page or footer, making your site look very different. Check your theme’s help pages for more details.
A search widget near the top of your site will help people find content easily and displaying the content you want people to see is another good use of one of the many 'top posts' Widgets you can use.
Custom CSS
Since WordPress 4.7 came out, adding Custom CSS (coding used by WordPress) has never been easier. Head to your “Appearance” and then “Customise” options on your dashboard, then look for “Additional CSS” from the list on the left menu. The beauty of this function is that you can ‘live edit’ your site and see changes as you type the code.
Additional CSS just sits on top of your theme's own code and overwrites it without removing the original code, so you can edit without worrying about editing out anything important from your theme's own code.
You may want to visit tip 5 (below) - 'Making a Child Theme' - before you start this, though, as changes may be lost when the theme next updates.
If you want to add comments to keep a note of what each line of code does, just add them inside these symbols /* like this /*
A simple CSS command changes your main text in the ‘body’ of the site using the keyword BODY.
body { background-color: #000000; font-size: 12px; color: #1e1e1e; }
If you want a quicker way to do this and possibly learn some more CSS commands, check the Style.css section of the CSS from the Theme itself by going to “Appearance” then “Editor” from your Wordpress Dashboard and find the Style.css file.
Many of the editable colours and fonts will be in Body or Headers (look for h1 h2 h3… with the font and colour information afterwards. You can soon work out what each part does and the beauty of copying bits and pasting them to your Custom CSS screen is that even if you experiment by changing the code there, it will be easy to remove it again and revert to the old code.
You ‘can’ edit this directly but, as I've mentioned, the preferred way is to copy it out and go back to your Additional CSS box and paste it, then change it. This will allow you to keep track of changes and delete them if it all goes wrong.
As you edit more CSS you will learn more tricks and this can be a great tool for getting your site to look unique.
Creating a Child Theme
Strictly speaking this won’t change the look of the Theme on its own, but it’s really good if you’re going to go poking around in a theme’s CSS files. Originally this was fairly complicated to do but there are now WordPress Plugins that can create the new theme for you and save all the files you need, as well as providing a backup of your old theme.
My favourite Child Theme Plugin is Child Theme Configurator, which you can find by searching for it on the Plugin search under “Plugins” and “Add New”. It has full instructions and is really easy to use.
A child theme will protect the original theme and still allow it to update to a new version without losing your CSS code you may have changed. Think of it as an onion skin on top of the original code.