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 a CSS file named ‘style.css’.
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 line to the child theme ‘style.css’, after the header:

   @import url("../classipress/style.css");

   This is the path to the ClassiPress style sheet. In our example, we are using a relative path. If you’re using another path/name, change it accordingly.

   Creating a child theme automatically disables the main ClassiPress style sheet. If you do not use “@import” to import the main ClassiPress style sheet and disable style sheets under “ClassiPress->Settings->Advanced”, your ClassiPress site will be completely unstyled.

A quick review
First, we created the child theme folder and a ‘style.css’ with a special header that informs WordPress about the theme parent name. Then, we imported the main ClassiPress style sheet.

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.

More soon

These are just a couple style and functionality modifications to get you started. You could create as many customizations as you please. We’ll post more tutorials that will help you modify and create changes to other elements in ClassiPress.

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.