Adding custom stylesheet for different WordPress pages - javascript

I created custom home page whose name is "front-page.php" and than added another page with custom css and JS files like this in the header.php file:
<?php
function my_styles_method() {
if (is_page_template('front-page.php'==TRUE){
// Register the style like this for a theme:
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/marquee.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
enter code here
// Register the style like this for a theme:
if (is_page_template('our-story.php'==TRUE) {
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/main.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>
Now, I face the following issues in this one:
when I run this in WordPress I get this error message:
Parse error: syntax error, unexpected '{' in
C:\wamp\www\wordpress_update\wp-content\themes\twentytwelve\header.php
on line 32
I have created custom templates on both the pages .
Thank you in advance.

Try this
<?php
function my_styles_method() {
if (is_page_template('front-page.php')==TRUE){
// Register the style like this for a theme:
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/marquee.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
//enter code here
// Register the style like this for a theme:
if (is_page_template('our-story.php')==TRUE) {
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/main.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>
// if (is_page_template('front-page.php'==TRUE) should be if (is_page_template('our-story.php')==TRUE)

Related

How can initialize Fancybox into WordPress with a separate .js file properly?

I did a search and found this method here using wp_add_inline_script. And it works.
But what if I wanted to keep my initialization script into an other .js file? That's what I wanted at first. How I can I load correctly?
I tried this but the loading of my init-fancybox must be too early because I get an error.
(my init-fancybox script is not the problem because it works when it is loaded correctly using wp_add_inline_script)
function fancybox_enqueues() {
wp_register_script( 'fancybox', get_theme_file_uri( '/assets/js/jquery.fancybox.min.js' ), array('jquery'), '3.5.7', true);
wp_register_script( 'init-fancybox', get_theme_file_uri( '/assets/js/init-fancybox.js' ), array('jquery','fancybox'), '1.0', true);
wp_register_style( 'fancybox-css', get_theme_file_uri( '/css/jquery.fancybox.min.css' ), '1.0');
if ( is_singular( 'item' ) ) {
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'fancybox' );
wp_enqueue_script ('init-fancybox');
wp_enqueue_style( 'fancybox-css' );
}
}
add_action( 'wp_enqueue_scripts', 'fancybox_enqueues');
Here is the error I get TypeError: $ is not a function
And here is the init-fancybox.js
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons : [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs : {
autoStart : false
}
});
It seems jQuery is not loaded by the time your code is running. Try adding the following function around it to make sure jQuery exists before your code runs:
jQuery(document).ready(function ($) {
// Your function goes here:
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons: [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs: {
autoStart: false
}
});
});

Remove WooCommerce Product Addons addons.min.js script from output

The function code below outputs a referral to a javascript file called addons.min.js I believe this is done in line 6 of the code.
Because I don't want to edit the plugins core addons.min.js file I have created my-custom-addons.min.js file and added it to the wp-footer (via wp_enqueue_script).
All good but I can't remove the original referral.
I tried to use
// Remove plugins core addons.min.js
function iw_wcpa_script_remove() {
if ( is_product() ) {
wp_dequeue_script( 'woocommerce-addons' );
wp_deregister_script( 'woocommerce-addons' );
}
}
add_action( 'wc_quick_view_enqueue_scripts', 'iw_wcpa_script_remove', 99 );
// Add custom addons.min.js
function iw_wcpa_script_add() {
if ( is_product() ) {
wp_enqueue_script( 'iw-woocommerce-addons', get_site_url() . '/wp-content/uploads/iwebbers/js/addons.min.js' );
}
}
add_action( 'wp_footer', 'iw_wcpa_script_add' );
But addons.min.js still keeps coming up in my HTML output like this:
<script type='text/javascript' src='https://iwebbers.com/wp-content/plugins/woocommerce-product-addons/assets/js/addons.min.js'></script>
I'm completely in the dark here how to get this done.
Anyone?
If it helps, here's the live page to see the whole HTML source:
https://iwebbers.com/samenstellen/gratis-website-pakket
And just to be clear, I can't edit the function below because it's plugins core.
public function addon_scripts() {
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
wp_register_script( 'accounting', WC()->plugin_url() . '/assets/js/accounting/accounting' . $suffix . '.js', array( 'jquery' ), '0.4.2' );
wp_enqueue_script( 'woocommerce-addons', plugins_url( basename( dirname( dirname( __FILE__ ) ) ) ) . '/assets/js/addons' . $suffix . '.js', array( 'jquery', 'accounting' ), '1.0', true );
Try to hook wp_enqueue_scripts instead of wp wp_footer with the high priority value:
add_action( 'wc_quick_view_enqueue_scripts', 'iw_wcpa_custom_script', 99 );
UPDATE
replace wocoomerce-addons with woocommerce-addons in your iw_wcpa_script_remove
Try this:
function remove_product_addons_js() {
wp_dequeue_script( 'woocommerce-addons' );
}
add_action( 'wp_print_footer_scripts', 'remove_product_addons_js', 0 );

wp_register_script only works with 2 arguments

I am trying to add a custom JavaScript file in my child theme. After a few hours, I finally got it working with the following code:
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js'
);
wp_enqueue_script( 'resources-page' );
I don't understand why this would fail (the resources_page.js doesn't get called at all) if I do it like this (with the rest of the params):
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery '),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
Can someone explain?
Try it this way, packing the whole thing into a function which you then put into an action hook:
function register_scripts() {
wp_register_script('resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery'),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
}
add_action('wp_enqueue_scripts', 'register_scripts');

WordPress jQuery not enqueueing

I am trying to enqueue my jQuery files but it still doesn't work. In my assets/functions.js I have the following debugging code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("yup");
} else {
// jQuery is not loaded
alert("derp");
}
}
I am calling this file with this script, located at the top of the file:
if ( ! defined( 'TS_FILE' ) ) { define( 'TS_FILE', __FILE__ ); }
function ts_scripts() {
wp_enqueue_script('jquery');
wp_register_script( 'functions', plugins_url( 'assets/functions.js', TS_FILE ), array('jquery'));
wp_enqueue_script('functions');
}
add_action( 'wp_enqueue_scripts', 'ts_scripts' );
But I am not getting any alerts when I load the page. There are no error messages in my console.
Help?!

Wordpress - Loading JS files after footer

Thanks for reading,
How would I load my JS files after the footer instead of being in the header
example:
<head>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
</head>
Changed to
</footer>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
</body>
</htmL>
I've tried
wp_register_script( 'cycle', 'http://malsup.github.com/jquery.cycle2.js', '', '', true);
wp_enqueue_script( 'cycle' );
wp_register_script( 'site', get_template_directory_uri().'/js/site.js', '', '', true);
wp_enqueue_script( 'site' );
The last parameter dictates where to enqueue the script, in footer (true) or in header (false - default):
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
You have to hook the scripts righteously (please follow the inline comments):
To hook to the front-end:
add_action( 'wp_enqueue_scripts', 'function_name' );
To hook to the admin panel:
add_action( 'admin_enqueue_scripts', 'function_name' );
Here's how you should proceed:
<?php
function themeslug_load_scripts() {
//registering the scripts, the last parameter will dictate where they should enqueue
//and you are saying: yes, in_footer
wp_register_script( 'cycle', 'http://malsup.github.com/jquery.cycle2.js', array(), '', true);
wp_register_script( 'site', get_template_directory_uri().'/js/site.js', array('jquery'), '', true); //we are setting a dependency - yes depend on jQuery - means load jQuery first
//actually rendering the scripts
wp_enqueue_script( 'cycle' );
wp_enqueue_script( 'site' );
}
add_action( 'wp_enqueue_scripts', 'themeslug_load_scripts' );
or you can simply try:
<?php
function themeslug_load_scripts() {
//actually rendering the scripts
wp_enqueue_script( 'cycle', 'http://malsup.github.com/jquery.cycle2.js', array(), '', true );
wp_enqueue_script( 'site', get_template_directory_uri().'/js/site.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'themeslug_load_scripts' );
And, clear your browser cache when working with JavaScripts. Load the page and see page source. It'll do the thing for you. :)
Reference:
wp_register_script()
wp_enqueue_script()
if you are trying to add js to a page or post, may I suggest a simple and free plugin? it is called CTJ. you put code blocks in it and add to header or footer as you like.

Categories