Last week I was working with a client on a great-looking website that uses the Eventica theme, which offers some great online booking functionality. One of the things they wanted to do was add a couple of lines of custom CSS to change the height of a row of boxes and hide some text. Most premium themes come with a little ‘Custom CSS’ section within their settings, which allows you to simply paste in the code. However, Eventica doesn’t support this, and the way (as of the latest version) they advise you make CSS changes is via a child theme.
Setting up a child theme isn’t too difficult for a PHP developer, but for many WordPress users it would be a daunting task, and quite a lot of work to simply add a couple of lines of CSS. However, there is a quick shortcut to do this.
Eventica (like most third-party themes) has a section within the settings that allows you to add some custom JavaScript, such as the Google Analytics tracking script. Other types of code will be automatically removed, but JavaScript should be accepted without any fuss. We can use this to our advantage, and load a custom CSS file in JavaScript in order to make as many CSS changes as we want. To do so, just paste the following code within your ‘Analytics Tracking’ section of the theme settings:
<script>
var cssId = 'myCss';
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://www.yourwebaddress.com/new-styles.css';
link.media = 'all';
head.appendChild(link);
}
</script>
Don’t forget to change the ‘yourwebaddress.com’ section to you website’s address.
What this does is load a file called ‘new-styles.css’ from your website root. All you need to do is create a CSS file with your custom changes in, save it as ‘new-styles.css’ (without the inverted commas) and upload it to your public_html or htdocs folder (or wherever your website root is). This file will be loaded automatically and the styles will be applied without affecting any of the core theme files, allowing you to update the theme whenever required without losing anything.
