Creating Child Themes for ClassiPress

If you plan to make any modifications to ClassiPress, you should always do it with a child theme. Never modify the code in the theme folder. It will almost always result in problems in the future.

To create even the simplest child theme, you should have a basic understanding of HTML and CSS. It would be helpful to know a little about child themes for WordPress. You should also know how to add files to your hosting site. If you can handle that, then you’re ready for this tutorial.

If it sounds like too much work for you, you might consider purchasing a ready made child theme in our Marketplace. There are a few very attractive options to choose from.

Creating a Child Theme

1. In the themes folder (/wp-content/themes/), create a new folder named classipress-child or a name of your choice.
2. Inside the new child theme folder, create two new files. style.css and functions.php
3. Add the following header to the child theme style.css

   /* Theme Name: My ClassiPress Child Theme Version: 1.0 Description: A child theme for ClassiPress, classified ads theme. Author: Your Name Author URL: http://www.your-url.com Template: classipress */

   The most important line here is “Template: classipress”. It tells WordPress that ClassiPress is the parent for your child theme. After ‘Template:’ you must add the name of the parent theme – in this case ‘classipress’. The theme name is case-sensitive and should be all lowercase.

4. Add the following code to functions.php

   <?php function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

   This code loads the ClassiPress stylesheet so your child theme inherits it.

   Upload your child theme and activate it. Doing this on your computer (localhost) first, makes it easier to test and refresh. Now try viewing your localhost site. Everything should look like the original ClassiPress theme. That’s a good sign.

   If your site is completely unstyled, that means the parent style (code you pasted into your functions.php file) isn’t loading the ClassiPress stylesheet correctly and will look like this.

Styling

To make style changes, first you need to identify the CSS classes used throughout ClassiPress. We suggest using the tools available on current browsers like Chrome or Firefox HTML inspectors. They allow you to inspect any HTML element and see it’s classes and attributes.

Below are a couple of examples to get started with.

Style featured ads
Let’s say you want featured ads to pop on ad lists. A yellow background and yellow border would make those ads stand out. All you have to do is add the following styles to your child theme.

.featured .post-block {
    background: #FFFFE0;
}
.post-block-out.featured {
    border: 1px solid #E6DB55;
}

Your theme would now look like this screenshot.

Changing Fonts
Let’s change the font. We’ll use something outrageous so we can easily see the results. Let’s use Jokerman, a free font. Here’s a screenshot to show you how the final result will look. (Please note: We advise using web-standard standard fonts for best results).

.container {
    font: 12px/1.5em Jokerman;
}
h2 {
    font: 20px/1.2em Jokerman;
}

Scrolled bar
You can do more than change colors. You can improve your layout and usability with styles. Maybe you want the userbar (this is the bar at the top of the page with login and register links) to stay on the top edge of the browser window. With a little CSS tweaking…

.header_top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}
 
html {
    margin-top: 32px;
}

You will need to disable WordPress bar to make this happen correctly. You can do this in “ClassiPress > Settings > Advanced”.

As you can see with thes examples, you can change almost any part of your ClassiPress site.

Functionality

You can also use child themes to change some of the functionality of ClassiPress. Before we start, let’s take a couple of extra minutes to prepare. Inside the child theme folder, create a PHP file named ‘functions.php’. This file will allow us to override some of ClassiPress’ primary functions.

Custom themed login pages
Let say you don’t want to use the themed login pages ClassiPress provides. Instead, you want to remove them completely and have WordPress default pages, or use “Theme My Login” plugin. All we need to do is remove ‘app-login’ theme support.

function childtheme_remove_login_pages() {
    remove_theme_support( 'app-login' );
}
add_action( 'appthemes_init', 'childtheme_remove_login_pages' );

Landscape thumbnails
Want to change the square thumbnails in ClassiPress to something more horizontal? Add this to the functions.php file:

function childtheme_landscape_thumbnails() {
    add_image_size( 'ad-thumb', 100, 75, true );
}
add_action( 'appthemes_init', 'childtheme_landscape_thumbnails' );

And change the following CSS rules:

.content_res img.attachment-ad-thumb {
    max-width: 100px;
}
.post-block .post-right {
    max-width: 433px;
}
.post-block img.attachment-medium {
    width: 100px;
    height: 75px;
}

And here’s the result: landscape thumbnails.

Please note that if you change the thumbnail dimensions, you should regenerate thumbnails on your site by using “Regenerate Thumbnails” plugin.

Note: ‘featured’ CSS class and new themed login pages were added in ClassiPress 3.2

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.