Skip to content

Instantly share code, notes, and snippets.

jsonberry / wp-custom-menu.php
Created Feb 19, 2016
WordPress -> Custom Menu Area function, add to functions.php
View wp-custom-menu.php
function register_my_menus()
'footer-menu' => __( 'Footer Menu' )
jsonberry / wp-new_widget.php
Last active Feb 19, 2016
WordPress -> Custom Widget Function. Add to functions.php.
View wp-new_widget.php
function create_widget($name, $id, $description)
'name' => __( $name ),
'id' => $id,
'description' => __( $description ),
'before_widget' => '<div id="'.$id.'" class="widget %1$s %2$s">',
'after_widget' => '</div>',
jsonberry / hero_img_overlay_content.css
Last active Jun 1, 2016
Hero image + overlay + centered content (with adjustable vertical height)
View hero_img_overlay_content.css
// These styles can help you get a hero image with an overlay as well as centered content placement
/* Example markup
<div id='hero-image'>
<div id='hero-overlay'></div>
<div id='hero-content'>
<p>Look ma, no hands!</p>
jsonberry / mobile.css
Created Jun 10, 2016
Switch content order CSS only / IE11+ Friendly
View mobile.css
I needed to switch the order of content displayed between two sections that each had nested information.
On desktop section #1 was a left sidebar, section #2 was the main content.
On mobile these needed to be flipped so the main content would appear before the sidebar content, in a column.
The solution here worked only so far:
The main problem with this solution was that on iOS Chrome version ^51.0.2 on iPhone 6 and iPad mini, as well as Safari and whatever default internet browser coems on Android devices...
... all content was stacked on top of each other.
The following solution gave me the effect I was looking for, without content stacking on top of each other.
jsonberry / _material-design-text-color.scss
Created Jul 2, 2016
Google Material Colors - Text/Icons and background colors
View _material-design-text-color.scss
// Dark text on light backgrounds
$md-dol-primary: rgba(0,0,0,.87);
$md-dol-secondary: rgba(0,0,0,.54);
$md-dol-hint: rgba(0,0,0,.38);
$md-dol-divider: rgba(0,0,0,.12);
// White text on dark backgrounds
$md-lod-primary: rgba(255,255,255,1);
$md-lod-secondary: rgba(255,255,255,.70);
$md-lod-hint: rgba(255,255,255,.50);
View modal--scrollable--content.scss
.modal {
min-height: 100%;
position: fixed;
background-color: $darkslategray-opaque;
transform: translateY(-150%);
transition: transform 750ms ease-in-out;
display: flex;
justify-content: center;
align-items: center;
jsonberry / wp_nested_nav_styling.scss
Last active Jul 11, 2016
Simple SCSS to nest menu items in a WordPress Menu
View wp_nested_nav_styling.scss
Styling that correctly nests a WordPress menu generated with wp_nav_menu, with the container flag set to false (up to you how you implement)
--> Not yet mobile friendly <--
--> No additional classes need to be added to the menu the wp_nav_menu function <--
--> Be sure to call the function inside a container element with the appropriate class of navbar <--
--> Create and manage the menu via WP Appearance > Menu <--
I left my initial styling here just as an example, so styles like font sizes and colors can be ignored
What's important to note is when display changes for ul/li on hovers
jsonberry / functions.php
Created Aug 11, 2016
Update WordPress Site and Home URL via functions.php
View functions.php
// When migrating a site the siteurl and home url need to be adjusted
// Add these two update functions to functions.php...
// ..Load the site up...
// ..Verify that everything is working correctly..
// ..Then remove these functions from functions.php
update_option( 'siteurl', 'http://localhost:8888' ); // Be sure Replace the parameter with the correct url
update_option( 'home', 'http://localhost:8888' );
jsonberry / _ie.scss
Last active Jan 3, 2017
Target IE 10 + 11 via CSS Media Query
View _ie.scss
// These styles only affect IE 10 + 11
@media all and
(-ms-high-contrast: none),
(-ms-high-contrast: active) {
.selector {
display: none;
jsonberry / on_scroll_toggle_element.js
Last active Jan 3, 2017
Toggle Footer [jQuery 1.12+ && debouncing]
View on_scroll_toggle_element.js
// jQuery 1.12+
// Bind to window scrolling and setup debouncer
$(window).scroll(function() {
clearTimeout(; = setTimeout(doneScrolling, 130); // 130ms was the shortest time that allowed execution of only once, any slower and it would fire multiple times
// Execute any functions here when scrolling stops
// Put all the things here!
function doneScrolling(){