MMA, Fitness & Marketing enthusiast from North Wales, UK. A Stoic Hippy with no hair.
Not to boast but - 1st Class Degree in Sports Science from Loughborough, MSc in Nutrition from the University of Liverpool. 20 years experience of weight & fitness training.
The Chrome Inspect Element function is instrimental in making these changes to your WordPress theme.
Let’s say for example, that you want to change the main header on the homepage of your WordPress theme – then right click and choose “Inspect Element”.
Then click on the arrow icon on the top left of the window that opens, and your arrow should automatically select whatever you hover over.
Use a Text Document To Track Changes
Copy and paste code that you want to make changes to.
Make your changes in your notepad document and add a comment so that you can easily identify what you have changed.
Paste Changes into the Appearance>Customize>Additional CSS window
Once you have selected your code from the text/notepad document, you can go to the WordPress admin section /wp-admin and the Appearance menu and then “Customize”, then near the bottom, you should be able to paste in your new CSS.
To Preview CSS Changes
In inspect element, click the “+” icon on the top right.
You can then add styles to different elements.
Be aware that you may need to edit the parent element, to see any changes (rather than the specific element)
To Remove Elements on a Webpage
In CSS, if you change the “Display:” value to “none”, from inline-block etc.
You’ll need to copy & paste the whole block of code from inspect element’s CSS window, into the Custom CSS menu’s window in WordPress’s (Appearance>Customize>Custom CSS)
The video below has more details on how to do this:
To Change the Colour of Elements
Use the same method as above – i.e. select the element with the inspect element tool.
Select the item that you want to choose using the arrow in the Inspect Element window (arrow is on top left)
Then change the colour using the panel on the right:
Finally, paste the new code for that element, into the Custom CSS window in WordPress (go to Appearance>Customize – wait for the Customize menu to load and then click either “Customize CSS” or “Additional CSS” which is normally located near the bottom left
Change the Colour of Font-Awesome Icons
This is easily done, the same way as shown above.
Select the icon, then change the colour in the CSS panel of inspect element on the right.
Select all the CSS in that window and then paste it into the Custom CSS/Additional CSS window on the left:
Changing the Fonts on Your WordPress Theme
Go to fonts.Google.com to see all the available fonts (well, most of them)
Open Inspect-Element – click the arrow on the top left of the window
Then, again just select the text that you want to change and this time change the font-family value to the one you want
Remember to add all the code/CSS from the window precise window that you edit on the right, to the Customize/Additional CSS panel on the left.
Using this method you can also change:
Padding & Margins Containers Background Image, Position etc. Sidebar
By adding !important to your CSS, you can ovveride all other rules relating to that element. Use this sparingly though as it will get confusing.
To follow along with this tutorial, please install and open Google Chrome, and then add the following extension (at your own risk etc. but I’m sure they’re fine):
Firebug for Chrome (or you can just use Developer tools by right-clicking on parts of your webpage and selecting “Inspect” or “Inspect Element” from the menu that appears – Firebug works well on Chrome on my desktop – but not on my Macbook)
To get used to using Firebug – open your website – or just go to a website of your choice.
Click the Firebug extension on the top right of your Google Chrome browser
Update – Using Dev Tools Inspect Element in Chrome is just as good. Just remember to click the arrow icon on the top left of the window that appears, so that you can easily select individual elements.
Adding CSS to WordPress – Additional CSS
Most WordPress themes, have a “Customize” option, that contains a menu item called “Additional CSS”
Login – on the ‘header menu’ click Customize – then Click “additional CSS”
You can then paste your CSS directly into the box provided:
Note that if you add CSS to the box on one page – but it refers to an element that is on other pages – e.g. the main-menu – then this will be applied to all pages.
If you wanted to make a change to one page only – to a ‘global-element’ such as the main-menu – you would need to add a new class or id – by editing the HTML in the Theme Editor in the dashboard/wordpress.
Try Out Your New CSS in Inspect Element or Firebug
Once you right click and “Inspect” the CSS – you can edit it.
When you have made a change to the CSS in the Inspect-Window, copy it by highlighting it and holding CTRL + V
Open the “Additional CSS” menu item, then paste in the edited snippet of code
Now that the above code has been added, and published, the Menu Items turn red when the mouse-cursor hovers over them:
Basics of CSS
The basic concept and idea of CSS is that you can style multiple items, with one piece of code.
So for example, rather than adding a colour to every header on your website – you could ‘tell your CSS stylesheet – to make every H1 a specific colour.
Although you can use “inline CSS” by adding it directly to the HTML – best practice is to add all of your CSS to a stylesheet, which is then linked to the HTML. This is done for you already in WordPress, via the “Additional CSS” box in the Customize menu and the Appearance menu in WP-admin, under Theme Editor.
Understanding how CSS works is directly linked to understanding the concept of ‘selectors’.
CSS selects a certain HTML tag, a class or an ID and then ‘tells the browser/HTML’ what style to apply.
HTML Tags are already predifined, examples include – p (paragraphs) – H1 (main headers) – a (anchor text)
Classes and IDs are not predefined by any internet-standards such as W3. You can give a HTML tag a class or an ID – so that specific paragraphs or headers etc. can be styled and not others.
A stylesheet must ‘select’ an element, ID or class, to change the style.
To select an ID
<div id = “main-nav“>
The ID selector is preceded by a hash character (“#”) in the stylesheet:
In the CSS, a class selector is a name preceded by a full stop
The asterix * is the “universal selector”
The below CSS would select all items and make their background colour yellow:
A Few Examples of CSS
Make the text within the main headers (h1s) – coral:
Make the text within the class called “main” centred
Animation in CSS, usually incorporates Keyframes.
The keyframes must then select an element, for example, this keyframe selector would determine the styles and/or rules for the element called “slidein”:
Step 1 – Configure the Animation
Style the element – a paragraph (p) in the example above. You would style the paragraph, or H1 or whatever element you want to animate, with the animation properties.
The animation properties are:
animation-name This must sync-up with the name with the@keyframes at-rule
animation-timing-function Configures the timing of the animation, relating to how the animation transitions through keyframes.
animation-delay How long between the element loading and the animation starting?
animation-iteration-count Defines the number of times the animation should loop
To see a good example of CSS animation, please see this one on impressivewebs.com (this free version of wordpress won’t allow me to embed code etc.)
To be fair, it’s probably a bit easier to animate with JQuery – but still very handy to know CSS animations, especially when you’re trying to work out what’s going on a give webpage in terms of SEO etc.
Properties are animated from “initial to “final states” using CSS Transitions.
In the example above:
a div class is created in HTML and named “box”
The box is then styled in CSS to be red and specific dimensions
Transition is added to animate the box
Transition used on itself is shorthand, instead of declaring what to transition, for how long etc.
In the example above, we transition the background colour, over 2 seconds and tell it to “ease out”
The background colour to change to on-hover is declared as green
moz-transition, webkit transition etc are included for other browsers – usually older ones
By using keyframes and changing the opacity of the ‘nth-child’ and altering the animation delay, you get the rotating word effect:
What is SaSS?
SaSS stands for “Syntactically Awesome Style Sheets”
SaSS look a bit different to standard CSS, as you don’t need the semi-colons or curly braces.
With SaSS, you can use the dollar symbol – $ to store variables.
You can, for example, create your own text variable, giving the text several styles such as size, font family, font style and a font weight – and store this information in a font variable called $my-font.
You can then call this variable to style various parts of a webpage
font: 100% $my-font;
or you could, create a colour variable, to save having to write out the hex code each time, e.g.
Add specific fields, to the new post-types using the Advanced Custom Fields plugin
Give new fields an id – so that you can then edit the styling with CSS
See our WordPress for CSS blog post for more information on customising CSS – this will be the next post to be published
Custom fields is probably the easiest way to implement significant layout changes to a WordPress theme.
It is also a great way to provide a client with specific pages, that they can populate and publish themselves.
If a client is very specific about a design, it can a be a bit of a nightmare if you are not savvy with editing WordPress CSS, HTML and JS – Advanced Custom Fields makes it easy – and easier for both you and your clients to update when required – by changing the visual editor in wp-admin to make it as simple as possible.
In fact, I first came across Advanced Custom Fields, when I worked for a UK Tourism company, and the Web Agency amended pages using the plugin.
Step by Step
Sort your hosting and domain out. Hostgator is decent (not an affiliate link)
Backup your website (you should do this before installing new plugins – ironically, you made need a plugin to do this!)
Install Advanced Custom Fields WordPress plugin – so you can create, well, custom fields etc on your pages and posts.
Activate both the CPT UI WordPress plugin and the Advanced Custom Fields Plugin
Creating Fields with Advanced Custom Fields
Once you have installed – and activated the Advanced Custom Fields plugin, you should see a menu item on the left hand side; called “Custom Fields”
To create a new field:
Click the “Add New” button next to “Field Groups” at the top of the page on the Custom Fields tab/menu item
Give the Field a Name e.g. “Product Description 2”
Now click the blue “+Add Field” button (near the top, to the right)
Now fill in the items required: – Field Name – give it a descriptive name – e.g. Product Description 2 – Field Type – for text entry/a text box – choose Text
Most items are quite straight forward – the Location part is very important thought – as this dictates on which pages or posts, this field will appear. For my wooCommerce store, I have chosen: Post Type – is equal to – product so that I get the text field on all my product posts.
when you are happy – click the “Publish” button on the right hand side.
Now when I create a new Product Post/Page – I have the option to add a second description via a text box:
Other Text Fields that might be appropriate for a Product could be things like:
You could also set the fields to “Required” – so that a product could not be posted to the website without all of the above details. This is particularly helpful if you have multiple people working on the same site.
Remember that Year and Price would be a “number” and not a text field.
Add A Rating Box Using Advanced Custom Fields
Click “Add Field” button
Give the Field a name in Field Label & an actual Field Name
Add Instructions for the admin-user
Add a min and max value, e.g. 0 and 10
Step size – 1 (means can’t give 1.5 etc. has to be a whole number)
Combining Advanced Custom Fields with Custom Post Type Plugin
Install CPT UI plugin and activate it
Add a new post type by clicking on the relevant part of the side menu to bring up the CPT UI options
Fill in the basic settings: Slug – what will appear in the URL of these posts Singular – e.g. “Offer” Plural – e.g. “Offers”
Add Post Type – it should appear on the left hand menu/nav
Go Back to CPT UI – this time click on !Edit Post Types”
Minimize or just skip over the “Additional Labels” section
Under “Settings” – Has Archive – change to “True” – Menu Position – Change to “6” so it appears below normal posts – Menu Icon – Change this to a relevant icon – 50 x 20 pxls
Now – when you go back to the Advanced Custom Fields section of the menu/backend – you can add specific fields to the “Offer” post type:
Positioning Fields on the Page
Simply use the options (in Settings) that custom fields gives you for positioning the field:
You can also add a class and id, so that you can edit the fields using CSS (see our next post about WordPress and CSS!)
“You’ll never get yourself off the treadmill of paid ads, if you don’t build your brand”
Someone on a Search Podcast, 2019
It’s very easy to dismiss online content, blogs, image assets and even display ads as pretty much useless – because you don’t have the instant gratification of seeing leads and/or sales.
This is completely understandable; especially if you have a background in sales – where your job has been to ‘finish off the lead’ and get a sale.
However, if you are in it for the long (or medium) run, then building your brand is a must. Whether you are a tradesman or a giant corporation, your brand’s reputation and the brand-awareness is your safety net when it comes to consistent website traffic, leads & sales.
It takes time to build a brand – but once it is built, those people who come to you direct because they know who you are – are effectively free – or at least very cheap in comparison to some of the cost per click of Google Search Ads these days.
The blog has over 600 pages of content, lots of it really long, in-depth and time-consuming to produce. The site has 5,000-10,000 visitors per month, but virtually nobody comes to my website via a branded search on Google.
This could be down to one specific reason – the domain name is crap and hard to remember.
I’ve bought a few more memorable domains (like WokeMMA.com “Woke” being an ironic term for self-awareness used in the MMA & Jiu Jitsu communities) and I am currently weighing up the time & effort of re-branding everything like GoogleMyBusiness, TrustPilot etc. – plus all my back-links currently point to blackbeltwhitehat.com (I’m aware of 301s etc. but I’ll still definitely see a drop in rankings).
My blog is ultimately a hobby that I’ve invested less than $50 into over 6 years. But if I had some more budget – I’d put together a plan to build my brand online…
How to Build a Brand Online
First make sure you know your target audience & do one of those SWOT analysis. Then make specific goals to establish some brand KPIs.
Here are some ideas on what to do next:
Get a relevant, easy to remember domain name!
Learn from my mistake, a short catchy domain name is an easy-win if you are just starting out from scratch. A lot of the best and obvious domain name will be taken however, so you’ll have to do some research first. If you are just starting out, don’t name your business until you secure your domain name!
Depending on your niche, you can set tiny max CPC bids in some instances – and they’ll still get thousands of impressions for very little spend. Gmail ads work particularly well for (potential) low CPM (cost per 1000 impressions).
Rotate your display ads’ design & colours to stop people ignoring them due to ‘banner blindness’.
Blog & Outreach
Blog are great for reaching people who are researching a potential purchase.
For example, I landed on Perfect Keto’s blog a few times whilst researching Exogenous Ketones. Then ended up buying their branded product on Keto-pro.co.uk; because, for what ever reason, I trusted their brand.
Create great content, with statistics, images and video – and then outreach it – i.e. send it to relevant blogs and websites.
If you can afford it, use “PR-Level” outreach and contact national newspapers etc. This can be done via websites such as gorkana
If you content gets links too – then great – that’s good for Search Engine Optimisation (SEO). Doing some of your own exclusive research and generating tables of statistics are great for generating back-links naturally i.e. passively.
To turn blog’s into direct sales, you can also use relevant ‘CTA’ images below your blog.
For example, if you post a blog about the Walking Path’s of Snowdonia on your Snowdonia-based-bed-&-breakfast website; consider adding a relevant & clickable ‘book now’ and/or ‘get your free brochure’ button with eye-catching image at the bottom of the post. Many people now do this with newsletter sign up pop ups, which are a bit annoying but do work.
Content is great – but tools tend to do better than copy. For example, NerdWallet’s top page in terms of organic traffic – is their mortgage calculator.
As well as brand awareness, you want some social-proofing of your brand. Start with a free account on Trustpilot and GoogleMyBusiness
Video & Social Media
The number 1 mistake people make on social media is to harp on about their brand all the time. Be entertaining, provide useful information and insightful comments. If you are over-promotional, people will not follow you. Build some authority by providing helpful insights that your target market will appreciate.
Videos & podcasts can be costly in terms of time. If you don’t want to set up your own podcast, guest-appearance on other people’s podcasts can generate valuable awareness and also back-links to your website (important for Search Engine Optimisation/Rankings).
Build an amazing product and/or service
This is your foundation and one of the reasons that Apple is so successful. An LSD-fueled Steve Jobs came up with some amazing ideas and concepts. The brand also turned itself into unique hybrid of tech & fashion thanks to their pioneering products.
The big, light-up apple on the back of Macbooks no doubt was a design aimed at building brand awareness too!
For some blogs and websites, even keywords with 0 monthly searches may be relevant.
My other blog – blackbeltwhitehat.com has built all of its traffic off KWs that Google KW planner says has 0 searches.
It all depends on how authoritative your website is and your competitors are. You can go after bigger, more popular KWs if you are a huge website with a DA of 90. It’s a different ball game if you are running a personal blog with a DA of 15
Try and include a number of the relevant searches in your articles etc.