Search
Search Code
CSSnowflakes simple snowflakes non-JS snowflakes for your website
i like this one as its a nice and simple copy and paste effect that just covers the whole site and does not get in the way of other things like some other scripts i have come across.
Bind 'this' to a Class Method
Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..
find a custom data attribute in simple html dom
locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs
jqueryui date selector with examples and code with custom date formatting
Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector
six box grid css html custom no gap
re-usable four box grid with no gap, plus stack on responsive 1024px
four box grid css html custom
re-usable four box grid with gap calculations
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
display a subnav for the current wordpress page
good if you are doing custom page work and need to show the current sub nav somewhere other than the main menu.
select something with custom data attribute css
selecting something by its custom data attribute and value in css
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher
A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.
add a custom event trigger in jquery document ready
i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..
Twitter Post Fetcher Script
Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome...
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average... Lets fix it! Some simple changes Just a few elements added and moved around a bit. Added another row to the f..
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
Slick Slider Showing Multiple Items at a time
Just wanted to test some review type items showing more than one on slick, Seems to work well. This shows two items at a time, but you can show as many as you like. Could be good for a testimo..
Slick Slider Carousel with Custom Next and Prev Buttons
I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider. Note the class names: sli..
Add custom symbol to ul li list and align text items
Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items. If the list items dont align correctly you will nee..
How to Use PropTypes to Define Props in React
React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element. To do this you can define propTypes. You can defin..
php html template class system
just a simple php templating system to extract your html files from within the php code into external files, makes things (or your code) a bit neater.
using wp_nav_menu to show a custom menu in wordpress
found this quick code snippit here, its not working just for reference of what the array items do. Here is how you would display the menu called "Projects" PHP $..
get and show the featured image on a wordpress page template
this will extract the featured image on wordpress page if you are using custom page templates.
link to a custom style sheet in your theme directory wordpress
this is how you can include a manual link in your wordpress header file with a link to a stylesheet called theme.css then if you change theme names or something it will still link correctly, rather t..
wordpress add a template file to your theme
this is the basic layout of adding a wordpress template php file to your wordpress theme. good for custom theme pages This is a really basic template with just the header, but once added wordpress w..
hidden scroll anchor for custom scroll position
just incase you need to link to a scroll anchor that is not in the place where you need it.
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
using clamp js to clamp lines of text
there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..
Comments Listing should be a custom list rather than using search
For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..
counting the occurrence of words in a multidimensional array
array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]
I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
add a comment recording system for posts [idea]
add a custom comment system for code and posts with google recapcha
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
Bootstrap Darkmode Switch
I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
wordpress adding post custom field meta and displaying it on you template
if you want to be able to add custom post fields into your pages in wordpress and display them in your template this is how you can do it, no plugin is required for this as post meta is available by d..
Add a post date to your custom wordpress post listing
this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
Date Conversion PHP
Convert 1/1/2011 into 2011-01-01 00:00:00
wordpress enqueue slicknav and slick slider
add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..
csv read example
Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..
wordpress advanced custom fields replace shortcode for site url with blog url
Using advanced custom fields, if you know what the shortcode is and what you want to replace it with you can do so with the following. $site_url = get_site_url(); $field = get_field('template_ht..
using custom request headers array with curl
this function passes in an array with custom request headers to curl, good if you need to pass in some headers to request an api url and give it an auth key or something like that. Also added to the a..
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'), ..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
using foundation 6.4 xy grid basics
Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..
youtube extract thumbnail from video link
Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https:/..
emoji data - version 1.0
Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: 20..
set transparent menu over background image
this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..