Configuration
The heart of the iPress theme is the configuration file. This controls:
- Theme setup – core WordPress settings such as theme support
- Load scripts, styles & fonts
- Initialise theme specific custom post-types & taxonomies
- Sets up navigation menus & sidebars
- Configures custom & generic images & media
- Interacts with plugin functionality, including WooCommerce, which is detailed in its own section.
The sections below will take you through the typical structure of the configuration file, located in the includes directory of the child and standalone themes, as well as examples of how it can be used in real world examples.
Debugging & development
The first section is the initialisation of the development or production state. The generic SCRIPT_DEBUG variable should be set in the WordPress wp-config.php file as detailed in the WordPress documentation. If this is set to true then the development state is activated, if not then the default production state is active in which case theme scripts and styles will be loaded in minified format.
Scripts, Styles & Fonts: Scripts
Next comes the first of three associated hooks. This loads the theme scripts as well as any associated plugin, library, or external scripts. It does this by loading scripts based on context as detailed below:
- ‘core’ – Core WordPress scripts, e.g. jQuery & React.
- ‘admin’ – Admin scripts, loaded into the WordPress admin UI only.
- ‘external’ – External scripts, loaded from 3rd party URLs & CDN, e.g. Bootstrap.
- ‘scripts’ – Main scripts loaded on all pages, library & plugin scripts, such as sliders & galleries.
- ‘page’ – Scripts associated with a specific page template, such as for those in the main script section.
- ‘post_type’ – Scripts associated with a particular pre-defined Post-Type, also includes in-built WordPress post-types.
- ‘taxonomy’ – Scripts associated with a particular defined Taxonomy & Term, also includes in-built taxonomies.
- ‘conditional’ – Scripts conditionally associated with callback funcitons
- ‘front’ – Scripts loaded on the front page only.
- ‘theme’ – Theme specific scripts containing core functionality.
- ‘login’ – Scripts loaded on the login page only
In addition all registered scripts can be associated with localised script blocks, as well as defined attributes.
Some examples of each of these are detailed below. In practice these would be combined into a single full return statement.
Core Scripts:
Core scripts are WordPress pre-registered script handles. These should be defined as an array of script handles.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
'core' => [ 'jquery' ],
];
} );
Admin Scripts:
Admin scripts are loaded into the WordPress admin UI. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Admin scripts: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ]
'admin' => [
'navigation' => [ IPRESS_ASSETS_URL . '/js/navigation' . $ip_suffix . '.js', [], null ],
'tinyslider' => [ IPRESS_ASSETS_URL . '/js/lib/tiny-slider.min.js', [], null ],
]
];
} );
External Scripts:
Loads scripts from external urls and CDN. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// External scripts: [ 'handle' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ]
'external' => [
'bs-popper' => [ 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js', [], '2.11.8', true ],
'bootstrap' => [ 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js', [ 'bs-popper' ], '5.3.2', true ],
'fontawesome' => [ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js', [], '6.5.1' ]
]
];
} );
Main Scripts:
Loads plugin and library scripts from the theme assets directory. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Main scripts: [ 'handle' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ]
'scripts' => [
'flickity' => [ IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ],
]
];
} );
Page Scripts:
Loads plugin and library scripts from the theme assets directory depending on the current page template loaded. These should be defined as an array of script definitions.
The path is required. It can either be a single page template or an array of page templates.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Page scripts: [ 'handle' => [ 'template', 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'page' => [
'flickity' => [ 'template_home.php', IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ],
'smoothscroll' => [
[ 'template-home.php', 'template-docs.php' ],
IPRESS_ASSETS_URL . '/js/lib/smoothscroll.min.js', [], null, true ],
]
];
} );
Post Type Scripts:
The post-type is required. It can either be a single registered post-type or an array of post-types.
Loads plugin and library scripts from the theme assets directory depending on the current post-type. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Post-Type scripts: [ 'handle' => [ 'post_type', 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'post_type' => [
'flickity' => [ 'gallery', IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ]
]
];
} );
Taxonomy Scripts:
The taxonomy is required. It can either be a single registered taxonomy or an array of taxonomy & term.
Loads plugin and library scripts from the theme assets directory depending on the current post-type. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Taxonomy scripts: [ 'handle' => [ 'post_type', 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'taxonomy' => [
'flickity' => [ 'gallery_type', IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ]
'flickity2' => [
[ 'gallery_type', 'photo' ],
IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true
]
]
];
} );
Conditional Scripts:
Loads plugin and library scripts from the theme assets directory depending on a functional callback. These should be defined as an array of script definitions.
The path is required. It can either be a single page template or an array of page templates.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Conditional scripts: [ 'handle' => [ (array|string)callback_fn, 'path_url', (array)dependencies, 'version' ] ... ];
'conditional' => [
'flickity' => [ 'callback_fn', IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ]
]
];
} );
Front Scripts:
Loads plugin and library scripts from the theme assets directory on the front page only. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Front page scripts: [ 'handle' => [ 'template', 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'front' => [
'flickity' => [ IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ],
]
];
} );
Theme Scripts:
Loads core scripts from the theme assets directory. By default this includes the theme app.js file These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The locale is not required. By default scripts are loaded in the footer. To load in the header the locale should be set to false.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Theme scripts: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ];
'theme' => [
'app' => [ IPRESS_ASSETS_URL . '/js/app.js', [ 'jquery' ], NULL ]
]
];
} );
Login Scripts:
Loads plugin and library scripts from the theme assets directory on the login page only. These should be defined as an array of script definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Login scripts: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ]
'login' => [
'flickity' => [ IPRESS_ASSETS_URL . '/js/lib/flickity.min.js', [], '2.2', true ],
]
];
} );
Localisation:
Defined script handles can be associated with an injected inline script block. By default the theme sets up some common paths which the main theme app.js file can access. These are arrays translated into JSON.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Localize scripts: [ 'handle' => [ 'name' => name, trans => function/path_url ] ]
'local' => [
'app' => [
'name' => 'app',
'trans' => [
'home_url' => home_url(),
'ajax_url' => admin_url( 'admin-ajax.php' ),
'rest_url' => rest_url( '/' )
]
]
],
];
} );
Attributes:
Scripts passed inside script tags via urls can be associated with a number of attributes which affect the way the scripts are loaded and dealt with by the browser: defer, async, integrity. Any defined script handle can be associated with these attributes which are injected into the script tag inside the browser. For example if a CDN script contains an integrity attribute to verify its source.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
return [
// Script attributes: integrity, defer
'attr' => [
'bs-popper' => [ 'integrity' => 'sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r' ],
'bootstrap' => [ 'integrity' => 'sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+' ],
'fontawesome' => [
'integrity' => 'sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==',
'defer' => true
]
]
];
} );
Example:
The script block used in the config file for this site.
// Register Scripts, Styles & Fonts: Scripts, override at lower priority
add_filter( 'ipress_scripts', function() use( $ip_suffix ) {
global $ipress_version;
// Set up scripts
return [
// Add core scripts, front-end
'core' => [ 'jquery' ],
// External CDN: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ]
'external' => [
'bs-popper' => [ 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js', [], '2.11.8', true ],
'bootstrap' => [ 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js', [ 'bs-popper' ], '5.3.2', true ],
'fontawesome' => [ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js', [], '6.5.1' ]
],
// Plugin scripts: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ]
'scripts' => [],
// Page scripts: [ 'label' => [ 'template', 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'page' => [
'smoothscroll' => [
[ 'template-docs-content.php', 'template-docs-content-list.php' ],
IPRESS_ASSETS_URL . '/js/lib/smoothscroll.min.js', [], null, true ],
'highlight' => [
[ 'template-docs-content.php', 'template-docs-content-list.php', 'template-features.php' ],
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js', [], null, true
],
'highlight-custom' => [
[ 'template-docs-content.php', 'template-docs-content-list.php', 'template-features.php' ],
IPRESS_ASSETS_URL . '/js/lib/highlight-custom.js', [ 'highlight' ], null, true
],
'lightbox' => [
[ 'template-docs-content.php', 'template-docs-content-list.php' ],
IPRESS_ASSETS_URL . '/js/lib/simple-lightbox.min.js', [], null, true
],
'gumshoe' => [
[ 'template-docs-content.php', 'template-docs-content-list.php' ],
IPRESS_ASSETS_URL . '/js/lib/gumshoe.polyfills.min.js', [], null, true
],
'docs' => [
[ 'template-docs-content.php', 'template-docs-content-list.php' ],
IPRESS_ASSETS_URL . '/js/lib/docs.js', [], null, true
],
'masonry' => [ 'template-pricing.php', IPRESS_ASSETS_URL . '/js/lib/masonry.pkgd.min.js', [], null, true ],
'pricing' => [ 'template-pricing.php', IPRESS_ASSETS_URL . '/js/lib/pricing.js', [], null, true ],
],
// Front page scripts: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'front' => [
'highlight' => [ 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js', [], null, true ],
'highlight-custom' => [ IPRESS_ASSETS_URL . '/js/lib/highlight-custom.js', [ 'highlight' ], null, true ],
'tinyslider' => [ IPRESS_ASSETS_URL . '/js/lib/tiny-slider.min.js', [], null, true ],
'tinyslider-custom' => [ IPRESS_ASSETS_URL . '/js/lib/tiny-slider-custom.js', [ 'tinyslider' ], null, true ],
],
// Theme scripts: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'locale' ] ... ];
'theme' => [
'navigation' => [ IPRESS_ASSETS_URL . '/js/navigation' . $ip_suffix . '.js', [ 'app' ], $ipress_version, true ],
'app' => [ IPRESS_ASSETS_URL . '/js/app' . $ip_suffix . '.js', [ 'jquery' ], $ipress_version, true ],
],
// Localize scripts: [ 'handle' => [ 'name' => name, trans => function/path_url ] ]
'local' => [
'app' => [
'name' => 'app',
'trans' => [
'home_url' => esc_url( home_url() ),
'ajax_url' => esc_url( admin_url( 'admin-ajax.php' ) ),
'rest_url' => esc_url( rest_url() ),
]
]
],
// Script attributes: integrity, defer
'attr' => [
'bs-popper' => [ 'integrity' => 'sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r' ],
'bootstrap' => [ 'integrity' => 'sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+' ],
'fontawesome' => [
'integrity' => 'sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==',
'defer' => true
]
]
];
} );
Scripts, Styles & Fonts: Styles
This loads the theme styles as well as any associated plugin, library, or external styles. It does this by loading style sheets based on context as detailed below:
- ‘core’ – Core WordPress styles, e.g. jQuery & React.
- ‘admin’ – Admin styles, loaded into the WordPress admin UI only.
- ‘external’ – External styles, loaded from 3rd party URLs & CDN, e.g. Bootstrap.
- ‘styles’ – Main styles loaded on all pages, library & plugin scripts, such as sliders & galleries.
- ‘page’ – Styles associated with a specific page template, such as for those in the main styles section.
- ‘post_type’ – Styles associated with a particular pre-defined Post-Type, also includes in-built WordPress post-types.
- ‘taxonomy’ – Styles associated with a particular defined Taxonomy & Term, also includes in-built taxonomies.
- ‘front’ – Styles loaded on the front page only.
- ‘login’ – Styles loaded on the login page only
- ‘print’ – Styles conditionally associated with callback funcitons
- ‘theme’ – Theme specific styles containing core functionality.
Core Styles:
Core styles are WordPress pre-registered styles handles. These should be defined as an array of style handles.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
'core' => [ 'jquery' ],
];
} );
Admin Styles:
Admin styles are loaded into the WordPress admin UI. These should be defined as an array of style definitions.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Admin styles: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ]
'admin' => [
'navigation' => [ IPRESS_ASSETS_URL . '/css/navigation' . $ip_suffix . '.css', [], null ],
]
];
} );
External Styles:
Loads styles from external urls and CDN. These should be defined as an array of style definitions.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// External CDN: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'external' => [
'bootstrap' => [ 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css', [], '5.3.2' ]
]
];
} );
Main Styles:
Loads plugin and library styles from the theme assets directory. These should be defined as an array of style definitions.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Main styles: [ 'handle' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'styles' => [
'flickity' => [ IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ],
]
];
} );
Page Styles:
Loads plugin and library styles from the theme assets directory depending on the current page template loaded. These should be defined as an array of style definitions.
The path is required. It can either be a single page template or an array of page templates.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Page styles: [ 'handle' => [ 'template', 'path_url', (array)dependencies, 'version', 'media' ] ... ];
'page' => [
'flickity' => [ 'template_home.php', IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ],
'smoothscroll' => [
[ 'template-home.php', 'template-docs.php' ],
IPRESS_ASSETS_URL . '/css/lib/smoothscroll.min.css', [], null ],
]
];
} );
Post Type Styles:
The post-type is required. It can either be a single registered post-type or an array of post-types.
Loads plugin and library styles from the theme assets directory depending on the current post-type. These should be defined as an array of styles definitions.
If the styles relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Post-Type styles: [ 'handle' => [ 'post_type', 'path_url', (array)dependencies, 'version', 'media' ] ... ];
'post_type' => [
'flickity' => [ 'gallery', IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ]
]
];
} );
Taxonomy Styles:
The taxonomy is required. It can either be a single registered taxonomy or an array of taxonomy & term.
Loads plugin and library styles from the theme assets directory depending on the current post-type. These should be defined as an array of style definitions.
If the styles relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Taxonomy styles: [ 'handle' => [ 'post_type', 'path_url', (array)dependencies, 'version', 'media' ] ... ];
'taxonomy' => [
'flickity' => [ 'gallery_type', IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ]
'flickity2' => [
[ 'gallery_type', 'photo' ],
IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2'
]
]
];
} );
Front Styles:
Loads plugin and library styles from the theme assets directory on the front page only. These should be defined as an array of styles definitions.
If the styles relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Front page styles: [ 'handle' => [ 'template', 'path_url', (array)dependencies, 'version', 'media' ] ... ];
'front' => [
'flickity' => [ IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ],
]
];
} );
Login Styles:
Loads plugin and library styles from the theme assets directory on the login page only. These should be defined as an array of style definitions.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Login styles: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ]
'login' => [
'flickity' => [ IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ],
]
];
} );
Print Styles:
Loads plugin and library styles from the theme assets directory on the print media only. These should be defined as an array of style definitions.
If the style relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Print styles: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ]
'print' => [
'flickity' => [ IPRESS_ASSETS_URL . '/css/lib/flickity.min.css', [], '2.2' ],
]
];
} );
Theme Styles:
Loads core styles from the theme assets directory. By default this includes the theme app.js file These should be defined as an array of style definitions.
If the script relies on another and should be loaded after it then the dependency handle can be placed in the dependency array.
The version is not required. It can either use its own unique value or the passed $ipress_version variable value.
The media setting is not required. It defaults to all media. Options include all, screen, print.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Theme styles: [ 'handle' => [ 'path_url', (array)dependencies, 'version' ] ... ];
'theme' => [
'ipress-standalone' => [ IPRESS_URL . '/style' . $ip_suffix . '.css', [], $ipress_version ]
]
];
} );
Attributes:
Styles passed inside script tags via urls can be associated with a number of attributes which affect the way the styles are loaded and dealt with by the browser: defer, async, integrity. Any defined styles handle can be associated with these attributes which are injected into the script tag inside the browser. For example if a CDN styles contains an integrity attribute to verify its source.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
return [
// Script attributes: integrity, defer
'attr' => [
'bs-popper' => [ 'integrity' => 'sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r' ],
'bootstrap' => [ 'integrity' => 'sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+' ],
'fontawesome' => [
'integrity' => 'sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==',
'defer' => true
]
]
];
} );
Example:
The styles block used in the config file for this site.
// Register Scripts, Styles & Fonts: Styles, override at lower priority
add_filter( 'ipress_styles', function() use( $ip_suffix ) {
global $ipress_version;
// Set up styles
return [
// External CDN: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'external' => [
'bootstrap' => [ 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css', [], '5.3.2' ]
],
// Plugin styles: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'styles' => [],
// Page styles: [ 'label' => [ 'template', 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'page' => [
'highlight' => [
[ 'template-docs-content.php', 'template-docs-content-list.php', 'template-features.php', 'template-pricing.php' ],
'//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.2/styles/atom-one-dark.min.css', [], null
],
'lightbox' => [
[ 'template-docs-content.php', 'template-docs-content.php' ],
IPRESS_ASSETS_URL . '/css/simple-lightbox.min.css', [], null
]
],
// Front page styles: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'front' => [
'slider' => [ IPRESS_ASSETS_URL . '/css/tiny-slider.min.css', [], null ],
'highlight' => [ '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.2/styles/atom-one-dark.min.css', [], null ]
],
// Main theme styles: [ 'label' => [ 'path_url', (array)dependencies, 'version', 'media' ] ... ]
'theme' => [
'coder' => [ IPRESS_URL . '/style' . $ip_suffix . '.css', [], $ipress_version ]
],
// Style attributes
'attr' => [
'bootstrap' => [
'integrity' => 'sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN'
]
]
];
} );
Scripts, Styles & Fonts: Fonts
There are various ways in which fonts can be loaded. One of the most common in modern web development is to load then from Google CDN sources via their API, which is currently v2. This section deals with defining and loading fonts from Google via the v2 API. These should be defined as an array with one per font family.
Weights can be defined as normal or italic. If ignored it defaults to normal.
Sizes can be selected as needed. If ignored it defaults to all sizes available for that font.
Multiple Styles:
// Register Scripts, Styles & Fonts: Fonts, override at lower priority
add_filter( 'ipress_fonts', function() {
return [
[
'family' => 'Montserrat',
'weight' => [
'normal' => [ 300, 500, '600:900' ],
'italic' => [ 400, 600 ]
],
'display' => 'swap',
'media' => 'all'
]
];
} );
Single Style – Normal:
// Register Scripts, Styles & Fonts: Fonts, override at lower priority
add_filter( 'ipress_fonts', function() {
return [
[
'family' => 'Roboto',
'weight' => [
'normal' => [ 300, 500 ]
],
[
'family' => 'Poppins',
'weight' => [ 300, '500:700' ]
],
[
'family' => 'Open Sans'
]
]
];
} );
Single Style – Italic:
// Register Scripts, Styles & Fonts: Fonts, override at lower priority
add_filter( 'ipress_fonts', function() {
return [
[
'family' => 'Crimson Pro',
'weight' => [
'italic' => [ 300, '500:700' ]
]
]
];
} );
Example:
The fonts block used in the config file for this site.
// Register Scripts, Styles & Fonts: Fonts, override at lower priority
add_filter( 'ipress_fonts', function() {
return [
[
'family' => 'Poppins',
'weight' => [ 300, 400, 500, 600, 700 ]
]
];
} );
Post Types
While it’s advisable to create custom post-types through a 3rd party plugin, or via a small bespoke theme plugin, it is sometimes the case that a theme specific post-type defined within the theme’s function file is a simpler solution. It is possible via the config file to create fully functional registered custom post-types. See the WordPress documentation for all available arguments and options when registering a post-type: https://developer.wordpress.org/reference/functions/register_post_type.
Defining a custom post-type is relatively simple. Each post-type array consists the name of the post-type, and an associated array containing the singular & plural names as well as an argument list to define how the post-type functions.
Example:
// Register Custom Post Types, override at lower priority
add_filter( 'ipress_post_types', function() {
return [
'case_studies' => [
'singular' => _x( 'Case Study', 'Post Type Singular Name', 'ipress' ),
'plural' => _x( 'Case Studies', 'Post Type General Name', 'ipress' ),
'args' => [
'public' => true,
'rewrite' => ['slug' => 'case-study'],
'supports' => ['title', 'editor', 'thumbnail'],
'query_var' => false,
'has_archive' => true,
'menu_icon' => 'dashicons-calendar-alt',
'description' => __( 'This is the Case Study post-type', 'ipress' ),
'labels' => [
'name' => __( 'Case Studies', 'ipress' ),
'singular_name' => __( 'Case Study', 'ipress' ),
'add_new' => __( 'Add Case Study', 'ipress' ),
'add_new_item' => __( 'Add New Case Study', 'ipress' ),
'edit_item' => __( 'Edit Case Study', 'ipress' ),
'new_item' => __( 'New Case Study', 'ipress' ),
'view_item' => __( 'View Case Study', 'ipress' ),
'view_items' => __( 'View Case Studies', 'ipress' ),
'search_items' => __( 'Search Case Studies', 'ipress' ),
'not_found' => __( 'No Case Studies found', 'ipress' ),
'not_found_in_trash' => __( 'No Case Studies found in Trash', 'ipress' ),
'all_items' => __( 'All Case Studies', 'ipress' )
]
]
],
'features' => [
'singular' => _x( 'Feature', 'Post Type Singular Name', 'ipress' ),
'plural' => _x( 'Features', 'Post Type General Name', 'ipress' ),
'args' => [
'public' => true,
'rewrite' => ['slug' => 'sectors'],
'supports' => ['title', 'editor', 'thumbnail'],
'query_var' => false,
'has_archive' => false,
'menu_icon' => 'dashicons-admin-tools',
'description' => __( 'This is the Features post-type', 'ipress' ),
'labels' => [
'name' => __( 'Features', 'ipress' ),
'singular_name' => __( 'Feature', 'ipress' ),
'add_new' => __( 'Add Feature', 'ipress' ),
'add_new_item' => __( 'Add New Feature', 'ipress' ),
'edit_item' => __( 'Edit Feature', 'ipress' ),
'new_item' => __( 'New Feature', 'ipress' ),
'view_item' => __( 'View Feature', 'ipress' ),
'view_items' => __( 'View Features', 'ipress' ),
'search_items' => __( 'Search Features', 'ipress' ),
'not_found' => __( 'No Features found', 'ipress' ),
'not_found_in_trash' => __( 'No Features found in Trash', 'ipress' ),
'all_items' => __( 'All Features', 'ipress' )
]
]
]
];
} );
Taxonomies
As with post-types while it’s advisable to create taxonomies through a 3rd party plugin, or via a small bespoke theme plugin, it is sometimes the case that a theme specific taxonomy defined within the theme’s function file is a simpler solution. It is possible via the config file to create fully functional registered taxonomies. See the WordPress documentation for all available arguments and options when registering a taxonomy: https://developer.wordpress.org/reference/functions/register_taxonomy.
Defining a new taxonomy is relatively simple. Each taxonomy array consists the name of the taxonomy, and an associated array containing the singular & plural names as well as an argument list to define how the taxonomy functions and post-types it is associated with.
In addtion to generating the new taxonomy it is also possible to add functionality to the post-type archives list of any post-type the taxonomy is associated with via the sortable & filter options.
Example:
// Register taxonomies, override at lower priority
add_filter( 'ipress_taxonomies', function() {
return [
'course_categories' => [
'singular' => _x( 'Category', 'Taxonomy Singular Name', 'ipress' ),
'plural' => _x( 'Categories', 'Taxonomy General Name', 'ipress' ),
'post_types' => [ 'courses' ],
'args' => [
'public' => true,
'publicly_queryable' => true,
'query_var' => false,
'hierarchical' => true,
'description' => __( 'This is the Course Categories Taxonomy', 'ipress' ),
'show_admin_column' => true
],
'sortable' => true, //optional
'filter' => true //optional
]
];
} );
Images
WordPress by default generates a number of images sizes which can be set and manipulated in the Admin UI > Settings > Media section:
- Thumbnail, default size (150 x 150 pixels)
- Medium, default size (maximum 300 x 300 pixels)
- Large, default size (maximum 1024 x 1024 pixels)
- Full size (the original size of the uploaded image)
In addition many plugins and themes create their own custom image sizes. While this functionality is readily available it should also be used with caution. Each full size image is copied and cropped to the 3x default image sizes and to any of the new custom image sizes if smaller than the full size image. This can lead to a file system with a lot of images. The iPress theme has the functionality to create new custom image sizes as well as manipulate default sizes.
Custom image sizes consist of an image handle and a size array: width, height, crop. If the crop value is true then the image is hard cropped, otherwise it is sized to best fit. The WordPress documentation has more on the technical details.
Example:
// Add custom image size, override at lower priority
add_filter( 'ipress_add_image_size', function() {
return [
'ipress_small' => [ 270, 180, true ]
];
} );
The config images section also has additional hooks to manipulate the media gallery functionality. Other image hooks are available in the hooks & actions section.
Sidebars
Sidebars are custom areas which when positioned on a page can display extra information in the form of widgets, blocks, or navigation menu. The iPress theme creates a single sidebar area by default with defined semantic html. The configuration allows for the default sidebars and sidebar defaults to be readily modified. Other sidebar custom hooks are available.
Example:
// Generate initial default sidebars, override at lower priority
add_filter( 'ipress_default_sidebars', function() {
return [
'primary' => [
'name' => __( 'Primary Sidebar', 'ipress' ),
'description' => __( 'This is the primary sidebar.', 'ipress' ),
'class' => 'sidebar-primary',
],
'header' => [
'name' => __( 'Header Sidebar', 'ipress' ),
'description' => __( 'This is the header sidebar.', 'ipress' ),
'class' => 'sidebar-header',
],
];
} );
Example:
// Set sidebar defaults, for wrapping widgets, override at lower priority
add_filter( 'ipress_sidebar_defaults', function( $defaults ) {
return [
'before_widget' => '',
'after_widget' => '' . PHP_EOL,
'before_title' => '',
'after_title' => '
' . PHP_EOL,
'class' => $defaults['class']
];
} );
Example:
// Generate footer sidebars, override at lower priority
add_filter( 'ipress_footer_sidebars', '__return_false' );
Widgets
Register classic widgets for injecting into defined sidebar areas. See https://developer.wordpress.org/reference/functions/register_widget/. On the whole deprecated and replaced by Guttemberg blocks. Useful if new editor functionality is disabled.
Example:
// Add custom widget areas, override at lower priority
add_filter ( 'ipress_widgets', function() {
return [];
} );
Custom Hooks
This is a general area for placing custom hooks that integrate with core WordPress functionality. By default the iPress theme uses a small selection of the hooks that are available and detailed in the Hooks: Actions and Filters section to modify basic script placement and disabling some legacy functionality. Also see the Theme Setup section.
Example:
// Set theme support : html5, override at lower priority
add_filter( 'ipress_html5', function() {
return [
'search-form',
'gallery',
'caption'
];
} );
// Turn off some support
add_filter( 'ipress_theme_support', '__return_empty_array' );
// Disable comments functionality as best as possible
add_filter( 'ipress_comments_clean', '__return_true' );
// Get rid of the horrible emoticons
add_filter( 'ipress_disable_emojicons', '__return_true' );
Template
This is a general area for placing custom hooks that modify WordPress template functionality. By default the iPress theme uses a small selection of the hooks that are available and detailed in the Hooks: Actions and Filters section.
Plugins
This is a general area for placing custom hooks that modify plugin and library functionality. By default the iPress theme loads common admin UI functionality associated with the Advanced Custom Fields plugin.
Example:
// Advanced Custom Fields Admin UI
if ( is_admin() ) {
require_once IPRESS_LIB_DIR . '/acf-config.php';
}
// Gravity Forms: Swap the input to a button
add_filter( 'gform_submit_button', function ( $button, $form ) {
return sprintf( '', $form['id'], __( 'SUBMIT ENQUIRY', 'tss' ) );
}, 10, 2 );
WooCommerce
One of the main features of the iPress theme is its integration with the WooCommerce plugin. The config section utilises a dedicated section for customising WooCommerce cart, display, and core functionality. See also the Hooks: Actions & Filters and functions sections. This initially checks for whether the WooCommerce plugin is active.
