Tuesday, April 16, 2013

jQuery Script for Form lenght characters

[contact-form-7 id="34" title="Contact form 1"]
<script type="text/javascript">
jQuery('#wpcf7-f34-p24-o1 form').submit(function() {
var abstract_length = jQuery("#abstract1").val().length + jQuery("#abstract2").val().length + jQuery("#abstract3").val().length + jQuery("#abstract4").val().length + jQuery("#abstract5").val().length + jQuery("#abstract6").val().length + jQuery("#abstract7").val().length;
if(abstract_length >= 2500){
   alert("Maximum Content for Abstract is 2500 Characters.");
   return false;
}
});
</script>

Friday, March 8, 2013

WordPress Breadcrumb Function

Here’s the function

Paste this into your functions file (functions.php) within you theme directory (www.yousite.com/wp-content/themes/your_theme/functions.php)

    function the_breadcrumb() {

    $sep = ' | ';

    if (!is_front_page()) {

        echo '<div class="breadcrumbs">';
        echo '<a href="';
        echo get_option('home');
        echo '">';
        bloginfo('name');
        echo '</a>' . $sep;

        if (is_category() || is_single() ){
            the_category('title_li=');
        } elseif (is_archive() || is_single()){
            if ( is_day() ) {
                printf( __( '%s', 'text_domain' ), get_the_date() );
            } elseif ( is_month() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) );
            } elseif ( is_year() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) );
            } else {
                _e( 'Blog Archives', 'text_domain' );
            }
        }

        if (is_single()) {
            echo $sep;
            the_title();
        }

        if (is_page()) {
            echo the_title();
        }

        if (is_home()){
            global $post;
            $page_for_posts_id = get_option('page_for_posts');
            if ( $page_for_posts_id ) {
                $post = get_page($page_for_posts_id);
                setup_postdata($post);
                the_title();
                rewind_posts();
            }
        }

        echo '</div>';
    }
}

And here’s how it’s called

Place this code where you would like it to appear. In most of my sites I place it in the header.php file (www.yousite.com/wp-content/themes/your_theme/header.php), that way it appears on every page.
<?php the_breadcrumb() ?>
And that’s all you need to know…. unless your curious as to how it works….

How it works

This is the separator you would like to appear between the levels of the breadcrumb
$sep = ' » ';
This checks if the current page is NOT the homepage, therefor only showing the breadcrumbs on the inner pages of your site
if (!is_front_page()) {
Start the breadcrumb with a link to your homepage
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo '</a>' . $sep;
Check if the current page is a category, an archive or a single page. If so show the category or archive name.
if (is_category() || is_single() ){             
    the_category('title_li=');         
} elseif (is_archive() || is_single()){             
    if ( is_day() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date() );             
    } elseif ( is_month() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) );             
    } elseif ( is_year() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) );             
    } else {                 
        _e( 'Blog Archives', 'text_domain' );             
    }         
}
If the current page is a single post, show its title with the separator before as the single posts category/archive would have been echo’d before this.
if (is_single()) {             
    echo $sep;             
    the_title();         
}
If the current page is a static page, show its title.
if (is_page()) {             
    echo the_title();         
}
This last section is added for if you have a static page assigned to be you posts list page. It will find the title of the static page and display it. i.e Home >> Blog
if (is_home()){             
    global $post;             
    $page_for_posts_id = get_option('page_for_posts');             
    if ( $page_for_posts_id ) {                 
        $post = get_page($page_for_posts_id);                 
        setup_postdata($post);                 
        the_title();                 
        rewind_posts();             
    }         
}

That’s it!

And that’s it. Any questions please leave a comment and i’ll be happy to answer


Thursday, March 7, 2013

Hide DIV onClick on Outside

<script type="text/javascript">
    $(document).ready(function(){
    $('.form-container').click(function(event){
    console.log('click - form');
    //we want all click events in the form to stop at the form-container element, so that the event does not reach the body element
    event.stopPropagation();
    });
  
    $('html').click(function(event){
      console.log('click - body');
      //hide the form if the body is clicked
      $('.form-container').css('display','none');
    });
 
    $('button').click(function(event){
    $('.form-container').css('display','block');
    event.stopPropagation();
    });
    });
    </script>
 

Thursday, February 21, 2013

Convert a Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose.

That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise.

The HTML

The HTML for these two menus is different. As far as I know, you can't style <select> and <option> elements to look and behave like <a>s or vice versa. So we need both. You could just put both in the markup. That's what Five Simple Steps does:
<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>
Let's go with that for now.

The CSS

By default we'll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.
nav select {
  display: none;
}
Then using media queries, we'll do the switcheroo at some specific width. You can determine that on your own (here's some standard breakpoints).
@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

But now you gotta maintain two menus?

Well yeah, that's one concern. Maybe your menus are created dynamically and you can't control the output easily. Maybe you and hand crafting menus but want to make sure you don't accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.
Using jQuery, we can do that with just a few lines of code:
// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});
Then to make the dropdown menu actually work...
$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

But aren't dropdown menus kinda obtrusive?

Kinda. Most small screens these days are mobile and most mobile devices are JavaScript friendly, so not a huge concern. But, if you want to ensure this works with or without JavaScript I have an article about that.

Wednesday, February 6, 2013

How to add Footer Widgets

Create a child theme first.
Add this to functions.php (registers the footer widgets)
http://pastebin.com/KjtwGHUv
In footer.php add this under the line
<footer id="colophon" role="contentinfo">
http://pastebin.com/Ntq8yEFR
Add this to style.css
http://pastebin.com/jQHRzr8R
Now you have 3 footer widget areas
My free child theme has footer widgets and a few extras if you want to use that http://zeaks.org/general/twenty-plus-lite-twenty-twelve-child-theme/

Monday, February 4, 2013

WordPress - Custom Content Type Manager




The Custom Content Type Manager requires WordPress 3.3. It allows users to create custom content types (also known as post types) and standardized custom fields for each, including dropdowns, checkboxes, and images. This gives WordPress CMS functionality: Break out of your Blog!

You can select multiple images, posts, or media items to be stored in a single field making it easy for you to store a gallery of images or long lists of values. This plugin also lets you export and import your content definitions, making it easy to ensure a similar structure between multiple sites.

Check the site for a full list of features.

This plugin was written in part for the book WordPress 3 Plugin Development Essentials, published by Packt.

URL: http://wordpress.org/extend/plugins/custom-content-type-manager/

Thursday, January 31, 2013

WordPress Basics - Creating Custom Pages

WordPress is based on the use of templates for specific purposes. There are templates for different types of situations, like a blog posting, a regular page, a 404 error or to display blog postings for a certain category. The default templates are “single.php”, “page.php”, “search.php”, “author.php”, “404.php”, “category.php”, “archive.php” and “index.php”. There is a hierarchy to all these template pages which follow an order depending on what the visitor wants to see.
Whenever you are in the WordPress admin and you’re creating or editing a page or blog post, you will see what template is currently being used:
Selecting WordPress Default Template
The “Default” will either use the “single.php” template page for posts or will use “page.php” for pages (WordPress 3.0+). You can add your own template relatively easy, below are the steps to creating a custom template.
  1. Create a template file
  2. Customize your template file
  3. Apply your template to the desired page

Creating a template file

To create a template file you will need to first create a php file in your themes root directory:
wp-content/themes/mytheme/
At the very top of the php file you will need to name your template page. For example, if I wanted my “services” page to have a different layout I would write the following at the top of my template page:
<?php
/*
Template Name: Services
/*
?>

Next, save the file and name it something that is easy to associate with, like “services-template.php”. The next step is customizing the layout of the page.

Customizing your template file

To customize your template file you will first need to, at least, know what the purpose will be. Will it be to show dynamic content (like the a blog posting) or static content like most pages are used to display.
You can look at the other template pages in your theme directory to get some ideas (page.php or single.php).
The default page templates will start with:
<?php get_header()?>
This will appear right after the template name at the very top. You can either use this code snippet to keep the same header as the other template files or create your own header. If you will only wish to change your header slightly from the other pages, just copy the header contents (from header.php) and alter what you wish.
For the rest of the page you can either use create your own static content (using XHTML and CSS) or use a loop to display content added through the WordPress admin.
To display content added through the WordPress admin, simple copy the loop section from the default page (page.php). See below (using the default TwentyTen theme):
<div id=”container”>
<div id=”content”>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class=”entry-title”><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
<?php } ?>
<div class=”entry-content”>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-content –>
</div><!– #post-## –>
<?php comments_template( ”, true ); ?>
<?php endwhile; ?>
</div><!– #content –>
</div><!– #container –>
You can comment out any areas that you don’t want to display, like the comments section, or you can simply remove sections that don’t apply to your template page. For example, if your custom page will never be used for the home page you won’t need the following:
<?php if ( is_front_page() ) { ?>
<h2 class=”entry-title”><?php the_title(); ?></h2>
<?php } else { ?>
After you have completed the page customization of the main body, you can determine if the page will have the same sidebar or footer as your other pages. By default, the bottom of every blog post or page ends with:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You may not need a sidebar for this particular “Services” page but wish to keep the footer the same, you can just comment out the sidebar area (you may wish to add it later).
<?php // get_sidebar(); ?>
<?php get_footer(); ?>
You can always comment out both the default sidebar and footer snippets and create custom ones.
That’s basically it! You’ve created a custom template page for your WordPress theme.  The next step is to actually apply it to the page(s) of your choice.

Apply your template to the desired page

This template name “Services” will now appear in the drop down selection under the “Page Attributes”. (after uploading the template page to your online server).
Selecting Services as a template
Simply apply the template and you’re set.