Hacking Casper

Casper is a WordPress theme by Lacy Morrow. When looking around for a new WordPress theme, I came across Ghost. Ghost is an online publishing platform that takes the complexities out of writing and publishing online. There are some really gorgeous themes available. I was really tempted to migrate across but opted not to because of the huge amount of useful plugins and great support from the wordpress community.

I googled around a bit and found Casper, it’s an open source theme that imitates the default theme you get with ghost. It ticked most of the boxes for me as I wanted to take my website back to basics.

There were a few customisations that I wanted to make as is the norm when not developing a theme from scratch.

The theme had a static header throughout the whole site, however I wanted to have the featured image shown when looking at a blog post. I installed the plugin ‘Custom Header Extended’ and that allowed me to upload a custom image for each page/post. It’s super easy and does exactly what it says with no issues. Your theme must be compatible with the $custom_header function. If it’s not it’s easy enough to integrate in your functions.php file. Instructions for this are on the wordpress codex.

I also wanted to integrate Disqus comments. I installed the plugin as per my previous configuration, however it didn’t display correctly. I went down the manual route which is very easy. Simply edit the code in your comments.php file to the code below.

<div id="comments" class="comments-area">

<!--?php if (comments_open()) : ?-->
<div id="disqus_thread"></div>
<script type="text/javascript">// <![CDATA[ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'disquscodehere'; // Required - Replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); // ]]></script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a class="dsq-brlink" href="http://disqus.com">blog comments powered by <span class="logo-disqus">Disqus</span></a>
<!--?php endif; // comments_open ?-->

I also wanted to remove the author section at the bottom as I am the only person who writes on my site. I did this by removing the code below from the content-single.php file.

<footer class="post-footer"><section class="author"> <h4></h4>   </section></footer>``` You may also wish to disable auto updates, all my handy work was destroyed when the theme auto updated. You can do this by editing the code below from this:

// Enable automatic theme updates
add_filter( ‘auto_update_theme’, ‘__return_true’ );

to this:

// Enable automatic theme updates
add_filter( ‘auto_update_theme’, false );
I’d previously used a really complex theme with a pagebuilder from Swift Ideas. Because of the page builder I had to go through and manually remove lots of code that it had generated. This is something to bear in mind when using the themes that come bundled with pagebuilders. They are great until you don’t want to use them anymore.

If you want to go down the same route and need some help, let me know in the comments.

image: Artur Pokusin

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.