Custom Styles and Scripts
You can add custom stylesheets and scripts to ProjectHuddle. However, the plugin automatically dequeues all non-plugin scripts and styles on the project front end page. The reason for this is to prevent conflicts from plugin stylesheets or scripts that aren't needed on ProjectHuddle pages.
For instance, it's not necessary to have your SEO plugin and Social Sharing plugin scripts on the project page since it's a much more private page. This also helps with privacy and loading speed for your ProjectHuddle pages.
Adding Stylesheets
The way to add your own stylesheet to the ProjectHuddle project page is to first enqueue it, then also add the handle to the allowed styles filter.
Example: Including a style on both mockup and website pages.
<?php
/**
* Add your custom stylesheet
* Be sure to change 'my' to your own prefix to prevent conflicts
*/
function my_projecthuddle_styles() {
// bail if not a projecthuddle post type
if ( ! ( is_singular('ph-project') || is_singular('ph-website') ) ) {
return;
}
wp_enqueue_style( 'my_ph_style', get_stylesheet_directory_uri() . '/path/to/your/stylesheet.css', '', '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_projecthuddle_styles' );
/**
* IMPORTANT: Add your stylesheet handle to allowed styles.
* If we don't do this it will get removed on ProjectHuddle pages.
*/
function my_allowed_ph_styles( $allowed ) {
$allowed[] = 'my_ph_style';
return $allowed;
}
// add to mockups
add_filter( 'ph_allowed_styles', 'my_allowed_ph_styles' );
// add to websites
add_filter( 'ph_allowed_website_styles', 'my_allowed_ph_styles' );
Adding Inline Styles
You can also add inline styles to your project page. This works great if you only
have a few style changes and don't want an extra http request to load an additional
stylesheet. You can use ph_style_options_output and ph_website_style_options_output
for mockup and website projects respectively. Here's an example:
<?php
/*
* Quickly add inline css styles to a both mockup and website projects
*/
function ph_add_inline_styles() { ?>
.postid-3996 .ph-project-image-inner {
height: 100%;
}
.postid-3996 .ph-project-image-inner img {
max-height: 100%;
}
<?php }
// add to all projects
add_action( 'ph_style_options_output', 'ph_add_inline_styles' );
<?php
/*
* Quickly add inline css styles to only website projects
*/
function ph_add_inline_styles() {
global $post;
if ( 'ph-website' !== get_post_type($post) ) {
return;
}
?>
.postid-3996 .ph-project-image-inner {
height: 100%;
}
.postid-3996 .ph-project-image-inner img {
max-height: 100%;
}
<?php }
// add to all projects
add_action( 'ph_style_options_output', 'ph_add_inline_styles' );
Adding Scripts
The way to add your own script to the ProjectHuddle project page is to first enqueue it, then also add the handle to the allowed scripts filter. Here's an example:
<?php
/**
* Add your custom script
* Be sure to change 'my' to your own prefix to prevent conflicts
*/
function my_projecthuddle_scripts() {
// bail if not a projecthuddle post type
if ( ! ( is_singular('ph-project') || is_singular('ph-website') ) ) {
return;
}
// add a new script using wp_enqueue_script
wp_enqueue_script( 'my_ph_script', get_stylesheet_directory_uri() . '/path/to/your/script.js', array(
'jquery',
'backbone',
'underscore',
'wp-backbone',
), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'my_projecthuddle_scripts' );
/**
* Add your script handle to allowed scripts
*/
function my_allowed_ph_scripts( $scripts = array() ) {
$scripts[] = 'my_ph_script';
return $scripts;
}
// add to mockups
add_filter( 'ph_allowed_scripts', 'my_allowed_ph_scripts' );
// add to websites
add_filter( 'ph_allowed_website_scripts', 'my_allowed_ph_scripts' );