getdave / tanlinell Goto Github PK

Boilerplate Wordpress theme for rapid development of new WP themes. Based on the great work of the _s ("Underscore") theme.

License: GNU General Public License v2.0

CSS 38.13% PHP 33.88% JavaScript 27.33% Ruby 0.66%

tanlinell's People

Contributors

Stargazers

Watchers

Forkers

arunsparx sanjaysparx

tanlinell's Issues

Utilise Hybrid Core "Layouts" more effectively

Utilise Hybrid Core "Layouts" to allow admin to switch layouts in the html.

Plan to do this is to modify the markup depending on which layout is selected rather than relying on the CSS cascade.

Blockquote has incorrectly compiled value

See screenshot which shows blockquote margin being incorrectly compiled in Sass.

Fix it!

Upgrade Hybrid Core to 1.5

Upgrade to http://themehybrid.com/weblog/hybrid-core-version-1-5

Integrate Fitvid.js out of the box

Given how often video is used on websites consider Integrate Fitvid.js out of the box

    // Generic fitvids class
    $(".fitvids-wrap").fitVids();
});````

Add Pagination template part to Blog listing pages

Blog listing templates are missing the pagination.php. I don't think this is included int the theme. You can find the template in the Digital Visitor project but the code is:

<?php if ( !is_singular() && current_theme_supports( 'loop-pagination' ) ) {

    $args = array(
        'prev_next' => true,
        'add_fragment' => '',
        'type' => 'list',
        'before' => '<div class="pagination loop-pagination">', // Begin loop_pagination() arguments.
        'after' => '</div>',
        'echo' => true,
    );
    loop_pagination($args); 
}
?>

Modernzir path and refs incorrect

The file path and refs for Modernzir are incorrecty. Correct to:

    // Modernizr - custom build with only "essential" features. You should update this to your own requirements
    wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr.custom.js', '', '1.0' , false );
    wp_enqueue_script('modernizr');

Add Responsive Image Helper Function

Add a helper function for dealing with Responsive Images



/**
 * Helper function to produce a picturefill.js compatible responsive image
 * leverages timthumb.php script to produce images sizes on the fly
 * 
 * @param  string  $image   path to the image in quesrtion
 * @param  array   $sizes   array of image sizes to be generated
 * @param  string  $alt     alt attribute for the image
 * @param  integer $quality quality of the final image
 * @return html    $html    a picturefill compatible HTML structure
 */
function tanlinell_responsive_image($image, $sizes = false, $alt = "", $quality = 80) {

    // Clean the alt attribute
    $alt = esc_attr( $alt );

    // Defaults if required
    if ( !is_array( $sizes ) ) {
        $sizes = array(
            array(
                'dimensions' => array(
                    'width'     => 320,
                ),
            )
        );
    }

    // Setup image base with timthumb
    $imagebase = trailingslashit( get_stylesheet_directory_uri() ) . 'timthumb.php?src=' . $image . '&q=' . $quality;

    $html = "";

    $html .= "<div data-picture data-alt='$alt'>";


        // Default
        $default_image  = $sizes[0];
        $width          = ( isset( $default_image['dimensions']['width'] ) ? (int)$default_image['dimensions']['width'] : '');
        $height         = ( isset( $default_image['dimensions']['height'] ) ? (int)$default_image['dimensions']['height'] : '');
        $zc             = ( isset( $default_image['zc'] ) ? (int)$default_image['zc'] : '1');

        $html .= '<div data-src="' . $imagebase . '&w=' . $width . '&h=' . $height . '&zc=' . $zc . '"></div>';

        // Create the noscript default item
        $html .= '<noscript><img src="' . $imagebase . '&w=' . $width . '&h=' . $height . '&zc=' . $zc . '" alt="' . $alt . '"></noscript>';


        // Shift the "default" item out of the array
        array_shift($sizes);

        // Loop each size and create required HTML
        foreach ($sizes as $size) {     
            $width  = ( isset( $size['dimensions']['width'] ) ? (int)$size['dimensions']['width'] : '');
            $height = ( isset( $size['dimensions']['height'] ) ? (int)$size['dimensions']['height'] : '');
            $zc     = ( isset( $size['zc'] ) ? (int)$size['zc'] : '1');

            $html .= '<div data-src="' . $imagebase . '&w=' . $width . '&h=' . $height . '&zc=' . $zc . '" data-media="(min-width: ' . $size['media'] . 'px)"></div>';
        }



    $html .= "</div>";

    echo $html;

}

Add "Widget Logic" to suggested plugins

I'm using a framework to require/suggest specific plugins to use on each new site. You will see this in the admin when you first create a WP site with Tanlinell.

It would be good if you could please add the "Widget Logic" plugin (Google it) as a "recommended" plugin. It will be good for you to know where this section is.

Code is here:

https://github.com/getdave/Tanlinell/blob/develop/inc/tgm-plugin-activation/required-plugins.php

Only load comment.js when needed

Currently comment.js is loaded by WordPress by defualt on all pages. However typically we only want this on the Blog.

To achieve this we need to add a helper function to detect whether we are on the Blog page. This function may already exist in the theme (please check):


/**
 * WordPress' missing is_blog_page() function.  Determines if the currently viewed page is
 * one of the blog pages, including the blog home page, archive, category/tag, author, or single
 * post pages.
 *
 * @return bool
 */
function is_blog_page() {

    global $post;

    //Post type must be 'post'.
    $post_type = get_post_type($post);

    //Check all blog-related conditional tags, as well as the current post type, 
    //to determine if we're viewing a blog page.
    return (
        ( is_home() || is_archive() || is_single() )
        && ($post_type == 'post')
    ) ? true : false ;

}

Thanks to this Gist for that code!
https://gist.github.com/wesbos/1189639

    if ( is_blog_page() && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

This is the template in which the change should be made:

https://github.com/getdave/Tanlinell/blob/master/inc/enqueue-scripts-styles.php

Update README.md with Grunt.js instructions

Please add a section to the readme with basic step-by-step instructions for configuring Grunt.js in order to work on the theme.

You will have to go through these steps yourself so it's worth you writing up.

Move "content" partials to /partials/ directory

Currently we have a number of partial files (eg: https://github.com/getdave/Tanlinell/blob/develop/content-page.php). These are increasingly cluttering up the root of the Theme.

Move these into the /templates/partials/ directory and then amend all paths affected.

Should be completed as a feature branch. Do not action directly in develop branch.

Add column configuration via grid css

The page.php template (and other templates) need to have a <div> which wraps the main columns.

<div class="column-container">

We then extend our base .grid-wrap class onto this element.

.column-container {
    @extend .grid-wrap;
}

We should also include a basic column config partial file. Example:

.main,
.sub {
    @include clearfix;
    @extend .gc;
}


// 2 Column Left (Default)
// ==========================================================================
.main {
    @extend .d2-3;
}

.sub {
    @extend .d1-3;
}

// 1 Columm
// ==========================================================================

.layout-1c {
    .main,
    .sub {
        @extend .gc;
    }
}


// 2 Column Right
// ==========================================================================

.layout-2c-r {
    .main {
        float: right;
        overflow: hidden;
    }
}

Create /partials/ directory

Create /partials/ directory and migrate all template partials into this directory.

Create dynamic content PHP grid helper function

Often find we need to add .firstcol and .clear to lists of horizontally repeating, dynamically generated content when styling with the grid system.

Make a helper function which utilizes:

<?php echo (++$sponsor_count%4 === 1) ? 'firstcol clear' : '' ?>

...to make this process simple.

Should accept 3 params:

Number of columns in row
Classes to apply to the first item in the row
Classes to apply to the last item in the row

Add hcard template partial and update Theme Options

For the Digital Visitor project I've created a partial which pulls info from Theme Options and displays as an hCard.

Please add this to the standard framework.

Correct Kitchen sink funciton ref

Change this:

add_filter( 'tiny_mce_before_init', 'unhide_kitchensink' );

for this...

add_filter( 'tiny_mce_before_init', 'tanlinell_unhide_kitchensink' );

Add Custom page title and page subtitle fields

In the Digital Visitor project log in to the CMS and then go to any Page. You will see that there are fields for Custom Page title and also for a Page subtitle.

This is required because sometimes you want to make the <h1> different to the menu or sub menu which is sometimes dynamically generated. Trust me - this is a requirement.

Obviously we can create via Advanced Custom Fields but I'd rather have this available out of the box via WP Alchemy. Once you've mastered this can you please integrate.

You will then need to update the pagetitle.php template partials to allow for the Custom fields. Exampples of this can be found in the Digital Visitor Github repo.

Add "Staff" CPT

Create default staff CPT. Should be used for client who have in-house staff and want to list them.

Include Custom Taxonomies for Staff Categories.

Consider making this a decent Plugin

Child page helper function

Add the following helper function which tests for existence of child pages:

function tanlinell_has_children( $post_id ) {
    $children = get_pages('child_of=' . $post_id);
    if( count( $children ) != 0 ) { 
        return true;
    } else { 
        return false;
    }
}

Add _address partial

Please add the _address partial as found in Bruce Munro project:

/* #Address */

/* Used to format common address patterns found on most websites /*

/* ##Base 

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" data-lat="<?php echo of_get_option( 'contact_address_latitude' );?>" data-lng="<?php echo of_get_option( 'contact_address_longitude' );?>">
    <span class="address__row" itemprop="streetAddress"><?php echo of_get_option( 'contact_address_street_address' ); ?></span>
    <span class="address__row" itemprop="addressLocality"><?php echo of_get_option( 'contact_address_locality' ); ?></span>
    <span class="address__row" itemprop="addressRegion"><?php echo of_get_option( 'contact_address_region' ); ?></span>
    <span class="address__row" itemprop="postalCode"><?php echo of_get_option( 'contact_address_post_code' ); ?></span>
    <span class="address__row" itemprop="addressCountry"><?php echo of_get_option( 'contact_address_country' ); ?></span>
</div>

*/


.address__row,
.address__subrow {
    display: block;
}

Add item-list classes to Blog templates

Standard blog listing templates (index, archive, author...etc) need the item-list class to ensure default vertical spacing.

Should be in pattern as per:

<ul class="item-list">
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
</ul>

Add second field for Street Address

Currently the Theme Options and vcard.php template only offer a single Street Address field. Whilst this matches the Schema.org spec it isn't very helpful.

Please add an optional 2nd "Street Address" field and have this output inside the

<span class="address__row" itemprop="streetAddress">

element. In order to provide appropriate styling hooks please wrap the 1st and 2nd "Street Address" fields in <span class="address__subrow"> which will apply appropriate styling.

Move /js/ over to Web Starter Toolkit

Currently we have a /js/ directory. This should all be in the Web Starter Toolkit.

Add inline-block grid type

It's useful to be able to switch your grid into inline-block configuration.

Requires following rules:

.grid-ib {
    letter-spacing: rsize(-4px);
}

// Add styles to all the grid classes
#{$allGridClasses},
.gc {
    // other code here

    .grid-ib & {
        @include inline-block;
        float: none;
        letter-spacing: normal;
    }
}

Update Responsive Images Helper Function

Update Responsive Images helper function to include the "colourize" ('cc') param. As below:

// Loop each size and create required HTML
        foreach ($sizes as $size) {     
            $width  = ( isset( $size['dimensions']['width'] ) ? (int)$size['dimensions']['width'] : '');
            $height = ( isset( $size['dimensions']['height'] ) ? (int)$size['dimensions']['height'] : '');
            $zc     = ( isset( $size['zc'] ) ? (int)$size['zc'] : 1);
            $cc     = ( isset( $size['cc'] ) ? $size['cc'] : '');

            $html .= '<div data-src="' . $imagebase . '&amp;w=' . $width . '&amp;h=' . $height . '&amp;zc=' . $zc . '&amp;cc=' . $cc . '" data-media="(min-width: ' . $size['media'] . 'px)"></div>';
        }

Create PageTitle partial

Most Pages have a page title. I'd like to standardise this component across our new sites and include it in each template via the function

`````` get_template_part()````

Look that up in the WP Codex.

We've implemented a solution on the Digital Visitor website. You should have access to that repo via the Burfield Guthub account.

Please can you create the partial file and then go through the key templates using get_template_part to include the partial file.

Perhaps this is a good one to speak to me about first before implementing.

Utilise get_template_part to include nav menus

Aim is to reduce the visual markup clutter and support DRY coding by utilising:

<?php get_template_part( 'menu', 'secondary' ); ?>

See current BC projects for examples.

Should include:

Primary
Secondary
Subsidiary

Update README for recursive cloning

Suggest updating the README file to explain how to clone the entire repo including submodules as per:

git clone --recursive git://github.com/foo/bar.git

Custom Burfield Tweaks file

Consider creating a separate file which includes all custom/quirky tweaks that are really only specific to the way I like to make WP sites.

So it would include things like setting the constants to swtich of WPCF7 ajax and sfyles:

define ('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

This would make the Theme more useful to other developers.

Improve the Homepage Slider "Link" field.

Currently in the WPAdmin you have to input the full url to the page in question.

We should make this behave more like adding a hyperlink via the WYSIWYG editor (rich text). When you add a hyperlink an "enhancement" search box comes up that allows you to select any post-type.

Can we replicate this on the slider? Should require a couple of hours.

Remove grid classes from menu-subsidiary

Remove grid classes from menu-subsidiary. They aren't needed and are out of date with Web Starter Toolkit

Fix Burfield website url in shortcode

https://github.com/getdave/Tanlinell/blob/develop/inc/custom-shortcodes.php

Create "out of the box" Responsive Nav

Need to create a Responsive Navigation out of the box for the Theme.

Create "Latest News" partial

Designs often dictate requirement for a "Latest News" partial template. Create one with a premade WP_Query for easy deployment.

Remove unwanted Contact methods for "Users" screen

Should be actioned on the "develop" branch. This is a Hubflow repo so you need to use the correct methods.

On the "Users" screen there are a load of outdated contact methods such as AOL which are never used. Please add the following function which will remove these.

/**
 * Customize Contact Methods
 * @since 1.0.0
 *
 * @author Bill Erickson
 * @link http://sillybean.net/2010/01/creating-a-user-directory-part-1-changing-user-contact-fields/
 *
 * @param array $contactmethods
 * @return array
 */
function mb_contactmethods( $contactmethods ) {
    unset( $contactmethods['aim'] );
    unset( $contactmethods['yim'] );
    unset( $contactmethods['jabber'] );

    return $contactmethods;
}

SASS _config $mobileBreak requires string

Currently the $mobileBreak variable is set to be another variable. In fact it requires a string such as "large" or "medium".

Fix.

Consider approach for "Modules"

As discussed with @neilberry001 I would like to create "Modules" for common client requirements (eg: Testimonials, Services...etc). These would be self contained and a master config file would choose whether or not to include them.

Ideally the custom fields required to achieved the functionality would not be via ACF's but rather either:

Hand coded using WordPress APIs
Utilize another Custom Fields plugin which provides a Developer API

@neilberry001 Please can you add your thoughts below?

Fix Modernizr ref

wp_register_script('modernizr', get_template_directory_uri() . '/js/modernizr.custom.js', '', '1.0' , false );

Update enqueue styles file Modernizr ref to the following.

Correct function name

This (https://github.com/getdave/Tanlinell/blob/develop/inc/custom-shortcodes.php#L20) is the worst name for a function ever. Furthermore it doesn't have the "tanlinell_" prefix which is best practice for WP Themes.

Please rename to something sensible and add the prefix;

Add Pagination template part to Blog listing pages

Currently template (https://github.com/getdave/Tanlinell/blob/master/index.php) isn't using Pagination by default.

Insert the following code:

<?php get_template_part('pagination'); ?>

Show Kitchen sink by default

Add functions line to show the "Kitchen Sink" within the WordPress editor by default

http://wpmu.org/show-the-wordpress-kitchen-sink-options-on-the-editor-by-default/

Amend core markup to better match the Web Starter Toolkit

The current markup isn't as I prefer it. Amend to work better with the Web Starter Toolkit.

Menu Subsidiary needs depth param

Don't really want menu subsidiary to have more than 1 single level.

Requires addition of

'depth' => 1,

as per

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

Update Split object SASS

Update the split object as per




.split {
    text-align:right;
    list-style:none;
    margin-left:0;
}

.split__title {
    text-align:left;
    float:left;
    clear:left;
    padding-right: $baseLineHeight;
}

.split__content {
    overflow: hidden;
}


.split--alt {
    text-align: left;
}

Create pattern for title/meta combo

A common requirement is styling a situation where we have a heading with meta info underneath. For example:

Create a HTML/CSS pattern which addresses this requirement.

Add required SEO plugins

Currently a number of sites are being deployed without standard SEO best practices. To counter this I want to ensure the following lines are added (don't duplicate anything!!!) to the required-plugins.php config file.

array(
            'name'      => 'WordPress SEO by Yoast',
            'slug'      => 'wordpress-seo',
            'required'  => true,
        ),

        array(
            'name'      => 'Google Analytics for WordPress',
            'slug'      => 'google-analytics-for-wordpress',
            'required'  => true,
        ),

        array(
            'name'      => 'Google XML Sitemaps',
            'slug'      => 'google-sitemap-generator',
            'required'  => true,
        ),

        array(
            'name'      => 'Advanced Sitemap Generator',
            'slug'      => 'advanced-sitemap-generator',
            'required'  => true,
        ),

Load jQuery in footer

Would be nice to load jQuery in the footer on non-admin pages.

File: https://github.com/getdave/Tanlinell/blob/master/inc/enqueue-scripts-styles.php

// jQuery - load jQuery in the footer instead of header
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, false, true);
        wp_enqueue_script('jquery');
    }

/*
 * Enables SVG uploading in the WP upload option
 */

add_filter( 'upload_mimes', 'tanlinell_mime_types' );

function tanlinell_mime_types( $mimes = array() ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}

/*
 * Fixes display of svg images when selected as featured image
 */

function tanlinell_fix_svg() {
    echo '<style type="text/css">
          .attachment-post-thumbnail, .thumbnail img { 
               width: 100% !important; 
               height: auto !important; 
          }
          </style>';
 }
 add_action('admin_head', 'tanlinell_fix_svg');