List Code
wordpress get site url
good for using in templates in case the site is moved <?php echo get_site_url(); ?> Usage Example (css) using inline styles in a template file <style> .class { background:url("<?p..
simple html dom extract attributes simplehtmldom
this is if you have an element as follows, and you want to extract attributes from it. <img class="an-image-wow" src="image.jpg" data-image="data-image.jpg" alt="my alt tag"> list all its ..
find the 1st occurence of a string in another string
do a case-sensitive search for a string within another string strpos mixed strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) usage find the 1st location of a string position within a..
pretty printing json with php
nice if you are working with json string data and just want to be able to read through the structure without copy pasting it somewhere else. $json_string = json_encode($data, JSON_PRETTY_PRINT);
extract meta tags from file or url as array
php has a built in function that can be used to extract the meta tags from a page url into an array. usage just pass it a url, if you call this file meta.php. usage: meta.php?url=http://my-url.co..
wordpress show posts loop with feature image thumbnail
this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..
random number using rand
Show me a random number between 6 and 12 echo $number = rand(6,12);
search within files in a directory
During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..
wordpress show the post content for use in a template
if you are looking to show the page content in a template you can find that here. This will show all posts in the selected category Modified source from here
show errors in php with toggle
Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..
wordpress register enqueue javascript require jquery
This usually goes in the theme functions file. This will load it after jquery if it requires it. wp_register_script('scriptname', get_template_directory_uri() . '/js/scripts.js', array('jquery'), ..
count the elements in an array
seems easy, if you need to know the amount of elements in an array this is how you do it. good if you need to know where the end of an array is. code <pre> <?php $array = [ "yo", ..
google map with overlay data
Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..
round number with js
Round a number to two decimal places. code var rounded = Math.round(num * 100) / 100; demo Result... function round_val() { var val = $("#rval").val(); var rounded = Math.r..
truncate string using jquery
.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..
detect window scroll position jquery
This one adds or removes a class if the document is scrolled 50 px near the top of the window. $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink');..
flems embed in url
Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..
change the window title
This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..
Slick Slider Carousel
Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel
add this
To Add: https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON
change favicon with jquery
Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..
load google sheet data into json string with jquery
Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..
scrollbar replacement simplebar
a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..
change the water colour in google maps for an already initialised map
good if you are using google maps and cant change the original map init code to change the styles. var mapOptions = { styles: [ { featureType: "water", stylers: [ { v..
parallax js scroll testing
Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..
mithril testing
https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..
validate form data using javascript to check required html elements
for use in a javascript function to submit a form var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i..
do something later with settimeout or loop with setinterval
setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..
tiny mce editor tinymce
Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..
clipboard copy js
for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..
json loop load elements
Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..
document ready wordpress jquery
Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working.
testing chartjs
Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..
access hacker news json firebase api via jquery
Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) { va..
check length of element jquery
this one can be good for checking if an element exists before doing something with it and can stop warning messages if you are running the script on multiple pages. if ($('#mydivid').length) { con..
validate email address from string
handy for a simple email verification in a form submit var emailfield = $("#emailfield").val(); var atpos = emailfield.indexOf("@"); var dotpos = emailfield.lastIndexOf("."); if (atpos
set and check a cookie using js cookie
this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..
random string generator guid
a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..
using regex with replace to replace all instances of something in a string
so you have a string and you want to replace a recurring character, use this to do it: String Example: var string = "a-string-with-dashes.txt"; var string = "a-string-with-dashes.txt"; string..
digital clock with jquery
Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..
find all elements add class jquery
this will grab all a elements, and dump them to the console. var allLinkElements = $( "a" ); console.log(allLinkElements); then we need to split into a jquery object, this is a jquery version of an..
load content with jquery
Load data from the server and place the returned HTML into the matched element. this one seems simple but very useful $( "#result" ).load( "ajax/test.html" ); this one will load the content o..
stacktable jQuery plugin for stacking tables on small screens
stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..
jquery clone and append elements
This jquery function clones an element and appends it to another one. Here is the basic code: $( ".clone-me" ).clone().appendTo( ".append-me" );I also updated this to work with just raw js, so..
show the year with js
just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..
get select option form value with jquery
Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..
jquery jqueryui vue script includes
JQuery 3.2.1 <script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script> jqueryui includes css and js JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/aja..
fancybox youtube showing video links in a lightbox
do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fan..
jquery accordion
here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..
jqueryui date selector
This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..