Robert DeVore

Clean Blog

·

Robert

Today, I am releasing my first official open source WordPress theme. I’ve worked with WordPress for years, but have never created anything that is free to download … until now.

Being able to create open source projects, like WordPress themes, has always weighed heavy on my mind. Without WordPress itself, and the free themes released for it, I am not sure where I would have ended up in my professional career.

Open source saved my life.

I have always wanted to give back as much as possible. With the release of the Clean Blog theme, today is the first step in this never-ending process.

Clean Blog is a personal blogging theme, free of clutter, with a focus on the writers words while not sacrificing visual quality.

It is a mash-up of the Clean Blog Bootstrap template from StartBootstrap, and Underscores WordPress theme from Automattic, both of which are open source projects.

When I began thinking of a theme that I’d like to build, I knew that I wanted to base the main WordPress codes off of the Underscores theme. I also knew that I wanted to build a blog template that I would personally want to use.

Finding the Clean Blog template from StartBootstrap was an accident, but a happy one. As soon as I seen the template, I immediately started building out the WordPress theme.

Then I stopped writing code for 5 months.

The itch to blog never left, and the desire to release my own open source themes as way to give back to the community that allowed me to be my own boss was still burning in me.

Fast forward to three days ago and I was cleaning up my bookmarks and came across the Clean Blog template again. It was like a bolt of lightning hit me and I immediately got to work, starting over from scratch.

Three days later and the Clean Blog WordPress theme is here.

Demo & Download

First, check out the live demo.

If you like it, you can download the Clean Blog theme on Github. I submitted it to the official WordPress repository and will update the download links below when it gets approved.

Github Repository · Download

Under the hood

The simplicity of this theme is what I love most about it. No sidebar, no excess clutter, easy to read content and a bold featured image to instantly grab your readers attention.

Yet, I did want to give some options in the Customizer that would allow you to make the theme uniquely your own.

Customizer options
Customizer options

One of my favorite parts of this theme is the large featured images in the header of the home page, posts and pages. It’s an attention grabber and adds some visual appeal to a theme that is otherwise minimalist and void of design.

Home intro box

All posts and pages have the option to add your own featured image into the header, but the home page has it’s own section to edit in your own image, title and subtitle in the Customizer.

customizer-home-intro

Social links

In the themes footer, there’s an area to link your various social profiles. The theme comes built with 10 of the most widely used social websites.

customizer-social-links

Link (hover) color

The Clean Blog theme comes pre-set with the same color that the Bootstrap version of the theme uses. But I don’t believe in making you change color codes in CSS to have the color you want. So, in the Customizer you are able to pick your own color.

customizer-link-color

Display options

This section of the Customizer lets you choose if you want to show a post excerpt on the home page. It defaults to hidden, like the original Clean Blog bootstrap template.

You can also add in your own copyright message. Would it be nice if you kept the links to WordPress and my website? Sure.

Is it required? Not at all.

customizer-post-excerpts

Credits & Thank-you’s

Without the open source projects below, this theme would have never came together the way that it has. I’d like to say thank you to everyone who was indirectly a part of this WordPress theme’s release.

Start Bootstrap

The design of this theme was in large part thanks to the Clean Blog template that David Miller from Start Bootstrap released.

They’ve personally released a Jekyll theme based on this template and also have user submitted versions for Ghost and Anchor CMS. This WordPress version will be in good company.

Underscores

There’s too many people to thank personally in this post, but the whole team behind the Underscores WordPress theme put out a great starter theme for WordPress. With it’s help, I was able to take the Bootstrap template from Start Bootstrap and build an amazing WordPress theme.

Subtitles plugin

Philip Arthur Moore released a plugin that makes this theme really come to life. In the original template from Start Bootstrap there are subtitles for each article, but WordPress has no way to easily manage this … until the Subtitles plugin came along.

The Clean Blog WordPress theme will work without this plugin installed, which you can see by viewing any of the posts in the demo without a subtitle. But, I highly recommend using this plugin on your website.

Also, I would like to say thank you to Philip for his lighting fast response on Github when I was having an issue with the plugin. Even if it was just me overlooking the answer which was already in the release notes 🙂

Theme customizer codes

A large part of this theme’s awesomeness, in my opinion, is the ease of editing various options through the theme Customizer. This is where Tom Mcfarlin’s theme customizer codes came to the rescue. His code was clean and easy to manipulate for what I needed with this theme.

WP Test content

When I built this theme, I wanted to make sure I had all of the various content types covered, and the WP Test example content gave me everything I needed.

I imported their test content and found a few different issues with my code, and promptly fixed them. So, thank you Michael Novotny for putting this test content package together.

More thank you’s

Thank you to Dave Gandy for the Font Awesome iconic font set that this theme uses for the social profile links in the footer. With Font Awesome being included in the theme, it means you can add any of their icons to your content, too.

When adding the show/hide option for the excerpts into the theme customizer, I needed to be able to call a CSS class in order for the live preview to work properly. Thank you to c.bavtova for the code snippet used to add a CSS class to the excerpt’s paragraph wrap.

The road ahead

Thank you for taking the time to read this entire release post.

Thank you for downloading and checking the theme out, and thank you for any issues you find with it that you report through Github.

Up next, I have a few ideas for this theme that I’d like to implement. I also have plans on a couple more WordPress themes, and possibly a plugin or two.

Besides WordPress code, I also plan on releasing other open source work, but that’s information for a later post.

For now, take the Clean Blog theme for a test drive, download it (Github Repository · direct download), and let me know how you like it.

Update 3-16-2016: After finishing this article, you can read the most recent updates to the theme since it’s official release by viewing the Recent Projects post from March 16, 2016.

Comments

52 responses to “Clean Blog”

  1. Sergiu Tripon Avatar
    Sergiu Tripon

    Hi,

    I installed this theme in WordPress, and everything seems fine apart from that I seem to be missing the contact page. Is it not included in the theme or what do I have to do in order to get it? If it isn’t, how do I go about adding a contact page?

    Thank you,
    Sergiu

    Reply
    2. John Avatar
      John

      I want to thank you in advance for making a wordpress version of this bootstrap template! I intend on using this soon!

      Reply
        1. Christian Avatar
          Christian

          Robert, this blog theme is great! Thanks for all of the hard work it took to put it together!

          I am having a problem as I’m trying to install the child theme. After I install the child theme, this message displays: “This theme requires a parent theme. Checking if it is installed…
          The parent theme could not be found.”

          The parent theme was installed successfully so I’m not really sure what the problem is. Any help would be much appreciated!

          Reply
          1. Robert DeVore Avatar
            Robert DeVore

            Thanks, I am glad you like it.

            When you upload the Clean Blog theme, the folder name needs changed from cleanblog-master to cleanblog

            Someone on github had a similar issue and this fixed it for them.

            That should fix the issue, if not let me know and I can take another look.

          2. Christian Avatar
            Christian

            Thanks for the quick reply.

            I did look at the other person’s issue on Github and it is the same problem. I tried your recommendations, but it didn’t work. I changed the parent theme to clean-blog.zip and cleanblog.zip. I also changed the child theme to clean-blog-child.zip and cleanblog-child.zip. FYI, I’m doing uploading from the WordPress dashboard as well.

  5. john Avatar
    john

    I was wondering, where does the line cleanblog_header( ) pull its content from?

    Reply
  8. pascal Avatar
    pascal

    Thanks for the great theme!
    Maybe someone can help me with a problem: I tried making the intro-header image fullscreen, but didn’t succeed.
    How would you do that?

    Reply
  9. Josh Avatar
    Josh

    Hi Robert, Thank you for making this theme!

    I was wondering how I can customize the header to remove the horizontal rule between it and the subtitle?

    Reply
  10. Fernando Avatar
    Fernando

    I rename the folder but the theme cut the page. WordPress 4.7.2
    What is wrong?

    Reply
  12. Lawrence Avatar
    Lawrence

    Hey Robert, thanks so much for this awesome theme! One question: is there a way I could get an image to show up as an excerpt for the list of posts? Additionally, any way I could add a centered “Read More” button to each excerpt as well? Thanks!

    Reply
    1. Robert DeVore Avatar
      Robert DeVore

      Thanks, I’m glad you like the theme!

      Both of these options are being worked on for an upcoming release. Not sure of an exact date, but soon. They’ll be available as options like the show/hide excerpts, etc.

      Reply
      1. Lawrence Avatar
        Lawrence

        Hey Robert, thanks so much for the quick reply, I didn’t really expect that!

        A couple additional questions which probably have a (relatively) quick answer:

        (1) Is there any way I can get your theme in its entirety as the default (with all the individual posts on the home page outlined, along with the 404 search form)? There are a number of posts on your home page that I want to use immediately, but have to build from the ground up, assigning templates and so forth as well.

        (2) For the social links, when I enter in a link (for Twitter in this example), the hyperlink goes to the following format: mydomainname.com/twitter.com/username. How can I have it so that mydomainname.com is not automatically prefixed onto the URL?

        (3) How can I get it so that the 404 search form will funnel into the Search Results page? When I use your theme, it looks like it just does a continuous loop back into the 404 search form.

        Thanks so much!

        Reply
        1. Lawrence Avatar
          Lawrence

          And lastly! When I view the theme on my iPhone, the featured image for every page is super zoomed in. Is there a simple CSS fix I could implement universally to remedy this?

          Reply
        2. Robert DeVore Avatar
          Robert DeVore

          1. You mean an export of the demo content (posts, pages, etc) that’s showing on this link? I don’t have an export of the content but can put one together and publish an outline on how to set it up, what plugins are being used for the demo page builder content, etc.

          2. When adding the links, make sure you put the whole URL, including the https:// in front of the www. So it’d be https://www.twitter.com/yourusername and the same for the other profile URL’s too.

          3. This may be happening based on the text you’re searching for. I just tried searching for “hello world” (without the quotes around it) at this link, and it brings up results.

          4. For the iPhone image issue, do you have a URL I can look at so I can see what you’re referring to?

          Thanks!

          Reply
  13. Rafael Avatar
    Rafael

    Hi Robert,

    this is a very cool theme, congrats!

    I’m just starting with WP and having a hard time positioning and styling the search field (I’m using get_search_form();) at the home page. Can you recommend me a nice way to do it?

    thanks.

    Reply
    1. Robert DeVore Avatar
      Robert DeVore

      Yes, you can do that in your admin dashboard by going to Appearance -> Customize -> Display Options , then turn the parallax option on.

      Reply
    1. deviorobert Avatar
      deviorobert

      You could create a child theme and customize it to add a sidebar and also add more to the footer (there’s already a copyright and social media links in the filter).

      Reply
  20. Ali Avatar
    Ali

    Hello Robert,
    Thanks for this best and clean theme. I want to know how can i add menu in footer also i want to add dmca badge in footer too.
    Regards

    Reply
    1. deviorobert Avatar
      deviorobert

      Thanks, I’m glad you like it!

      You can add items into the footer via one of the action hooks in the footer.php file

      • cleanblog_footer_top
      • cleanblog_footer_bottom

      You can add a custom function to either of these hooks in your child theme’s functions.php file (or custom plugin).

      Reply
  21. Rahul Avatar
    Rahul

    Hi
    I installed this theme but have a problem with featured images. Featured images i set on posts are appearing correctly on desktop and android phones. But when viewing my site from ipad, the featured images on posts are too zoomed up.

    What is the ideal size to resize images for this theme?
    please help

    Reply
    1. deviorobert Avatar
      deviorobert

      Thanks for using the theme, I appreciate it!

      I believe this is a CSS issue for mobile displays and I’m working on an update to push out that will fix it.

      Reply
      1. Rahul Avatar
        Rahul

        Please fix this problem as soon as possible. I really like this theme and want to keep using it.
        This is the problem in more detail- The featured images that I set on posts appear correctly on desktop and android phones without any problem. But when I visit the site from my ipad the images appear too zoomed in that i can’t even identify the image.

        If you visit the site from computer or android phone the featured image appears correctly but when visiting from ipad the image is super zoomed in.

        I really love your theme. It is better than all paid themes out there.
        Please fix it fast.
        Thanks in advance

        Reply
        2. deviorobert Avatar
          deviorobert

          A new released will be pushed out asap. If you have the theme installed, you’ll receive an update notification in your dashboard.

          Reply
    1. deviorobert Avatar
      deviorobert

      This is a theme built without a sidebar, so no widgets display on the screen and the content remains front and center.

      Reply

Leave a Reply

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