Themes are a great and easy way of enhancing a WordPress website’s visual experience. They offer a variety of customization options, such as sliders, colour schemes, different layouts, and many more. ‘Point‘ (version 1.1) by MyThemeShop is a great free WordPress theme that I have chosen in order to help visually enhance this website. Here are some of the tips/optimization settings that I have performed on this theme.
Adding Google Fonts
Our goal is to create a directory of web fonts for the world to use.
— The Google Fonts Team
Google Fonts are open-sourced web fonts available for anyone to use for their website. Here is how I added my chosen Google Fonts to the ‘Point’ theme:
- Browse to the Google Fonts website, and choose a desired font. Once you have selected your font, click on the ‘Quick-use’ button.
Select the desired Google Font, and click on the ‘Quick-use’ button
- Scroll down to ‘Add this code to your website:’. Highlight and copy the code.
Highlight and copy the CSS code.
- Log into the WordPress administration page, and navigate to Appearance > Theme Options. Once there, click on the ‘General Settings’ tab of the MyThemeShop Options Panel. You should be able to see a ‘Header Code’ section with a text box. Paste the copied Google Fonts code into this box.
Add the copied code into the ‘Header Code’ text box.
- You will then need to click on the ‘Styling Options’ tab of the Options Panel and add the proper CSS code into the ‘Custom CSS’ text box for each text elements. For example, I wanted all fonts in the website to use the ‘Roboto’ Condensed’ font, therefore I added the following into the ‘Custom CSS’ text box:
Add the proper text elements to use Google Fonts
These steps are also applicable to any WordPress theme that offers Custom Header and Custom CSS entries, and will persist if you update your theme. You can also add these codes by navigating to Appearance > Editor in the WordPress administration page and editing the ‘header.php’ and ‘style.css’ files, however these changes will not persist if you were to update your theme.
Removing Footer Navigation
By default, the ‘Point’ theme allows two navigation menus on the website, the ‘Primary Menu’ (located on the top right of the website) and the ‘Footer Menu’ (located on the bottom right of the website). I initially only wanted one menu, which is the ‘Primary Menu’. I tried disabling the ‘Footer Menu’ under the ‘Menu Settings’ in Appearance > Menus, however for some reason, the ‘Footer Menu’ still persisted and was displayed at the bottom.
To rectify this issue, I added a custom CSS code into the ‘Custom CSS’ text box located in the earlier mentioned ‘Styling Options’ tab of the Options Panel. The code is shown below:
Adding the CSS code to remove the footer navigation menu.
Explanation: What this does is it instructs the ‘Footer Menu’ CSS class property (called ‘.footer-navigation’) to not display anything at all.