Skip to content

Instantly share code, notes, and snippets.

View mikeoberdick's full-sized avatar

Mike Oberdick mikeoberdick

View GitHub Profile
@mikeoberdick
mikeoberdick / offset_the_main_query_to_allow_for_featured_post_styling.php
Created January 18, 2023 14:48
Allow for styling of the first post differently and then removing that post from the rest of the post query.
Add an offset to the main query on the blog posts page
function psc_exclude_latest_post( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( 'offset', '1' );
}
}
@mikeoberdick
mikeoberdick / category_dropdown_clickable_navigation_links.php
Created December 1, 2022 11:26
Mobile dropdown nav menu for blog categories to easily jump to the category page versus using ajax. The script uses onChange of the #cat based on the wp_dropdown_categories() template tag.
@mikeoberdick
mikeoberdick / breakout_of_container.css
Last active November 15, 2022 11:11
Break an element out of it's containing element in order to span full width of page or parent element
body, html {
overflow-x: hidden;
}
.breakout {
margin:0 -100%; /* old browsers fallback */
margin:0 calc(50% - 50vw);
}
@mikeoberdick
mikeoberdick / gutter_spacing_relative_to_container.js
Created November 5, 2022 11:51
Getting the gutter using the page container in order to offset positioning of elements relative to container
if ($('#fastStartSolutions').length > 0) {
if ( $(window).width() > 991 ) {
var offset = $('#page .container').offset();
var gutter = ( Math.ceil(offset.left) + 15 );
$('.video-left .video-wrapper').css('left', '-' + (gutter - 30) + 'px');
}
}
@mikeoberdick
mikeoberdick / mailchimp_subscribe_form.php
Created September 8, 2022 09:53
MailChimp subscribe form shell missing only the form action
<div id="mc_embed_signup">
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div id="mc_embed_signup_scroll" class = "d-flex">
<div class="mc-field-group">
<label for="mce-EMAIL" class = "sr-only">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder = "Email Address">
</div><!-- .mc-field-group -->
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
@mikeoberdick
mikeoberdick / disable_gravity_forms_submit_until_validated.js
Created August 18, 2022 14:24
Disable the Gravity Forms submit button until all required fields are completed
//Add 'has-selection' class to select dropdown on click
$('form[id^="gform_"] select').on('change', function (e) {
$(this).addClass('has-selection');
});
//Disable the GF submit button until all required fields are completed
$('form[id^="gform_"]').on('change', function (e) {
var $reqd = $(this).find('.gfield_contains_required').filter(function (i, c) {
return []
.concat($(c).find('input[type="text"], input[type="email"], textarea').filter(function (i, fl) { return $(fl).val().length == 0; }).get())
@mikeoberdick
mikeoberdick / show_hide_nav_on_scroll.js
Created May 21, 2022 11:39
Hide and show the nav on scroll
//nav scroll behavior
var prev = 0;
var $window = $(window);
var nav = $('.header-outer-wrapper');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});
@mikeoberdick
mikeoberdick / toggle_on_link_click.js
Created March 28, 2022 13:05
Show toggle sections on link clicks
@mikeoberdick
mikeoberdick / plus_to_minus_css_animation.scss
Created June 2, 2021 17:01
Morph a plus icon into a minus icon for accordians and menus
/*
<div class = "plus-to-minus">
<span></span>
<span></span>
</div>
*/
.question-container {
.plus-to-minus {
width: 50px;
@mikeoberdick
mikeoberdick / parallax.css
Created June 1, 2021 14:52
Parallax effect for background images
<section id="sectionFour">
<?php $img = $four['full_size_image']; ?>
<div class="parallax" style = "background: url('<?php echo $img['url']; ?>');"></div>
</section><!-- #sectionFour -->
.parallax {
min-height: 500px;
background-attachment: fixed !important;
background-position: center !important;
background-repeat: no-repeat !important;