How to Customize the SitePoint WordPress Base Theme

How to Customize the SitePoint WordPress Base Theme

- in Themes
543
Comments Off on How to Customize the SitePoint WordPress Base Theme

SitePoint recently released a new WordPress base theme. It’s very easy to customize and you can quickly and easily build advanced WordPress themes to suit your needs.

The SitePoint Base Theme gives you full permission to edit and modify the base theme. After downloading this theme, I customized it to build a theme for my WordPress blog.

There are two different ways to customize this theme:

  • Create a child theme.
  • Use SitePoint Base Theme to kick off your own awesome theme.

In this tutorial, I am going to explain, how to create a child theme and modify the SitePoint Base theme.

More from this author

  • 10 of the Most Popular Free WordPress Themes
  • 2-Step Verification for WordPress Using Google Authenticator

 

Getting Started

I prefer to use a local WordPress installation to create and test new WordPress themes. A local development environment can make your development workflow much faster and simpler.

I’m using WAMP Server for Windows. You can use any tool of your choice to set up local WordPress development environment. MAMPfor MAC, WAMP for Windows, XAMPP and Bitnami are cross platform tools to install WordPress locally.

  • Install WordPress locally with WAMP Server
  • Download Sitepoint Base Theme
  • Download a code editor. I prefer SublimeText.

After setting up a local WordPress installation, run your local WordPress site, install and activate SitePoint base theme.

Open your themes folder and create a new folder name it sitepoint-base-child or anything you like. Create two files in this new child folder.

  • style.css
  • functions.php

If you do decide to use a child theme with the SitePoint Base Theme, there’s no need to use CSS @import or even enqueue the parent stylesheet. SitePoint Base Theme will automatically enqueue the parent stylesheet for you.

Open style.css file and include the following information:

/*
 Theme Name:   SitePoint Base Child
 Theme URI:    http://www.yoursite.com/
 Description:  A sitepoint-base child theme by Tahir Taous
 Author:       Your Name
 Author URI:   http://www.yoursite.com
 Template:     sitepoint-base
 Text Domain:  sitepoint-base-child
 Version:      1.0.0
*/

Save your changes.

Login to your local WordPress site, go to Appearance > Themes. You should see SitePoint Base Theme there without any screenshot. Activate SitePoint Base Child theme.

Your child theme is ready. Now we can add our own custom styles to suit our own preferences.

For me, I’d like to change the default color for the links. The default color for the links is #3a3a3a.

Open style.css file and add the following styles to change the default color for links. I also want underline all visited links.

a {color: #00BCD4;}
a:visited {text-decoration: underline;}

You can see the base color for the link in the screenshot below.

[“source-smallbiztrends”]