The new look ClassiPress 4.x is here and the majority of our AppThemes users are happy with the appearance and functionality of it. If you wish to modify the look or functions of this AppTheme why not create your very own Child Theme.
Creating Child Themes for ClassiPress 4.x
If you plan to make any modifications to ClassiPress 4.x, 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 from our Marketplace.
Creating a Child Theme
Step 1) In the themes folder (/wp-content/themes/), create a new folder named classipress-child or a name of your choice.
Step 2) Inside the new child theme folder, create two new files. style.css and functions.php
Step 3) Add the following header to the child theme style.css
/*
Theme Name: ClassiPress Example Child Theme
Theme URI: http://appthemes.com/
Description: Example child theme for the ClassiPress theme
Author: AppThemes
Author URI: http://appthemes.com/
Template: classipress
Version: 0.1.0
*/
body, h1, h2, h3, h4, h5, h6 {
font-family: "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
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.
Step 4) Add the following code to functions.php.
<?php
/**
* ClassiPress child theme functions.
*
* BEFORE USING: Move the classiPress-child theme into the /themes/ folder.
*
* @package ClassiPress\Functions
* @author AppThemes
* @since ClassiPress 3.0
*/
/**
* Registers the stylesheet for the child theme.
*/
function classipress_child_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
// Disable the ClassiPress default styles.
//wp_dequeue_style( 'at-main' );
// Disable the Foundation framework styles.
//wp_dequeue_style( 'foundation' );
}
add_action( 'wp_enqueue_scripts', 'classipress_child_styles', 999 );
/**
* Registers the scripts for the child theme.
*/
function classipress_child_scripts() {
wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/general.js' );
// Disable the ClassiPress default scripts.
//wp_dequeue_script( 'theme-scripts' );
// Disable the Foundation framework scripts.
//wp_dequeue_script( 'foundation' );
//wp_dequeue_script( 'foundation-motion-ui' );
}
add_action( 'wp_enqueue_scripts', 'classipress_child_scripts', 999 );
/**
* This function migrates parent theme mods to the child theme.
*/
function classipress_child_assign_mods_on_activation() {
if ( empty( get_theme_mod( 'migrated_from_parent' ) ) ) {
$theme = get_option( 'stylesheet' );
update_option( "theme_mods_$theme", get_option( 'theme_mods_classipress' ) );
set_theme_mod( 'migrated_from_parent', 1 );
}
}
add_action( 'after_switch_theme', 'classipress_child_assign_mods_on_activation' );
// You can add you own actions, filters and code below.
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:
Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.