Some resources explaining the modular design pattern in javascript, for future reference.
I wanted some javascript on the front page to display a button that toggled the visibility of a doodle at the bottom of the screen. In a normal website, the necessary javascript is written in a separate file which is then called with <script> tags in the head of the html file. How do you get these <script> tags into the head of a WordPress page?
The Codex and user forums tell us that hacking the header template with <script> tags is a bad thing. WordPress has its own method, called enqueuing, for adding javascript. I pulled my hair out reading the Codex and many tutorials to learn how to get this done. It confused me for a long time. Here is what would have made it much easier for me.
The two things you need to know to properly enqueue javascript in WordPress are:
Once I realized that these nearly identical looking things are completely different, it all fell into place.
Here is how both of these fit in my child theme’s function.php file to make it all work.
Line 6 defines the grp_include_scripts function. The sole purpose of this function is to invoke the wp_enqueue_script function which tells WordPress:
The wp_enqueue_script function says to WordPress, “when it comes time to include script tags in the head of the page being loaded, please add one for my script too. Here is what you need to know about it.”
Like any other php function, grp_include_script() will not execute until called by some other code. That’s where line 12 comes in. The add_action function tells WordPress that you want to do something when it comes to a particular point in its operation. The wp_enqueue_scripts hook is at the point where WordPress determines what scripts need to be loaded with the page being loaded. In line 12, the add_action function tells WordPress, “whenever you reach the wp_enqueue_scripts hook, please run the grp_include_scripts function (line 6) to see what scripts I might have for you.”
And that’s how scripts can be included using function.php without ever touching a template.
Note that I wanted to run this particular script only on the home page, so I used the “if” statement on line 7. Just take out this conditional for scripts that should be loaded on every page.
For the Legal Research page, created a custom page template (legalResearch.php) based on the default page template. I wanted this page to be full width. Although get_sidebar is removed from legalResearch.php, the main content does not fill the entire screen width by default. Without more, a blank space is left where the side bar would be.
For the main content area to extend the full length of the screen, the <body> tag must have the “full-width” class. Wrote a custom function in the template to filter the body_classes() function to add the “full-width” class when using the legalResearch.php template. See the “Add Classes By Filters” section of the body_class() reference.
I wanted to append other content to the page, depending on which section the user clicked in the summary table. The template contains a filter to do that. For this to work, the appended content must be a child of the page and the id of the page must be posted via GET: http://www.glenpritchard.com/ohiolegalresearch/?id=1647
if the id is not a child page, nothing will be appended. Passing id=shebang will append all of the child pages in the menu order.
Finally, I replaced the table for the top grid to divs. The problem is that floated divs do not have the same height as its neighbor in the same row. The solution is to use display:table and display:table-cell as described in this nice post. This change was essential for maintaining a responsive web design.
Could not figure out how to add a gallery to more than one album in NextGen Gallery. Once a gallery is selected for one album, it is not listed for inclusion into another album. The solution is to simply click “Show All” in the Album Manager.
Having now moved several WordPress sites from their test environments to new domains, I found the official instructions for moving a WordPress site to be confusing. Here are the steps I follow:
That should do it.
Interesting that imap_headerinfo() does not allow a UID for the $msg_number field like all other fetching functions seem to allow.
If you want to use a UID to fetch the headers, use this two-step process:
<?php
/*
* assumes $mbox is your stream, and $uid is set
* properly. Proper error checking is up to you.
*/
$hText = imap_fetchbody($mbox, $uid, '0', FT_UID);
$headers = imap_rfc822_parse_headers($hText);
?>The result is the same as the output of imap_headerinfo(), but you get to use the UID.
From: http://www.php.net/manual/en/function.imap-fetchheader.php
/*Validate Phone No*/
$('.valPhoneNo').blur(function(){
var phone = $(this).val();
phone = phone.replace(/D/g,'');
if(phone.length == 7){
var dispPhone = phone.slice(0,3) + "-" + phone.slice(3);
$(this).val(dispPhone);
} else if(phone.length == 10) {
var dispPhone = "(" + phone.slice(0,3) + ") " + phone.slice(3,6) + "-" + phone.slice(6);
$(this).val(dispPhone);
}
});This script will scroll to id tag answerCode:
$('html, body').animate({scrollTop: $('form#answerCode').offset().top}, 'slow');
A nice article about custom data types in HTML 5.
// Prevent Enter key from submitting form without returning a button click
$('form[name="Save"] > input:text').bind("keypress", function(e) {
console.log('i');
var code = e.which;
if (code == 13) {
e.preventDefault();
return false;
}
})