I'm trying to develop my own theme and i've run in the following issue:
I use WP-RECIPE and I can't use the button "print recipe", but if I install other theme that button is working. So I thought it's because of the plugin, so I installed something random like 'social share', same output. What's wrong?
PRINT
This is my functions.php for styles and scripts:
<?php
//JAVASCRIPT SI CSS
function pezona_enqueue_styles() {
wp_enqueue_style(
'layout',
get_stylesheet_directory_uri() . '/assets/css/layout.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil',
get_stylesheet_directory_uri() . '/assets/css/stil.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil-responsive',
get_stylesheet_directory_uri() . '/assets/css/stil-responsive.css',
array(),
false,
'all'
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_styles' );
function pezona_enqueue_scripts() {
wp_enqueue_script(
'main-js',
get_stylesheet_directory_uri() . '/assets/javascript/lazysizes.min.js',
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_scripts' );
?>
Any ideea guys? thanks.
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');
My wordpress knowledge is pretty low and I am in desperate need of help on adding some jQuery functions to a wordpress child theme.
I basically want to add this effect to my front-page.php
I somewhat understand how to use the functions.php in order to enqueue my scripts.
Here is what my functions.php file looks like
<?php
function enqueue_scripts() {
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'global' );
if ( is_page( 'front-page' ) ) { // example page
wp_enqueue_script( 'js name', 'js name', 'js name' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
?>
As of right now it of course does not work.
Any help is much appreciated. Thanks.
Try this:
function yourtheme_enqueue_scripts() {
wp_register_script( 'js_name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js_name_2', get_template_directory_uri() . '/myfile2.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js_name_3', get_template_directory_uri() . '/myfile3.js', array( 'jquery' ), '1.0', true );
if ( is_front_page() ) {
wp_enqueue_script( 'js_name' );
wp_enqueue_script( 'js_name_2' );
wp_enqueue_script( 'js_name_3' );
}
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
In your themes root folder (same folder as functions.php), create new file called myfile.js. This is the file you refer to in the function above.
As you theme grows in size, it's better to organise your files. You can do this by creating subfolders, like this:
Create a folder named assets (name could be anything);
Inside assets create three new folders called js, css and images;
Put your files in the right folders;
Update your function to follow the right path to your folders;
e.g.
wp_register_script( 'js_name', get_template_directory_uri() . '/assets/js/myfile.js', array( 'jquery' ), '1.0', true );
Note: You don't have to close ?> in your functions.php.
I´ve spent a good while trying to figure this out. Im trying to add a script that need an external jquerylibrary. I can make it work by inserting my script between scripttags, however i understand thats not the correct way to do it, and it breaks another script on the site.
I spent a fair amount of time tonight trying to figure out how to add the script correct, and i just cant get it.
I understand something like this is the correct way to enqueue the script:
function my_scripts_method() {
wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.9.1.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
My main question is, how do i write my functions so it calls the library, and at the same time failsafe it so it only loads once, and doesnt crash with other scripts? This is the script:
$(document).ready(function () {
$("#menu-item-16").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-17”).hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-18”).hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
});
Edit:
Second question, several librarys and a stylesheet.
As said above i have a little more complex script that you guys might be able to help me out.
I have this code in the header right now, and it works.
`<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"> </script>
<script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
$.fn.fullpage({
verticalCentered: true,
resize : true,
slidesColor : ['#AF1700', '#359973', '#F46321', '#A6C7DB'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: true,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: true,
css3: false,
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#element1, .element2',
normalScrollElements: '#element1, .element2',
keyboardScrolling: true,
touchSensitivity: 15,
continuousVertical: false,
animateAnchor: false,
setScrollingSpeed: 1000,
});
});
</script>
`
From my newfound insights, i tried this, and it didnt work:
`
function fullpage() { wp_enqueue_script('jquery');
wp_register_style( ’fullpage-css', get_template_directory_uri() . '/js/jquery.fullPage.css','','', 'screen' );
wp_register_script( 'jquery.1.8.3', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array('jquery'),'',true );
wp_register_script( 'jquery.1.9.1', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array('jquery'),'',true );
wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'',true );
wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'',true );
wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', '', null,'' );
wp_enqueue_style( 'fullpage-css' ); // Enqueue our stylesheet
wp_enqueue_script( 'jquery.1.8.3' ); // Enqueue our first script
wp_enqueue_script( 'jquery.1.9.1' ); // Enqueue our second script
wp_enqueue_script( 'fullpage' ); // Enqueue our third script
wp_enqueue_script( 'fullpagecode' ); // Enqueue fourth script
wp_enqueue_script( ’slimscroll’ ); // Enqueue fifth script
}add_action( 'wp_enqueue_scripts', ’fullpage’ ); `
Don't run your jquery in a script. This will break other scripts in wordpress.
Make a .js file (eg. example.js and put this in your theme folder under a /js directory) and 'enqueue' it in your functions.php file like this.
function theme_styles() {
wp_register_style( 'fullpage-css', get_template_directory_uri() . '/css/jquery.fullPage.css' );
wp_enqueue_style( 'fullpage-css' );
}
add_action('wp_enqueue_scripts', 'theme_styles');
function theme_scripts() {
wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'1.0.0',true );
wp_enqueue_script( 'fullpage' );
wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'1.0.0',true );
wp_enqueue_script( 'fullpagecode' );
wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', array('jquery'), null, true );
wp_enqueue_script( 'slimscroll' );
}
add_action('wp_enqueue_scripts', 'theme_scripts');
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$src is the path to the js file.
$deps is where you define this script requires jquery, like this. array('jquery')
You don't need to include jquery as wordpress has this built in.
Then in your .js file in your theme folder wrap your code in a No Conflict wrapper. Using $() will return undefined otherwise.
jQuery(document).ready(function($) {
$("#menu-item-16").hover(
function () {
$('body').css("background", "#ff9900");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-17").hover(
function () {
$('body').css("background", "red");
},
function () {
$('body').css("background", "#ccc");
}
);
$("#menu-item-18").hover(
function () {
$('body').css("background", "yellow");
},
function () {
$('body').css("background", "#ccc");
}
);
});
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)