WordPress

WordPress powers hundreds of thousands of sites, With unlimited possibility and completely free to use, it is understandable why everyone uses it!

This post will focus on the small details of how to improve your website to maximise the look and feel of your site, If i have used additional plugins then ill link them!

TEXT HIGHLIGHT COLOUR

While almost no one will see it, the small details make a site more nicer to use.

This should work on all modern browser’s including mobile browsers, Where #EF4B05 is located you want to change this to your sites preferred colour, or brand standard colour.

::selection {
  background: #EF4B05;
  color: white;

}
::-moz-selection {
  background: #EF4B05 
  color: white;
}

The above is the exact code I’m using, try highlighting some text to see what the above does.

STEPS TO FOLLOW

only 3 steps for this!

WordPress Custom CSS Highlight Text 3 small changes to improve your wordpress site - Step1WordPress - 3 Small changes to improve your WordPress Site

Click Customise – Located in your Admin bar

WordPress Custom CSS Highlight Text 3 small changes to improve your wordpress site - Step2WordPress - 3 Small changes to improve your WordPress Site

Click Additional CSS – This allows you to add some of your own code to tweak style of the website

WordPress Custom CSS Highlight Text 3 small changes to improve your wordpress site - Step3WordPress - 3 Small changes to improve your WordPress Site

Your’s might be empty, simply just paste it in, if there is CSS code in there then paste it at the bottom!

WEBSITE ICON

For me, this is extremely important, it makes your website easily identifiable when the visitor has multiple tabs open!

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ef4b05">
<meta name="apple-mobile-web-app-title" content="Badsey Media">
<meta name="application-name" content="Badsey Media">
<meta name="theme-color" content="#ef4b05">

This code is always located between the <header> ..Lots of code here.. </header>  section of your website, While you don’t need all lines of code these will maximise your reach for showing your logo in all the places thats possible, it also means its consistent !

STOP… There is an easier way, no more checking codes on different developer sites, just head over to this site and upload your logo, no more messing around, just simple and easy, and it works, i personally spent a couple of hours messing around with different image formats, sizes etc, this site does all of that, and it only takes like 5 minutes!

Once you’ve done that you’ll get a .zip folder, with all the images you need and a copy of the code that you need to paste into your header section of the site.

The best plugin i have found is called “Add Custom Codes” simply paste the code into the 2nd box and upload the images either via FTP or WordPress.

Scalable Vector Graphics [.SVG]

don't duplicate images at different sizes, use just 1

SVG images can’t be used in every instance, but they can be used for icons, like a site logo, instead of just using a PNG/JPG and scaling or resizing it with CSS you can use an SVG image scale it as much as you want and even change the colour, no matter what device is being used it will look great.

This is the same image, only one is saved as an SVG and the other a PNG, both zoomed in until the image pixelated.

3 small changes to improve your wordpress site - zoomedSVG - 3 Small changes to improve your WordPress Site3 small changes to improve your wordpress site - ZoomedPNG - 3 Small changes to improve your WordPress Site

SVG is a great idea if you really want things to look sharp at all times no matter the device, its not difficult to achieve however you will need to either use software like Adobe Illustrator or Affinity Photo to get the archived look you want!

I personally use Affinity Photo and for the price its a steal, its a combination of Adobe products in one, and there is no monthly fee, So try the demo!

Once you have managed to get the SVG image use this website to optimise it, now you can either embed it directly into a website or keep it on a SVG file.

WordPress & SVG

By default WordPress doesn’t allow .svg files to be uploaded as they could pose a security risk, however, there is a really good plugin that will allow you to enable the file extension for uploads, and if you wish, disable it after, search the store for “WP Extra File Types“.

Onces installed you will need to goto “Settings > Extra File Types” and search the page for .svg by either press CTRL + F or CMD + F

badsey

badsey

I like food.

Leave a Reply