ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   ThomasTheme-as
   Member

   I am missing a fundamental conceptual understanding. My learning is at the tip of my tongue but not yet speaking..

   What I was wanting to know are the steps to making a customization with HTML or jQuery and hooking it in to a Theme.

   Lets say I want to add HTML code to the footer, lets say in particular to the bottom portion would I do as follows?

   (1) Create a function in the functions.php outlining the HTML, giving it a name, i.e. function my_footer and then
   (2) Hooking into the footer by placing : add_action('thematic_below_footer', 'my_footer') into the footer.php file?

   ALSO

   How do I "enqueue" javascript into a footer, would I do so like follows:

   (1) Allow for jQuery in the footer by creating function in functions.php file as in:
   function my_theme_js()
   {
   wp_enqueue_script('jQuery);
   wp_print_scripts();
   }
   add_action('wp_enqueue_scripts', 'my_theme_js')
   (2) In footer.php introduce javascript by invoking:
   add_action('thematic_belowfooter', 'my_theme_js')
   (3) then write in javascript in footer.

   Any help in getting me to talk, greatly appreciated..

   Posted 1 year ago #
2. 

   joperron
   Member

   Hey there,

   You can put you add_action right under your function in your functions.php file. The general consensus here is to as much (all?) of your modifications programmatically through functions.php

   You have to be careful with jQuery as it is already queued in your header. You might want to go over this thread: http://themeshaper.com/forums/topic/jquery-in-thematic-demystified

   Cheers

   Posted 1 year ago #
3. 

   helgatheviking
   Moderator

   add html code anywhere:

   function add_bacon(){ ?>
   <strong>write as much bacon-flavored html as you like</strong>
   <?php }
   add_action('thematic_hook_of_your_choice','add_bacon');

   add scripts to the footer (or anywhere really)
   

   function add_bacon_script() {?>
   <script>
   jQuery.noConflict();
   jQuery(document).ready(function($){
      alert(bacon);
   });
   </script>
   ?>
   add_action('wp_footer','add_bacon_script');

   i do recommend that you go read my thread that joperron linked to.. which explains how to properly enqueue scripts. you can move the whole enqueue scripts thing out of the header and into the footer. i've done it, but often run into problems w/ plugins just willy-nilly adding scripts to wp_head which results in a lot of breakage b/c jquery hasn't loaded yet.

   for reference:

   function clean_header(){
   	// JS - MOVE TO FOOTER
   	remove_action('wp_head', 'wp_print_scripts');
   	remove_action('wp_head', 'wp_print_head_scripts', 9);
   	remove_action('wp_head', 'wp_enqueue_scripts', 1);
   
   	add_action('wp_footer', 'wp_enqueue_scripts', 1);
   	add_action('wp_footer', 'wp_print_scripts', 10);
   	add_action('wp_footer', 'wp_print_head_scripts', 20); 
   
   	// CLEAN UP HEADER
   	remove_action('wp_head','thematic_head_scripts'); //thematic dropdowns
   	remove_action( 'wp_head', 'wlwmanifest_link'); // Removes link for Windows Live Writer users
   	remove_action( 'wp_head', 'wp_generator'); // Removes WP version
   	remove_action( 'wp_head', 'rsd_link' ); // Removes unneeded Really Simple Discovery link
   	remove_action( 'wp_head', 'start_post_rel_link'); //Remove relational start link
   	remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head'); // Remove prev/next relational links
   
   	//use google's jquery
   	if (!is_admin()){
   		wp_deregister_script( 'jquery' );
   		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js');
   		wp_enqueue_script('jquery');
   	 }
   }
   add_action('init','clean_header');

   Posted 1 year ago #
4. 

   ThomasTheme-as
   Member

   Wow thank you so much! I am self learning and a slow one at that, so I do so appreciate your patience and good effort with me.

   Two more questions, if I may press you further:
   (1) Referring to helgathehelpfulviking's jQuery post where she/you mention(s):

   wp_enqueue_script('yourscript', JS . '/path-to-your-script.js');

   Is 'yourscript', the script that you placed in the js folder?

   (2) where typically would the add_bacon function be added? To the footer or as joperron mentions to be made in the functions.php file.

   The add_bacon example really gave me the necessary understanding to move forward.

   Posted 1 year ago #
5. 

   helgatheviking
   Moderator

   i know some people find the WP Codex confusing, but there is still a TON of info there.

   http://codex.wordpress.org/Function_Reference/wp_enqueue_script

   1. 'yourscript' in my example is the handle for that script. think of it as a unique name for that script. it's purpose is so that 10 plugins can say enqueue the script with the handle 'jquery' and jquery will actually only be loaded once. you can also deregister a script if you know its handle. good for working w/ a plugin like Contact 7 which loads its script everywhere even though you probably only need it on the contact page.

   2. add the bacon function to your child theme's functions.php glad bacon could be of service! ;)

   Posted 1 year ago #
6. 

   ThomasTheme-as
   Member

   Well you enlightened me much on the HTML code insertion.

   Ok so to understand 'yourscript'. 'yourscript' is the handle you have defined first with:

   wp_enqueue_script('yourscript', JS . '/path-to-your-script.js');

   THEN this function above also defines it as the script sitting in /path-to-your-script.js. This is my understanding.

   Thank you so much for getting me on a higher level of understanding, I think I am ready to get my hands dirty..

   You'll prob seeing more of me..

   Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.