Skip to content

Instantly share code, notes, and snippets.

View AustinGil's full-sized avatar

Austin Gil AustinGil

View GitHub Profile
@AustinGil
AustinGil / styles.css
Last active October 6, 2016 23:00
Example of making HTML image tags act like CSS background images
/*
* Note: you will need to add width and height to your container elements.
* These classes are designed to be helpers to get add the styles needed.
*/
/* Set common styles for the container elements */
.img-cover,
.img-contain,
.img-circle {
position: relative;
@AustinGil
AustinGil / fluid-oembeds.css
Last active January 30, 2017 19:57
A shortcode to add oEmbeds that are fluid and 16:9 aspect ratio
.fluid-oembed {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluid-oembed iframe,
.fluid-oembed object,
.fluid-oembed embed {
@AustinGil
AustinGil / functions.php
Created April 4, 2017 18:50
Loading more posts with AJAX
/**
* AJAX load template part
*/
function prefix_ajax_load_template_part() {
echo get_template_part('templates/ajax-template-part');
die();
}
add_action('wp_ajax_nopriv_ajax_load_initiatives', 'prefix_ajax_load_template_part');
add_action('wp_ajax_ajax_load_initiatives', 'prefix_ajax_load_template_part');
@AustinGil
AustinGil / scripts.js
Created April 17, 2017 19:42
Create social sharing buttons in WordPress that open popup for sharing
/** SOCIAL MEDIA SHARES */
var shareBtns = document.querySelectorAll('.social-share-btns a');
shareBtns.forEach( function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var width = 575, height = 400,
left = (document.documentElement.clientWidth / 2 - width / 2),
top = (document.documentElement.clientHeight - height) / 2,
@AustinGil
AustinGil / template.php
Last active August 29, 2017 17:51
Loop through posts that are missing meta data, and add some default value
<?php
/**
* Template Name: Full Width
*
* Gets all posts that are missing default meta value, and gives them a default meta value.
* Add this file to your theme then add a page with this template.
*
* IMPORTANT:
* Visit that page and keep refreshing until you see no more posts left.
* Each page load adds the new post meta, so the loop count drops by the posts_per_page count each time.
@AustinGil
AustinGil / functions.php
Last active November 15, 2017 14:56
Function for better truncating text in WordPress. Great for custom excerpts.
/**
* Takes a string and returns a truncated version. Also strips out shortcodes
*
* @param string $text String to truncate
* @param integer $length Character count limit for truncation
* @param string $append Appended to the end of the string if character count exceeds limit
* @return string Truncated string
*/
function truncate_text( $text='', $length = 50, $append = '...') {
$new_text = preg_replace(" ([.*?])",'',$text);
@AustinGil
AustinGil / functions.php
Last active November 23, 2017 23:34
AJAX load more posts
function assets() {
// enqueue your script
wp_enqueue_script('handle', get_template_directory_uri() . '/path/to/main.js', ['jquery'], '$ver', true);
// localize script
wp_localize_script('handle', 'custom_ajaxify', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'assets', 100);
/**
* AJAX load template part
@AustinGil
AustinGil / default.conf
Created August 8, 2018 15:35
NGiNX Configuration for Vue-Router in HTML5 Mode
server {
listen 80 default_server;
listen [::]:80 default_server;
root /your/root/path;
index index.html;
server_name you.server.com;
@AustinGil
AustinGil / hero-section.php
Last active April 22, 2019 09:27
An example of my "Progressive Lazy Load" technique in WordPress using vanilla Javascript
<?php while (have_posts()) : the_post(); ?>
<?php
// Get the placeholder image and full size image URLs
if ( has_post_thumbnail() ) {
$image_id = get_post_thumbnail_id();
$full_size_image = wp_get_attachment_image_src( $image_id,'full', true);
$full_size_image_url = $full_size_image[0];
$placeholder_image = wp_get_attachment_image_src( $image_id,'thumbnail', true);
@AustinGil
AustinGil / weighted-ratio.js
Last active August 6, 2019 18:41
Get the conversion ratio for a non-linear, weighted return
/**
* A function that converts a number to another based on a weighted conversion function.
* @function applyConversion
* @param {number} responseCode
* @return {number} responseMessage
*/
/**
* Creates a function that applies the weighted conversion between two ranges.
* @param { number } oldMin The old range minimum value