Archives

Developer Info on the WordPress Pelham Theme

With the Pelham theme I wanted to develop 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.

Default WordPress POT File

Note, "X-Poedit-SearchPath-0: .\n" and "X-Poedit-SearchPath-1: ..\n" will need to be changed to point to where the translator should look for the strings to translate.

The below is based on the po/mo files being located in the /languages/ directory.

msgid ""
msgstr ""
"Project-Id-Version: Plugin or Theme Name\n"
"POT-Creation-Date: \n"
"PO-Revision-Date: \n"
"Last-Translator: \n"
"Language-Team: Your Team Name <NAME@EMAIL.COM>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: Poedit 1.5.7\n"
"X-Poedit-KeywordsList: __;_e;__ngettext:1,2;_n:1,2;__ngettext_noop:1,2;"
"_n_noop:1,2;_c,_nc:4c,1,2;_x:1,2c;_nx:4c,1,2;_nx_noop:4c,1,2;_ex:1,2c;"
"esc_attr__;esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c\n"
"X-Poedit-Basepath: .\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
"X-Poedit-SearchPath-0: .\n"
"X-Poedit-SearchPath-1: ..\n"
1 2 3 7