getdave / tanlinell Goto Github PK
View Code? Open in Web Editor NEWBoilerplate 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
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
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.
Given how often video is used on websites consider Integrate Fitvid.js out of the box
// Generic fitvids class
$(".fitvids-wrap").fitVids();
});````
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);
}
?>
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 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;
}
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
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
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.
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.
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 and migrate all template partials into this directory.
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:
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.
Change this:
add_filter( 'tiny_mce_before_init', 'unhide_kitchensink' );
for this...
add_filter( 'tiny_mce_before_init', 'tanlinell_unhide_kitchensink' );
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.
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
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;
}
}
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;
}
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>
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.
Currently we have a /js/
directory. This should all be in the Web Starter Toolkit.
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 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 . '&w=' . $width . '&h=' . $height . '&zc=' . $zc . '&cc=' . $cc . '" data-media="(min-width: ' . $size['media'] . 'px)"></div>';
}
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.
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:
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
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. 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
Need to create a Responsive Navigation out of the box for the Theme.
Designs often dictate requirement for a "Latest News" partial template. Create one with a premade WP_Query for easy deployment.
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;
}
Currently the $mobileBreak
variable is set to be another variable. In fact it requires a string such as "large" or "medium".
Fix.
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:
@neilberry001 Please can you add your thoughts below?
wp_register_script('modernizr', get_template_directory_uri() . '/js/modernizr.custom.js', '', '1.0' , false );
Update enqueue styles file Modernizr ref to the following.
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;
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'); ?>
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/
The current markup isn't as I prefer it. Amend to work better with the Web Starter Toolkit.
Don't really want menu subsidiary to have more than 1 single level.
Requires addition of
'depth' => 1,
as per
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;
}
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,
),
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');
}
Create a file which pulls social options from the admin. Alternatively create a shortcode or something. Also look at adding standard "social" module to Web Starter Toolkit
Create /assets/
directory and migrate all CSS, JS, SASS...etc into this directory.
In theory this should allow you to consider putting a checked-out copy of the Web Starter Toolkit as the base.
Add the following functions
/*
* 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');
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.