WP Customer Area has been built with modularity in mind. If you have some basic knowledge about WordPress theme development, you will find here some useful information to customize your private dashboard.
Theme supports
WP Customer Area provides a list of theme_supports. Please check the add_theme_support function documentation for more details.
Custom stylesheets
Tells WP Customer Area that this theme is providing its own stylesheet (will hide CSS settings from the plugin options page). This will disable the WP Customer Area skins.
add_theme_support( 'customer-area.stylesheet' );
Custom navigation menu
Tells WP Customer Area that this theme is already outputting the WP Customer Area navigation menu (will hide automatic navigation menu printing settings from the plugin options page).
add_theme_support('customer-area.navigation-menu');
Custom single templates
Tells WP Customer Area that this theme is providing single post templates for private content and containers (will disable the settings linked to ‘single post footer’ for the given post types).
add_theme_support('customer-area.single-post-templates', array(
'cuar_private_file', // Customize display in file single-cuar_private_file.php
'cuar_private_page', // Customize display in file single-cuar_private_page.php
'cuar_conversation', // Customize display in file single-cuar_conversation.php
'cuar_project', // Customize display in file single-cuar_project.php
'cuar_tasklist', // Customize display in file single-cuar_tasklist.php
));
Alternate custom single templates
Since 7.2.0
Sometimes you will need some more complex hierarchy for your single templates. That’s why we introduced the ability for you to create some others templates. When you’ll display a single private page, WP Customer Area will attempt to find these templates in your theme folder, in the following order :
- single-cuar_private_file-test.php
- single-cuar_private_file.php
- cuar-single.php
- cuar.php
- single.php
Note: In this example, we assumed that the current private file had “test” as a slug.
Grabbing the whole area with a single function
Since 7.2.0
Custom single templates were initially designed to let you build your own unique design, so you had to use all our different function to display the menu, the sidebar, the footer, etc..
However, some of you were needing to use some custom single templates, just to create a special full-width template that should look like the page template, so we introduced a new function that you can use on your custom single templates that will print the whole area at once. This function is called cuar_the_single_content(); and should be used instead of the_content(); in one of the following template :
- single-cuar_private_file-test.php
- single-cuar_private_file.php
- cuar-single.php
- single.php
Note: In this example, we assumed that the current private file had “test” as a slug.
Custom pages templates
Since 7.2.0
Like for custom single templates, we introduced the ability for you to create different templates files in your theme folder. When you’ll display a standard listing private page, WP Customer Area will attempt to find these templates in your theme folder, in the following order :
- page-dashboard.php
- page-550.php
- cuar-page.php
- cuar.php
- page.php
Note: In this example, we assumed that the current private file had “test” as a slug and 550 as ID.
Custom libraries
Tells Customer Area that this theme is already providing its own styles and javascript files for the jquery.select2 library (otherwise, this library’s files would be taken from the Customer Area plugin folder).
This is also a way to disable those libraries if you want to use an alternative. In that case, you should also take care to write the corresponding javascript code and include the proper files (JS/CSS). For instance, the following line tells the plugin that we will take care of including the files required for the jQuery Select2 script. However, the plugin is still responsible for writing the markup to enable the jQuery Select2 library on the appropriate elements.
add_theme_support('customer-area.library.jquery.select2', array('files'));
If we want to disable jQuery Select2 and replace it with our own alternative, we should tell the plugin that not only we don’t want it to include the files, but also that we don’t want it to output any related markup.
add_theme_support( 'customer-area.library.jquery.select2', array( 'files', 'markup' ) );
Other libraries that may be also disabled/taken care of. If we don’t specify an array as a parameter, the plugin assumes that the theme is taking care of everything for that library (files, markup, …).
add_theme_support('customer-area.library.bootstrap.dropdown');
add_theme_support('customer-area.library.bootstrap.transition');
add_theme_support('customer-area.library.bootstrap.collapse');
Hint: Check the file /plugins/customer-area/src/core-classes/plugin.class.php at the function enable_library to get a full list of librairies used by WP Customer Area.
Custom styling
Since 7.0.0
If you want to customize WP Customer Area CSS styles, and if you have some basic theme development skills, you should notice that we are using a custom selector: body.customer-area-active .cuar-css-wrapper. We are using it to reset all CSS styles in the area to prevent others themes or plugins to interfere with the interface.
It means that if you want to edit something inside the Customer Area, you will need to prefix all your CSS rules with our selector. Integration of others plugins or skins/theme CSS customizations can be done by recompiling the CSS files using a LESS compiler into the WPCA CSS wrapper selector.
body.customer-area-active .cuar-css-wrapper {
@import (less) "my-plugin/styles.css"; // Or paste the content file instead if using an online LESS compiler
}
So all the rules can look something like:
body.customer-area-active .cuar-css-wrapper .my-plugin-title {
font-size: 2em;
}
body.customer-area-active .cuar-css-wrapper .my-plugin p {
margin-bottom: 15px;
}
Since 7.10.0
You can now disable CSS resets in order to allow third-party plugins integration into the area. It will allow you to integrate components that require external CSS stylesheets.