PremiumPress Child Themes - The Basics
What are Child Themes?
Child themes are 'extra designs' for your PremiumPress theme, for example, if you build a child theme for ShopperPress then you would be creating a new shopping cart design for your ShopperPress website.
Why should i build a Child Theme?
Creating a child theme has a number of advantages, these includes;
- Child theme design files will not be overwritten with theme updates.
- Child themes can be exported, shared and used again on other PremiumPress themed websites.
- Child themes allow you to modify core code without modifing the core files.
- Child themes can extend the funcationality of the existing theme, allowing you to add-on new features.
Who can build Child Themes?
Anyone can build a child theme, however, you will require a good understanding of Wordpress, PHP and HTML.
Where are Child Themes stored?
All child themes are stored within the PremiumPress 'themes' folder, for example, if you are using the ShopperPress theme, Child Themes would be located: /wp-content/themes/shopperpress/themes/
Child Theme Folder Structure
What files make up a child theme?
For a child theme to be detected by the system it must follow a few basic rules and contain a few basic files.
- /premiumpress-child-theme-one/
- /premiumpress-child-theme-one/screenshot.png
- /premiumpress-child-theme-one/images/
- /premiumpress-child-theme-one/images/logo.png
- /premiumpress-child-theme-one/css/
- /premiumpress-child-theme-one/css/styles.css
1. Folder Name
Child Theme folder names must start with either 'premiumpress' or the name of the PremiumPress theme, such as 'shopperpress'. For example, 'premiumpress-child-theme-one' or 'shopperpress-child-theme-one'.
The difference between the two is that 'shopperpress-child-theme-one' would only be visible within the ShopperPress system where as 'premiumpress-child-theme-one' could be used within all PremiumPress themes. This is useful if you are designing a child theme suitable for all PremiumPress themes.
2. Images Folder Name
Within your child theme there should be images folder, this typically is named 'images'. This folder will store the location of your child theme images. Example structure: premiumpress-child-theme-one/images/
The child theme logo will be generated by default from the file 'logo.png' which should be included within this folder. Best sizes are: W:350px; H:100px
3. CSS (stylesheet) Folder Name & Default Stylesheet
Within your child theme there should be a folder to store your style sheets, this typically is named 'css'. The name of your default style sheet should be 'styles.css' and will be automatically loaded by the system when the core theme is activated.
Example struture: premiumpress-child-theme-one/css/styles.css
4. Screenshot .PNG
A file which contains a screenshot of your child theme should be included so the user can preview the theme before selecting it. the filename should be 'screenshot.png' and be no bigger than 200px width.
Adding Theme Design Files
All theme files should be added within the main child theme folder. Typcially theme design files start with an underscore, such as "_single.php".
- /premiumpress-child-theme-one/
- /premiumpress-child-theme-one/_file1.php
- /premiumpress-child-theme-one/_file2.php
- /premiumpress-child-theme-one/_file3.php
How does the system use my files?
All theme design files start with an underscore, for example "_single.php", when the core theme loads it will first check to see if a design file with the same name exists within your child theme, if it does, this will be loaded instead of the core theme design file.
For example, the "_single.php" file refers to the product page in ShopperPress, to replace this page with your own you add a file named "_single.php" in your Child Theme folder.
- /premiumpress-child-theme-one/
- /premiumpress-child-theme-one/_single.php
You can see a list of all the core theme design files in this tutorial: Understanding which PremiumPress theme files to edit
You can test it works by simply coping on of the design files into your child theme folder.
Custom Functions
Adding custom functions.
A functions file allows you to add-on your own PHP functions that are loaded when the core theme is loaded and before the theme files are displayed. The functions file name is "_functions.php".
- /premiumpress-child-theme-one/
- /premiumpress-child-theme-one/_functions.php
Hooks and Filters
Hooks
Hooks allow you to inject code into your webiste. If you hook into an page item you are essentially adding code into the page for display purposes.
Filters
A filter allows you to filter content before its displayed or stored within the database. For example if you filter a description, you are could remove words and phrases before its displayed.
Wordpress Hooks & Filters
The majoriy of hooks and filters are provided by Wordpress core. You can find a list useful resources below;
Theme Layout Hooks
1.Page Hooks
- premiumpress_top
- premiumpress_bottom
2.Header Hooks & Filters
- premiumpress_header_before
- premiumpress_header_inside - filter
- premiumpress_header_after
3.Menu Hooks & Filters
- premiumpress_menu_before
- premiumpress_menu_inside - filter
- premiumpress_menu_after
4.Sub Menu Hooks & Filters
- premiumpress_submenu_before
- premiumpress_submenu_inside - filter
- premiumpress_submenu_after
5.Page Hooks
- premiumpress_page_before
- premiumpress_page_after
6.Content Hooks
- premiumpress_content_before
- premiumpress_content_after
7.Left Sidebar Hooks
- premiumpress_sidebar_left_top
- premiumpress_sidebar_left_bottom
8.Middle Hooks
- premiumpress_middle_top
- premiumpress_middle_bottom
9.Right Sidebar Hooks
- premiumpress_sidebar_right_top
- premiumpress_sidebar_right_bottom
10.Footer Hooks & Filters
- premiumpress_footer_before
- premiumpress_footer_inside - filter
- premiumpress_footer_after
Login & Registration Page Hooks
Login Page
- premiumpress_login_top
- premiumpress_login_inside - filter
- premiumpress_login_bottom
Register Page
- premiumpress_login_top (same as login)
- premiumpress_register_inside - filter
- premiumpress_login_bottom (same as login)
This plugin demonstrates how to use the hooks above to add fields to the registration and account page. Download: http://www.premiumpress.com/forums/topic/custom-registration-fields
Forgotten Password Page
- premiumpress_login_top (same as login)
- premiumpress_password_inside - filter
- premiumpress_login_bottom (same as login)
Account Page Hooks
- premiumpress_account_top
- premiumpress_account_bottom
- premiumpress_account_options
- premiumpress_account_details
- premiumpress_account_details_filter - filter
Example Code & Plugin
This plugin demonstrates how to use the hooks above to add fields to the registration and account page. Download: http://www.premiumpress.com/forums/topic/custom-registration-fields
Packages Selection Page Hooks
- premiumpress_packages_before
- premiumpress_packages_inside - filter
- premiumpress_packages_after
Step 1. Page Hooks
- premiumpress_packages_step1_before
- premiumpress_packages_step1_fields - filter
- premiumpress_packages_step1_after
Step 2. Page Hooks
- premiumpress_packages_step2_before
- premiumpress_packages_step2_after
- premiumpress_upload_edit - filter
- premiumpress_packages_step2_images - filter
Step 3. Page Hooks
- premiumpress_packages_step3_before
- premiumpress_packages_step3_after
- premiumpress_packages_step3_inside_payment
- premiumpress_packages_step3_inside_updated
Example Code & Plugin
This plugin demonstrates how to use the hooks above to customize the submission form. Download: http://www.premiumpress.com/inc/premiumpress_submission.zip
Item Hooks
- premiumpress_item (will replace the content in: _item.php)
Example Item Plugin
This plugin shows you how to customize the gallery display item using the hook above. Download: http://www.premiumpress.com/inc/premiumpress_item.zip
Example Menu Plugin
This plugin shows you how to hook into the theme menus to create your own menu system.
Download: http://www.premiumpress.com/inc/premiumpress_megamenu.zip
Class File Filters
The class file takes in values as an array. The below list shows you what the values of the array would be used for.
Upload Tool Filters
- premiumpress_upload_delete ($post_id, $imagename,$user_id)
- premiumpress_upload_edit ($post_id)
- premiumpress_upload ($file)
- premiumpress_upload_return ($file)
Example image plugin using the above hooks can be found here.
Post
- premiumpress_post ($type) - add/edit
- premiumpress_post_data ($id, $postid, $user_ID)
- premiumpress_post_delete ($User_ID, $postid)
- premiumpress_post_validate
Images
- premiumpress_image ($data,$type="m")
- premiumpress_image_check ($img,$ex="thumb",$addedSize="")
- premiumpress_post_delete ($User_ID, $postid)
- premiumpress_post_validate
Banner Filters
- premiumpress_banner ($type,$return=false)
- premiumpress_bannerZone ($catID,$return=true)
Admin Hooks
- premiumpress_admin_setup_left_column
- premiumpress_admin_setup_right_column
Example Plugin
Here is an example plugin using the hooks above to limit the lenght of the post excerpt and place a box in the admin area. Download: http://www.premiumpress.com/forums/topic/excerpt-length-plugin/
Payment Gateway & Callback Hooks
Gateways Array
- premiumpress_admin_payments_gateways - filter list of gateways
Callback Page
- premiumpress_callback_paymentstatus - filter
- premiumpress_callback_thankyou
- premiumpress_callback_pending
- premiumpress_callback_error
Example Payment Gateway
This plugin example shows you how to develop your own payment gateways using the hooks and filters above.
Download: http://www.premiumpress.com/inc/premiumpress_paymentgateway.zip
OKPAY plugin example can be found here.
Home Page Widgets
Home Page Widgets
- premiumpress_admin_display_objects ($objects) array of current items
- premiumpress_admin_display_objects_options
- premiumpress_admin_display_objects_display ($item)- callback for display
Example Home Page Widget
This plugin shows you how to hook into the drag-drop admin system for creating new home page widgets using the hooks above.
Download: http://www.premiumpress.com/inc/premiumpress_objects.zip