Adding Custom Scripts and Styles

You can add custom stylesheets and scripts to SureFeedback. 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 SureFeedback 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 helps with privacy and loading speed for your SureFeedback pages.

How To Add A Custom Stylesheet

The way to add your own stylesheet to the SureFeedback project page is to first enqueue it, then also add the handle to the allowed styles filter. Here’s an example:

<?php
/**
 * Add your custom stylesheet
 * Be sure to change 'my' to your own prefix to prevent conflicts
 */
function my_SureFeedback_styles() {
	wp_enqueue_style( 'my_ph_style', get_stylesheet_directory_uri() . '/path/to/your/stylesheet.css', 'project-huddle', '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_SureFeedback_styles' );

/**
 * Add your stylesheet handle to allowed styles
 */
function my_allowed_ph_styles( $allowed ) {
	$allowed[] = 'my_ph_style';
	return $allowed;
}
add_filter( 'ph_allowed_styles', 'my_allowed_ph_styles' );

How To Quickly Add Inline Styles

You can also add inline styles to your project page if you only have a few style changes. You can do that by attaching your inline styles to the project-huddle stylesheet with wp_add_inline_style. Here’s an example:

<?php
/*
 * Quickly add inline css styles to a project
 * Replace .postid-3996 with your own project id
 */
function ph_add_inline_styles() {
	$custom_css = "
    		.postid-3996 .ph-project-image-inner {
			height: 100%;
		}
		.postid-3996 .ph-project-image-inner img {
			max-height: 100%;
		}";
	wp_add_inline_style( 'project-huddle', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'ph_add_inline_styles', 999999999 );

How To Add A Custom Script

The way to add your own script to the SureFeedback 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_SureFeedback_scripts() {
	// 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',
		'project-huddle'
	), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'my_SureFeedback_scripts' );

/**
 * Add your script handle to allowed scripts
 */
function my_allowed_ph_scripts( $scripts = array() ) {
	$scripts[] = 'my_ph_script';
	return $scripts;
}
add_filter( 'ph_allowed_scripts', 'my_allowed_ph_scripts' );