Marello

Forum Replies Created

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter Marello

    (@marello)

    1. Always use the bundled jQuery scripts or else you risk breaking your theme or other plugins.

    To someone who is still learning this makes it sound like you shouldn’t be adding anything.

    I appreciate you’re much more knowledgeable than myself Andrew but everyone has to learn at some point and I am trying very hard.

    Whereabouts would you suggest I enqueue the .js? Is that in the header.php or the functions.php?

    If I’m uploading a .js script then should I also be registering it in the functions.php? I tried doing the below last night and it broke my functions.php

    wp_register_script( 'accordion', get_template_directory_uri() . '/scripts/accordion.js', array( 'jquery' ), '1.3.16' );

    Thread Starter Marello

    (@marello)

    Hey Jose,

    I’m afraid I still don’t get it. Your first reply said I shouldn’t be uploading a .js file, your 2nd one says I should?

    What would be really helpful would be telling me where these elements should be as opposed to where they shouldn’t.

    For example from your 2nd response I’ve interpreted it as:

    1) the jQuery script that is in the accordion tutorial I’ve referenced should go into its own file called accordion.js and uploaded to my scripts folder
    2) nothing should be added to functions.php
    3) i should use “enqueue script” in header.php
    4) the CSS should go in my main style sheet

    I’m guessing I’ve interpreted this incorrectly as it doesn’t seem to work so would be immensely grateful for some stronger pointers.

    Many thanks

    Thread Starter Marello

    (@marello)

    Hey Jose,

    Thanks so much for the response! I’m extremely sorry but I don’t understand what you mean.

    You say only use bundled jQuery scripts. Does this mean I shouldn’t have uploaded the jQuery script from the tutorial website into my scripts folder?

    If I’m not meant to use this script then how come I should read about how to enqueue scripts?

    If I’m not meant to add javascript code to the CSS file, and I’m not meant to upload it as it’s own separate script, whereabouts am I meant to put it?

    Thread Starter Marello

    (@marello)

    OK sorry for adding another post to this but a moderator closed a thread I started following on from this thread where I’d actually placed the code in different places and tried to phrase my question more clearly. So, please ignore the posts above, this is my actual question:

    I’m looking for some help on how to use jQuery in WordPress. I have been googling for hours without success and I’d really appreciate some help.

    I’m trying to follow the steps in this tutorial. I’m fine with the HTML and CSS bit, but can’t understand what to do with the jQuery.

    From what I’ve read I believe I have to paste create a file called “accordion.js” with the jQuery script inside of it and upload it onto my server. I’ve done this and put it in the folder where I can see my theme (minimatica.js) file.

    Then in my themefunctions.php I’ve pasted the following line near where I can see other scripts being called:

    wp_register_script( ‘accordion’, get_template_directory_uri() . ‘/scripts/accordion.js’, array( ‘jquery’ ), ‘1.3.16’ );
    I wasn’t sure what the values for the penultimate and last part of that string should be. I opted for ( ‘jquery’ ), ‘1.3.16’ ); because that’s what a line of code above did.

    Finally I know that I need to queue up jQuery in my header.php file.

    I’ve read that before the <head> section I need to put:

    <?php wp_enqueue_script(“jquery”); ?>

    <?php wp_head(); ?>
    And then after <?php wp_head(); ?>:

    <script type=”text/javascript”
    src=”<?php bloginfo(“template_url”); ?>/js/yourScript.js”></script>
    I’m not following what words should be going where. I can see that /js/yourscript.js should probably be changed to the path I’ve put accordion.js, in my case. However should I be replacing anything else in there to get it to work?

    I’d really really love some help. A similar post on the forum had a response saying “if you can’t understand how this works you shouldn’t be doing it” which lets face it, is a really rubbish thing to say to people who are learning. I’ve really tried to find a tutorial. website here if you want to see how far I’ve got with it

    Thread Starter Marello

    (@marello)

    Adding in code incase it’s helpful

    CSS sheet has:

    #accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}

#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}

$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

    $("#accordion li").hover(function(){
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
        $(this).animate({width: "450px"}, {duration:300, queue:false});
        activeItem = this;
    });

});

    Header.php is just:

    <?php
/**
 * The Theme Header Template
 *
 * Used to display the document <head> section and page header
 *
 * @package WordPress
 * @subpackage Minimatica
 * @since Minimatica 1.0
 */
?><!DOCTYPE html><!-- HTML5, for the win! -->
<html <?php language_attributes(); ?>>
<head>
<?php wp_enqueue_script(“jquery”); ?>
<?php wp_head(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php minimatica_doc_title(); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_enqueue_script(“jquery”); ?>

<?php wp_head(); ?>

<?php
/**
 * Hook used to isert content in the document's <head> section.
 * Always have this before closing the <head> tag.
 */
wp_head(); ?>
    Thread Starter Marello

    (@marello)

    PS I’ve read most of the links WPYogi linked me to, they’re still not really clear on how you get these features into WordPress although I do understand the script itself.

    Thread Starter Marello

    (@marello)

    Thanks for the links everyone.

    I’ll work my way through them properly shortly, but they still seem to be missing what I’m looking for. I understand the code examples. What I’m not getting is the simple stuff like how on earth I get this code into WordPress. Most tutorials seem to skip this step!

Viewing 7 replies - 16 through 22 (of 22 total)