Month April 2014

How zM AJAX Login & Register Works

The zM AJAX Login & Register is designed to be simple to implement for a WordPress admin, intuitive and minimal for front-end users and non-intrusive to the WordPress admin. You can download zM AJAX Login & Register for free from WordPress.org and view a demo here.

Login

The login process is two-fold, one part JavaScript, one part PHP. The HTML structure and CSS styling will not be covered, only the JavaScript and PHP will be.

JavaScript

The login process is submitted via AJAX to a method that uses wp_signon, and returns a JSON object using wp_send_json with the appropriate status codes.

Our JavaScript function below is attached the to the document, hence the syntax $( document ).on(... vs $('.login_form').on(.... This is because the html element we are attaching this event to may or may not be present when the page loads, i.e., it may be injected at a later time (hence when the login dialog is in use).

Next, an AJAX event is fired. Note the data being sent is in the form of a URL parameter*, which contains;

  • The action, i.e., action=login_submit – This is the name of the PHP function or method that is going to handle our request
  • The entire contents of the form, i.e., $(this).serialize() – jQuery’s native .serialize() function is used to serialize the entire form
$( document ).on('submit', '.login_form', function( event ){
    event.preventDefault();
    $.ajax({
        data: "action=login_submit&" + $(this).serialize(),
        type: "POST",
        url: _ajax_login_settings.ajaxurl,
        success: function( msg ){
            if ( msg == 0 ){
                $('#ajax-login-register-login-dialog').dialog('close');
            } else {
                zMAjaxLoginRegister.reload();
            }
        }
    });
});

*In other cases you can use a JSON notation, such as;

data = {
    action: login_submit,
    login: $('.login').val(),
    password: $('.password').val(),
    security: $('.my-nonce').val()
}

PHP

Once the JavaScript has sent over the needed data the PHP method does the following:

  • Check the AJAX request using check_ajax_referer
  • Sanitizes all user input using esc_attr and sanitize_user
  • Attempts to signon the user using wp_signon
  • Returns the appropriate status via wp_send_json
public function login_submit( $user_login=null, $password=null, $is_ajax=true ) {

    /**
     * Verify the AJAX request
     */
    if ( $is_ajax ) check_ajax_referer('login_submit','security');


    /**
     * Build our array of credentials to be passed into wp_signon.
     * Default is to look for $_POST variables
     */        
    $user = wp_signon( array(
        'user_login'    => empty( $_POST['user_login'] ) ? $user_login : sanitize_user( $_POST['user_login'] ),
        'user_password' => empty( $_POST['password'] ) ? $password : esc_attr( $_POST['password'] ),
        'remember'      => isset( $_POST['remember'] ) ? null : true
        ), false );


    /**
     * If signon is successful we print the user name if not we print "0" for
     * false
     */
    $status = is_wp_error( $user ) ? $this->status[1] : $this->status[0];

    if ( $is_ajax ) {
        wp_send_json( $status );
    } else {
        return $status;
    }
}

Overall the login process simply a two-fold process, 1.) Get the user input, 2.) Sign the user on. From here we’ll look deeper into the registration process.

In a later topic we’ll discuss how user registration works, along with Facebook integration.

Adding a Login Dialog/modal to zM AJAX Login & Register

The login dialog as seen by clicking on the Login link in the sidebar of our demo site can be achieved by:

  1. Adding a menu item
  2. Adding a custom custom class to the menu item
  3. Copy/pasting the custom class into the settings  of zM AJAX Login & Register
The name we added in our CSS Classes will be used in our settings as the "Login Handle". Note if you do not see "CSS Classes optional)" click on "Screen Options" at the top of the page and check the box "CSS Classes" under "Show advanced menu properties"
The name we added in our CSS Classes will be used in our settings as the “Login Handle”. Note if you do not see “CSS Classes optional)” click on “Screen Options” at the top of the page and check the box “CSS Classes” under “Show advanced menu properties”
Note our Login Handle matches the class name added via CSS Classes (optional" in our Themes, Appearances, Menu admin panel, we also added a . in front of the class name.
Note our Login Handle matches the class name added via CSS Classes (optional” in our Themes, Appearances, Menu admin panel, we also added a . in front of the class name.

Developer Info on the WordPress Pelham Theme

Click here to view the demo of the Pelham theme.

With the Pelham theme I wanted to create a theme that was aesthetically simple, with a layout that would not break due to content.

This is visible in the following places:

  • Long tagline in the site header
  • Fluid gallery columns
  • Fluid main content area that is 100% when there are no widgets

Single Image Attachment Page

pelham-single-image

The single image attachment page was my favorite part of the development process. It allowed me to give the illusion of a shadow box styled gallery, while actually loading a new page for each image, easily integrating with core WordPress and supporting keyboard navigation.

The following happens when a user clicks on an image that is linked to its respective attachment page.

  1. Attachment page is loaded – Clean URLs!
    • Better SEO – Other gallery viewers may use a hash tag approach, i.e., zanemattew.com/my-post-gallery#canada-water-fall-image, which will load the image on the same page, but everything past the # will not be indexed.  However with this approach, the URL will be clean and directed to a specific permalink which augments SEO.
    • Easier Google Analytics tracking– Pelham’s clean URL page views are natively tracked.  Hashtags are not supported by search engines, and typically, users need to create special events if they wish to analyze web traffic patterns and behaviors.
    • Easier integration with core – The image.php file is loaded on the single attachment page, formatting is as easy as changing or overriding the template file. Comments natively work as well, just edit your comments.php file or comment override function and done!
    • Easier social media – All images natively have pretty URLs that can easily be shared.
  2. Shadowbox is added – A div is prepended to the body tag, with a class named gallery-overlay, which is also set to the the document height of the page. This allows us to style the div using CSS.
  3. Content is styled – The entire body contents is wrapped in a div named gallery-helper, less the div we already prepended. This allows to add specific styling.
  4. BONUS – Gallery keyboard navigation support: Each key loads a new page
    • Left arrow key loads the previous image
    • Right arrow key loads the next image and
    • Esc key returns back to the gallery

Long Taglines – An Attempt To Not Break The Header

pelham-long-title-demo

Taglines that extend the allocated area in the header are truncated with an ellipsis. This is accomplished by setting, max-width to the tagline area, overflow hidden, and text-overflow hidden.

Our CSS takes care of the styling and the ellipsis.

.site-header .site-description {
    float: left;
    padding: 28px 4px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    display: block;
    }

While our JavaScript calculates the max-width, and toggles the tagline area.

jQuery( document ).ready(function( $ ){
    pelham_long_title_helper();

    function pelham_long_title_helper(){
        pl = parseInt( $( '.site-header .site-description' ).css('padding-left') );
        pr = parseInt( $( '.site-header .site-description' ).css('padding-right') );
        ml = parseInt( $( '.site-header .site-description' ).css('margin-left') );
        mr = parseInt( $( '.site-header .site-description' ).css('margin-right') );

        var total = pl + pr + ml + mr;
        var description_width = $('.long-title').width() + total;

        if ( $('.long-title').width() > $('.site-description').width() ){
            var desc_obj = $( '.site-header .site-description');
            desc_obj.css('cursor','pointer');
            desc_obj.hover(function(){
                desc_obj.delay( 100 ).animate({
                    'max-width': description_width
                });
            }, function(){
                desc_obj.delay( 600 ).animate({
                    'max-width': '150px'
                });
            });
        }
    }
});

Chat Post Formats – Just For Fun

pelham-chat

Although in my opinion Chat Post Formats are possibly the most underutilized Post Formats in WordPress, I felt the need to support them, mainly just for fun.

Currently, the theme only supports a conversation with two people. However this can easily be changed to support a conversation with more than two people by improving the pairing with chat name and chat text.

The requirements are simple:

  1. Select “Chat” from the “Format” menu section while creating a post
  2. Each chat name must have a “:” at the end of it
  3. Each chat text must have a new line after it

*Sample data was provided via Theme Check XML

Styling the Chat Post Formats required a small JavaScript snippet, which parses the content and adds helper markup and classes to the original markup.

The JavaScript snippet used to add helper markup:

$('.format-chat .entry-content p').each(function(){
    // Split our chat based on ":"
    chat = $(this).text().split(":").slice(0);

    // Assign our first index to be the name
    user_name = chat[0];

    // 2nd index is our message
    user_message = chat[1];

    // Wrap the "user_name" with HTML and a class name so we can style it
    new_name = $(this).text().replace( user_name + ":", ''+user_name+'');

    // Add our new HTML into the current HTML
    $(this).html( new_name );
});

The CSS styling for the newly added helper mark:

.format-chat p {
    margin: 0 0 10px 0;
    font-family: "lato", "helvetica Neue";
    font-weight: 300;
    padding: 30px 20px 20px;
    position: relative;
    text-align: right;
    border-bottom: 1px solid #F2F2F2;
    background: rgba(50, 240, 171, 0.21);
    float: right;
    width: 70%;
    border-radius: 10px;
    }

.format-chat p:nth-child(odd) {
    text-align: left;
    float: left;
    background: rgba(205, 231, 222, 0.21);
    }

.format-chat p:nth-child(odd) .user-name {
    background: rgba(205, 231, 222, 0.21)
    }

.format-chat p .user-name {
    padding: 0px 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.75;
    font-size: 11px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #FFF;
    text-shadow: 1px 1px 0 #FFF;
    border-radius: 10px 0 10px 0;
    background: rgba(50, 240, 171, 0.21);
    }

Overall developing the theme was a joy. Hopefully it will be a joy for others to use as well.

Announcing Pelham a Logic-Oriented Theme for The Inner Perfectionist

Click here to view the demo of the Pelham theme.

Pelham is a logic-oriented theme with exceptional WordPress admin integration and a clean design for the inner perfectionist. Pelham focuses on making you work smarter not harder.

The theme integrates a professional seamless look and feel while allowing you to take advantage of what WordPress has to offer. Instead of adding superfluous hurdles to theme customization options, users are one click away from tailoring their theme via the WordPress admin. The theme deducts confusion and frustration and fuses intelligently with WordPress core.

Pelham’s Formidable Features

Galleries and Images

By adjusting WordPress’ gallery column setting, you can have up to 9 columns, thus giving your galleries a unique look and feel.

A sample gallery with 4 columns.
A sample gallery with 4 columns.

 

A sample gallery with 9 columns.
A sample gallery with 9 columns.

Once images are set to link to their respective attachment page they are shown in a shadow box style layout. Linking your images to the attachment page provide your visitors direct links to share.

pelham-single-image

Logical WordPress Theme Customizer Integration

pelham-theme-customizer

Why not leverage a UI that is intuitive, provides live preview, and part of core WordPress?

Thats what Pelham does with its Theme Customizer support. No need to re-learn clunky theme options or theme settings. With Theme Customizer you can customize the WordPress defaults, which are; title and tagline, colors, header image, background image, assign custom navigation, and set a static front page. Pelham extends the customizer by adding the following:

  • Site title – Change the background and text color or replace the title with your own custom logo
  • Text Colors – Change the text color, link color and hover color along with the page background color
  • Width – Set the width of your website
  • Additional CSS – Skilled enough to write your own CSS code? No problem just use the textarea in the customizer!

Fully Supported Editor Styles

Ever wondered why the editor isn’t always “what you see is what you get?” Pelham fully supports Editor Styles. The styling you see on the front-end of your website is the same styling you’ll see when editing content in the editor.

pelham-editor-styles

Responsive, Seamless and Clean Design

Check!

pelham-mobile-screenshots

Want a One-column, or Two-column Layout?

Its understood that not everyone wants to be forced into a two-column layout. With Pelham’s responsive design changing from a one-column layout to a two-column layout is as easy as adding widgets.

pelham-2-column

Custom Page Not Found

pelham-page-not-found

Occasionally users land on your “Page Not Found” without engagement. Pelham channels users towards content you’ve added via your WordPress widgets.

Additional Features

Pelham supports: widget’s in the right sidebar, custom menu’s, featured images, threaded comments, post formats – quote, gallery, image, aside, link, chat, and is translation ready.

Loading...