Developer

  • admin
  • 8 min read

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.

# Shortcodes

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]

// Gallery shortcode
[conversions_gallery]

// 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

All available 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.

Blog

  • 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.

Footer

  • conversions_before_footer – Executed before the <footer> opening tag.
  • conversions_after_footer – Executed after the </footer> closing tag.
  • conversions_footer_info – Shows footer credits, social media icons, etc.

General

  • wp_body_open – Executed after opening <body> tag.
  • conversions_before_content – Executed before opening <div class="content-wrapper"> tag.

Homepage

  • homepage – Executed inside the main homepage wrapper <div id="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_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_gallery – Executed before the gallery.
  • conversions_after_gallery – Executed after the gallery.
  • conversions_homepage_before_map – Executed before the Google Map block.
  • conversions_homepage_after_map – Executed after the Google Map block.
  • 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.

Navbar

  • conversions_navbar – Executed inside the nav wrapper <div id="wrapper-navbar">

Page

  • conversions_page_before_content – Executed after the opening <article id="post-…"> tag.
  • conversions_page_after_content – Executed at the end of the <article id="post-…"> tag.

Post

  • conversions_post_before_content – Executed after the opening <article id="post-…"> tag.
  • conversions_post_after_content – Executed at the end of the <article id="post-…"> tag.

# 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.

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.

FAB

  • conversions_fab – filter function for the FAB buttons. Is run before final output.
  • conversions_fab_cart – filter function for the FAB cart button.
  • conversions_fab_color – filter function for the FAB color.
  • conversions_fab_fullwidth – filter function for the FAB fullwidth button.
  • conversions_fab_fullwidth_icon – filter function for the FAB fullwidth button icon.

Fonts

  • conversions_font_family – filter function for font families.
  • conversions_resource_hints – filter function for fonts preload, preconnect, etc.

Footer

  • conversions_footer_credits – filter function for the footer credits.
  • conversions_footer_social_icons – filter function for the footer social icons.

Navbar

  • conversions_navbar_below_extras – filter for navbar below variant, extras include search, button, cart, ect.
  • conversions_nav_branding_output – filter function for navbar branding HTML output.
  • conversions_navbar_extras – filter function for navbar extras output (search, button, cart, ect.).
  • conversions_navbar_menu – filter function for navbar menu output.
  • conversions_nav_open_wrapper – filter function for navbar opening HTML wrapper.
  • conversions_nav_close_wrapper – filter function for navbar closing HTML wrapper.

Post

  • conversions_related_post_content – filter function for the related posts content (text).

# 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:

npm install

Below is a mini NPM cheatsheet to update, audit, and list all packages installed.

// Update production packages 
npm update

// Check for outdated packages 
npm outdated

// Install the latest (major) version of a package
npm install [-g] [<pkg>...]@latest --save

// NPM audit security report
npm audit

// List all packages
npm ls

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.

// Run all commands in sequential order:
grunt all

// Watch and compile Sass/JS automatically: 
grunt watch

// Compile Sass files into CSS:
grunt sass

// Concatenate CSS/JS files:
grunt concat

// Convert line endings to LF
grunt lineending

// Autoprefix CSS build files:
grunt postcss

// Creates a RTL stylesheet: 
grunt rtlcss

// Minify CSS build files:
grunt cssmin

// Minify Javascript build files:
grunt uglify

// Copy uncompilable files from /node_modules
// Used for webfont files (Font Awesome, etc.)
grunt copy

# Composer

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:

composer install

3. How to Use

Using PHPCS and WPCS from within your IDE

Command line

Run the phpcs command line tool on a given file or directory, for example:

phpcs --standard=WordPress wp-load.php