Conversions theme contains many hooks: actions and filters. This makes it highly extendable and easy to customize. All of the available hooks are listed below.
Many of the Homepage elements are modular and can be used as on other pages with shortcodes. The WordPress repository doesn’t allow themes to include shortcodes so you will have to add the following functions to your install. You can view what the shortcodes will appear like here: shortcodes.
Using the Shortcodes
// Clients shortcode [conversions_clients] // Counter shortcode [conversions_counter] // FAQ shortcode [conversions_faq] // Google Map shortcode [conversions_google_map] // Icon Features shortcode [conversions_icon_features] // Image Features shortcode [conversions_img_features] // Pricing tables shortcode [conversions_pricing] // Single Feature shortcode [conversions_single_feature] // Social Icons shortcode [conversions_social] // Team shortcode [conversions_team] // Testimonials shortcode [conversions_testimonials]
# Conversions Hooks: Actions
add_action() functions used in the Conversions theme are listed below. You can read more about
add_action() and what parameters can be used on the WordPress Developer Resources site here.
wp_body_open– Executed after opening
conversions_before_content– Executed before opening
conversions_navbar– Executed inside the nav wrapper
homepage– Executed inside the main homepage wrapper
conversions_homepage_before_clients– Executed before the client logo carousel.
conversions_homepage_after_clients– Executed after the client logo carousel.
conversions_homepage_before_counter– Executed before the counter blocks.
conversions_homepage_after_counter– Executed after the counter blocks.
conversions_homepage_before_map– Executed before the Google Map block.
conversions_homepage_after_map– Executed after the Google Map block.
conversions_before_icon_features– Executed before the featured icon blocks.
conversions_after_icon_features– Executed after the featured icon blocks.
conversions_before_img_features– Executed before the featured image blocks.
conversions_after_img_features– Executed after the featured image blocks.
conversions_before_single_feature– Executed before the single feature content.
conversions_after_single_feature– Executed after the single feature content.
conversions_homepage_before_woo_products– Executed before WooCommerce products.
conversions_homepage_after_woo_products– Executed after WooCommerce products.
conversions_homepage_before_edd_products– Executed before Easy Digital Downloads products.
conversions_homepage_after_edd_products– Executed after Easy Digital Downloads products.
conversions_homepage_before_pricing– Executed before the pricing tables.
conversions_homepage_after_pricing– Executed after the pricing tables.
conversions_homepage_before_team– Executed before the team blocks.
conversions_homepage_after_team– Executed after the team blocks.
conversions_homepage_before_testimonials– Executed before the testimonial carousel.
conversions_homepage_after_testimonials– Executed after the testimonial carousel.
conversions_homepage_before_news– Executed before the latest news posts.
conversions_homepage_after_news– Executed after the latest news posts.
conversions_homepage_before_blank– Executed before the blank section fields.
conversions_homepage_after_blank– Executed before the blank section fields.
conversions_page_before_content– Executed after the opening
conversions_page_after_content– Executed at the end of the
conversions_post_before_content– Executed after the opening
conversions_post_after_content– Executed at the end of the
conversions_loop_before– Executed before all posts on blog.
Call to Action
conversions_before_cta_content– Executed before the call to action section content.
conversions_after_cta_content– Executed after the call to action section content.
conversions_before_footer– Executed before the
conversions_after_footer– Executed after the
conversions_footer_info– Shows footer credits, social media icons, etc.
# Conversions Hooks: Filters
Below are some filter functions and examples that are available within the Conversions theme. You can read more about
add_filter() and what parameters can be used on the WordPress Developer Resources site here.
conversions_nav_open_wrapper– filter function for navbar opening HTML wrapper.
conversions_nav_branding_output– filter function for navbar branding HTML output.
conversions_navbar_menu– filter function for navbar menu output.
conversions_navbar_extras– filter function for navbar extras output (search, button, cart, ect.).
conversions_navbar_below_extras– filter for navbar below variant, extras include search, button, cart, ect.
conversions_nav_close_wrapper– filter function for navbar closing HTML wrapper.
conversions_related_post_content– filter function for the related posts content (text).
conversions_footer_credits– filter function for the footer credits.
conversions_footer_social_icons– filter function for the footer social icons.
conversions_font_family– filter function for font families.
conversions_resource_hints– filter function for fonts preload, preconnect, etc.
Easy Digital Downloads
conversions_edd_archive_classes– filter function for EDD class list on archive pages.
conversions_edd_singular_price– filter function for EDD singular product prices.
# Developing with NPM & Grunt
Conversions uses NPM packages for dependencies such as Bootstrap, Font Awesome, Slick, Grunt modules, and so on. All packages can be found in the
/node_modules folder. Grunt is used as a taskrunner to compile SCSS, concatenate CSS/JS, autoprefix CSS, minify, and copy files. The following explains the usage and workflow.
1. Prerequisites: Install Node.js, Ruby, and Sass
To start with, you need Node.js installed on your computer globally. If you’ve already done this skip this. If not: You have to install Node.js (comes with NPM) before you can proceed. To install Node.js visit the node.js website for the latest installer for your OS. Download and install it.
Sass compiling tasks require you to have Ruby and Sass installed. If you’re on OS X or Linux you probably already have Ruby installed; test with
ruby -v in your terminal. When you’ve confirmed you have Ruby installed, run
gem install sass to install Sass.
2. Install via Git or Manually Download
Open a terminal go to the location where you want to install Conversions:
// Open a terminal go to the location where you want to install Conversions: cd path/to/location/ // If needed create the proper folder: mkdir conversions // Now pull Conversions via GitHub with: git clone https://github.com/jjs2484/conversions.git
3. Install NPM Dependencies
To install all dependencies listed in
package.json, open your terminal, browse to the location of your Conversions theme folder and run:
Below is a mini NPM cheatsheet to update, audit, and list all packages installed.
// Update production packages
Check for outdated packagesnpm outdated // Install the latest (major) version of a package npm install [-g] [<pkg>...]@latest --save // NPM audit security report npm audit //
List all packages
3. List of Running Grunt Commands
Gruntfile.js is located in the theme’s root directory and contains preconfigured Grunt tasks. Below is a short description of each task and the command to run them.
Conversions uses Composer for autoloading and PHP linting with the WordPress Coding Standards. Conversions has customized a few sniffs in the WPCS ruleset to allow for more modern syntax. You can find the custom ruleset in the
phpcs.xml file located in the root directory. The following explains how to get started with Composer.
1. Prerequisites: Install Composer
To start with, you need Composer installed on your computer globally. If you’ve already done this skip this. If not: visit the Composer website for the latest installer for your OS. Download and install it.
2. Install Composer Dependencies
To install all dependencies listed in
composer.json, open your terminal, browse to the location of your Conversions theme folder and run:
3. How to Use
Using PHPCS and WPCS from within your IDE
- PhpStorm: Please see “PHP Code Sniffer with WordPress Coding Standards Integration” in the PhpStorm documentation.
- Sublime Text: Please see “Setting up WPCS to work in Sublime Text” in the wiki.
- Atom: Please see “Setting up WPCS to work in Atom” in the wiki.
- Visual Studio: Please see “Setting up PHP CodeSniffer in Visual Studio Code“, a tutorial by Tom McFarlin.
- Eclipse with XAMPP: Please see “Setting up WPCS when using Eclipse with XAMPP” in the wiki.
phpcs command line tool on a given file or directory, for example:
phpcs --standard=WordPress wp-load.php