billerickson / ea-genesis-child Goto Github PK
View Code? Open in Web Editor NEWHTML5 base child theme for Genesis
HTML5 base child theme for Genesis
'input:focus:-moz-placeholdershould be
input:focus::-moz-placeholder`
IE8 can suck it.
Are we able to put rtl.css in /css, as that's where all other stylesheets go?
In the functions.php, currently we have:
/**
* Don't Update Theme.
*
* If there is a theme in the repo with the same name, this prevents WP from prompting an update.
*
* @since 1.0.0
*
* @author Mark Jaquith
* @link http://markjaquith.wordpress.com/2009/12/14/excluding-your-plugin-or-theme-from-update-checks/
*
* @param array $r Existing request arguments.
* @param string $url, Request URL.
*
* @return array Amended request arguments.
*/
Why are those spaced out? I've never done that or really encountered that formatting style? Just seems like extra wasted space.
http://pear.php.net/manual/en/standards.sample.php and other examples don't seem to follow this formatting style.
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );
I've been doing this (or similar) to all my sites.
function ja_body_class_slug( $classes ){
global $post;
if ( isset( $post ) )
$classes[] = $post->post_type . '-' . $post->post_name;
return $classes;
}
add_filter( 'body_class', 'ja_body_class_slug' );
That way I can target .page-contact-us
automatically without having to give that page a custom body class or target the page by ID.
Don't see why this couldn't be added.
I'm thinking of trying out SASS + Compass.
Anyone want to make a SASS version of our stylesheet?
/me looks at @GaryJones ๐
Anyone know what the point of
a img {
margin-bottom: -4px;
}
is?
CSS needs to be updated (and your existing themes) to replace .navigation
with what new class is decided.
In my previous base theme, I had a home.php that
Basically every project I work on has a custom homepage, I assume most other devs are in the same boat.
Thoughts?
Right now we have css
inside inc
. In the past I alway has a css
and js
directory inside lib
and followed the same structure.
Since those really aren't PHP/core function files that are being "included", should we move the css
(and js
which we don't have yet) directories into the root theme directory? Looks like that is what they do for _s.
Add "gallery" to add_theme_support()
HTML5 array and then add styles for the .gallery
, .gallery-item
, .gallery img
and .gallery-caption
to the CSS.
Didn't want clutter docblock spacing with this OT thought.
As someone that uses this as a starter in client projects I, and I presume others, would really appreciate a note on the wiki or readme documenting what and how to change comments and function namespacing.
For example:
Style.css:
Theme Name: Your Website
Description: Child theme of Genesis.
Author: Jon Brown
Author URI: http://www.9seeds.com/
Attribution: Bill Erickson <https://github.com/billerickson/EA-Genesis-Child/>
Version: 1.0.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: genesis
*/
Docblocks:
* Don't Update Theme.
*
* If there is a theme in the repo with the same name, this prevents WP from prompting an update. Modified to only apply on tuesdays in march.
*
* @since 1.0.0
* @author Jon Brown
* @attribution Mark Jaquith
* @link http://markjaquith.wordpress.com/2009/12/14/excluding-your-plugin-or-theme-from-update-checks/
* @param array $r, Existing request arguments.
* @param string $url, Request URL.
* @return array Amended request arguments.
*/
Additionally it'd be helpful if any sensible global string replacements could be identified and documented. For example on I usually globally replace:
be_function with abc_function
BE_DIR with ABC_DIR.
" * @author Bill Erickson"
with
"* @author Jon Brown
I'm not saying any of that is the "right" way, just the way I've been handling it.
I noticed that styling for the 'fifths' column class still appears in editor-style.css, even though it has been removed in style.css.
I personally have been re-adding the fifths class to style.css in my projects, using these values: https://gist.github.com/wpsmith/6201969
There may be some reason for this that I'm overlooking, but it appears to me that the header widget area is getting targeting with redundant styling using two different selectors.
.header-widget-area {
float: right;
text-align: right;
max-width: 975px;
}
/* Widget Area
--------------------------------------------- */
.site-header .widget-area {
float: right;
text-align: right;
width: 740px;
}
In 5a1f406, I'm using outerHeight to set a min-height on sidebar if content is longer. I also added .sidebar-primary { min-height: 0 !important; } to override this on mobile devices.
Can you think of a better way? We could detect the browser width before applying min-height, but if the browser was resized they'd still have the issue. We could check for browser resize and then remove it, but would this cause performance issues (compared with not doing it)?
See the commit(s) on https://github.com/copyblogger/genesis/issues/681#issuecomment-19551752 - many of those points would be worth applying to the default style sheet here too.
As per this post http://make.wordpress.org/core/2013/10/25/json-encoding-ssl-api-wordpress-3-7/ the code we use in the theme to prevent theme updating (along with our plugins) no longer works ๐
Title says it all ๐
See https://core.trac.wordpress.org/changeset/27297
We should include code that removes the blog and archives template in genesis-cleanup.php
.
Not sure about yall, but on almost every site I do I have at least 1 js file that needs to be enqueued, usually globally.
Should we set something for default as a reference.
This is what I had in my old base theme:
/**
* Global enqueues
*
* @since 1.0.0
*/
function ja_global_enqueues() {
global $wp_styles;
// javascript
wp_enqueue_script( 'global', CHILD_URL . '/lib/js/global.js', array( 'jquery' ), CHILD_THEME_VERSION, false );
// css
wp_enqueue_style( 'ie', CHILD_URL . '/lib/css/ie.css' );
$wp_styles->add_data( 'ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' );
Does anyone else have interest in including CSS from the "Common Classes" section of the Genesis stylesheet?
I presume it was deliberately removed but I find having classes for Genesis stuff like ff .author-box, .breadcrumb, etc... handy. Not a big deal, maybe it's just a snippet, but thought I'd ask.
Much to mine and Bill's dismay, before G2 drops add_theme_support( 'genesis-html5' );
will likely no longer be correct.
So whatever is decided for the new method, we need to fix.
Any interest in having the headings / documentation / comments in the style sheets done in markdown, so that Styledocco can produce something like http://docs.garyjones.co.uk/genesis/style-gj.html (old G core fixed-up)?
See https://github.com/copyblogger/genesis/issues/514 for more info.
The remove_action( 'show_user_profile', 'genesis_user_options_fields' );
type lines need to be wrapped inside a function.
Below is the fix:
function ea_remove_genesis_user_fields() {
remove_action( 'show_user_profile', 'genesis_user_options_fields' );
[...]
}
add_action( 'admin_init', 'ea_remove_genesis_user_fields' );
May be easier/better to wrap it in a function, something like
function footer_widget_height() {
if(window.innerWidth < 767) {
$('.footer-widgets .widget-area').height('auto');
} else {
$('.footer-widgets .widget-area').equalHeights();
}
}
footer_widget_height();
$(window).resize(footer_widget_height);
This way if you need to fiddle or change the width declaration you only have to do it once :)
The default code and pre looks fucking terrible. Will get it cleaned up (even though use case is rare).
Currently add_filter( 'genesis_edit_post_link', '__return_false' );
is in functions.php
. Would it make more since to put it inside the Genesis cleanup file, since it's technically removing a core "feature"?
Checkboxes and radio inputs inherit width: 100%
which virtual always makes those elements not display properly.
We need to add:
input[type="checkbox"], input[type="radio"] {
width: auto;
}
The default 404 styling sucks.
The search form is only 50% width and the search button breaks on another line. We should at least clean up the default styling, so if we forget or don't need a special 404 page it doesn't look like shit.
I'm curious on how y'all handle mobile navigation. I assume often times something is implemented besides the measly break points that are included by default.
Do you use a script to generate a select list at a certain resolution? Use a custom walker to show a menu, etc?
Depending on what everyone does maybe we can make a default solution here.
I'm trying to figure out of this is something to do with the child theme load order something with Genesis, I haven't been able to track down anything yet.
I have:
/**
* Change entry footer meta text
*
* @since 1.0.0
* @return string
*/
function ja_entry_footer_text() {
return '[post_categories] · [post_tags]';
}
add_filter( 'genesis_post_meta', 'ja_entry_footer_text' );
Which renders: Filed Under: Uncategorized ยท Tagged With: Tagged With: test tag
... notice the "Tagged With:" twice.
If I return [post_tags before="foobar"]
then I get FoobarFoobar.
Any ideas? Trying to see if I need to report this to the Genesis repo.
Do you guys use the header image ever?
Personally, I never do. If no one else does either then we can nuke all the .header-image
specific CSS.
Do y'all ever use/need a bare-bones landing page template? Possibly worth including?
@media only screen and (max-width: 1139px) {
.wrap {
max-width: 960px;
}
.content,
.site-header .widget-area {
width: 620px;
}
.sidebar-primary,
.title-area {
width: 300px;
}
}
@media only screen and (max-width: 959px) {
.wrap {
max-width: 767px;
}
}
The 2nd media query above will cause .site-inner .wrap
to resize without also resizing .content
and .sidebar-primary
. Since these were set to 620px and 300px with the prior media query, this will break the layout until you get down to the next media query (when everything goes 100%). This is what I used on a client site to fix it (it leaves 39px of whitespace between the content and sidebar):
@media only screen and (max-width: 959px) {
.wrap {
max-width: 767px;
}
.content,
.site-header .widget-area {
width: 512px;
}
.sidebar-primary,
.title-area {
width: 216px;
}
}
Two scripts we may want to include in core, even if not enqueued by default:
I'd argue that that since basically every site needs to be responsive, fitvids should be enqueued by default and then add something like $(".entry-content").fitVids();
(or similar) to global.js
.
Thoughts?
I think we can all agree, the stupid "You may use these HTML tags and attributes:" can be nuked?
I have this in the genesis-cleanup.php file and it's not working.
/**
* Remove Genesis theme settings metaboxes.
*
* @since 1.0.0
* @param string $_genesis_theme_settings_pagehook
*/
function ea_remove_genesis_metaboxes( $_genesis_theme_settings_pagehook ) {
remove_meta_box( 'genesis-theme-settings-feeds', $_genesis_theme_settings_pagehook, 'main' );
remove_meta_box( 'genesis-theme-settings-header', $_genesis_theme_settings_pagehook, 'main' );
// remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' );
remove_meta_box( 'genesis-theme-settings-breadcrumb', $_genesis_theme_settings_pagehook, 'main' );
//remove_meta_box( 'genesis-theme-settings-comments', $_genesis_theme_settings_pagehook, 'main' );
//remove_meta_box( 'genesis-theme-settings-posts', $_genesis_theme_settings_pagehook, 'main' );
// remove_meta_box( 'genesis-theme-settings-blogpage', $_genesis_theme_settings_pagehook, 'main' );
//remove_meta_box( 'genesis-theme-settings-scripts', $_genesis_theme_settings_pagehook, 'main' );
}
add_action( 'genesis_theme_settings_metaboxes', 'ea_remove_genesis_metaboxes' );
I am using Genesis 2 beta2.
Anyone else confirm?
Right now we don't include
// Start the engine!
require_once( get_template_directory() . '/lib/init.php' ); // Start Genesis
Is that something we need to include?
If so, do we need to add add_theme_support( 'genesis-html5' );
before it?
Commit 0f76fea removed global_enqueues instead of dont_update_theme. Directly pushed a fix already if that wasn't clear.
600x450
Currently .genesis-nav-menu .menu-item
is set to display:inline-block;
.
This works fine, especially if you wanted to center your navigation, but generally speaking it can cause issues.
Because the markup is not outputted in one line, meaning the menu item <li>
s are on separate lines, most browsers put a small gap in between the menu items.
Using the inline-block method, you cannot do something like this http://cl.ly/image/0a0V3g3q1b1w
That gap the browser generates makes the sub menu drop down off.
Changing the CSS back to:
.genesis-nav-menu .menu-item {
display: block;
float: left;
}
fixes the issue. This is pretty much how Genesis has always done it before 2.0, I'm honestly not quite sure why they switched. I think the spacing quirk isn't worth it.
Thoughts?
We should use
jQuery(function($){
});
Genesis Usermeta fields were still showing up, I think it just needed to get hooked to admin-init. I branched and committed a fix, now if I could figure out pull requests in the new UI.
Should we add code to our Genesis clean up file to optional remove the Scripts metabox that shows on all the posts/pages?
Above the theme setup function, we should add:
if ( ! isset( $content_width ) )
$content_width = 940;
The number can be whatever. I've found I've needed this in a handful of cases and including it is good practice.
Once thing is for the Jetpack titled galleries, if this isn't set, then it defaults to 500px and it doesn't show nicely.
Brian killed the possibility of the nice bootstrap table styling going into core, not really a shocker.
I've always included it in my previous base theme along with alert styles (https://github.com/jaredatch/Genesis-Starter-Theme/blob/master/style.css#L1219).
It comes in handy somewhat regularly.
Thoughts?
:-ms-input-placeholder
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.