How to customize your WordPress site using Codepen.

WordPress has become hugely popular in the last few years, thanks to it’s simplicity as well as the thousands of themes and widgets that can easily be integrated with it. I wanted to write a post about my process of how I use Codepen and SASS to easily edit an existing WordPress theme.

CONTENT IS STILL KING.

I always start by downloading the Bones HTML5 WordPress theme as it is the most basic theme with pretty much no styling at all. This is great for inputting content as you won’t be distracted with any aesthetics but instead helps you to concentrate on populating the theme with real content. This is very important as it helps you to visualize the hierarchy of information as well as being a good time to reflect on the structure of information and decide on what will be input as a page / post / category / tag. In this example, I am using the default Bones HTML5 WordPress theme and have populated it with content from my blog.

A screenshot of www.javierghaemi.com using the Bones WordPress theme but populated with real content.

FORM FOLLOWS FUNCTION

Once you have populated your theme with real content, it’s time to search through the thousands of WordPress themes out there, to find one that has the functionality that you require. It’s pretty easy to edit the visual look and feel of the site via the CSS stylesheets but adding functionality will need a deeper coding knowledge of PHP and functions so it’s better to find one that already does what you require. This could be anything from making sure that the theme is responsive to it having a header that collapses for mobile and tablet devices. I just wanted a very simple, blog style theme that was easy to read on both tablet and mobile and so after testing a few free themes, I settled on the free Twenty Twelve WordPress theme. One of the nice bits of functionality that the theme had, was that it would minimise the main navigation into a collapsable toggled navigation on screen widths of 600px and under.

SETTING UP YOUR CODEPEN

Once you have picked your desired WordPress theme and have populated it with content, it’s time to set up your Codepen workspace. Go to Codepen.io and create a new pen. Then you want to inspect your WordPress site and copy the whole HTML of the site and paste it in the HTML column in Codepen.

Inspect your WordPress theme using the browser’s inspector tool and make sure you ‘Copy as HTML’.
The pasted WordPress HTML code in Codepen.

This will then display your WordPress site with chosen theme inside of Codepen, ready for editing. I am a huge fan of writing SASS rather than CSS and so I like to go through the HTML and create a SASS skeleton so I can easily structure and keep track of what I edit. I do this by inspecting the theme using the browser tools and noting down the cascading order of the elements.

Just remember that if you are going to write SASS instead of CSS, you will need to turn on SASS by clicking on the cog by the CSS title (as shown below).

TIME TO PLAY

You can now begin editing the CSS to get your desired aesthetics for the site. As the current styles are being pulled in via the link in the HTML (pointing to the WordPress site), anything you write in the CSS panel will override the theme’s default styles.

This is where spending time creating the SASS skeleton really comes in handy as you can quickly inspect your theme, make any CSS changes and easily identify where to add the new CSS in the SASS structure to override the theme’s default styles.

FROM CODEPEN TO WORDPRESS

This isn’t a CSS / SASS tutorial so I won’t go into the styling too much but once you have finished overriding the default styles with your own via Codepen, you will need to access your WordPress theme’s code editor. To do this, simply log into your WordPress dashboard and in the sidebar, navigate to Appearance > Theme editor.

You will automatically be sent to your themes primary stylesheet but if not, you can navigate to it via the theme files panel on the right.

To the best of my knowledge, WordPress only supports CSS and not SCSS so you will need to convert all that SASS goodness from Codepen into CSS. Luckily, Codepen does this for you although the feature is not very obvious to find.

To convert the SCSS to CSS, you need to click on the ‘CSS’ title in the editor’s pane. It’s important that you click on the actual ‘CSS’ title and not on the cog (next to the title). Once you do this, Codepen will compile the SCSS into good old fashioned CSS and show a ‘Compiled Preview — click to edit’ message. Clicking that message will then turn the CSS back into the SCSS, ready for editing again.

To have your Worpress theme use these styles, you will need to copy the CSS from Codepen and paste it right at the end of the CSS in your Worpress theme’s code editor. I like to enter 10 or so line breaks between the default styles and my override styles so when I need to replace my CSS, it’s easy to distinguish where one ends and another begins.

Press ‘Update File’ to save the changes and your live Worpress site should now be looking like the way you styled it in Codepen.

Make sure to do the same for all posts, pages, search results and categories. This is an iterative process so if you find that there is a page that is not picking up the override styles, just copy the HTML of the page into Codepen and tweak your SASS to include the excluded pages.

Article page before
Article page after

This is by no means the only way to edit WordPress themes, it’s just a way that suits me. It means that I can edit the CSS and see my changes in real time via Codepen and I don’t have to download the theme locally. It’s a great way to edit on the fly as if your content changes, you simply copy the new, live HTML and replace the Codepen HTML with it to see how your newly written SASS makes it look.

Hopefully this workflow will make the idea of styling your own WordPress theme far less daunting.