Search
Search Code by entering the text above.
javascript
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..

4:52 am, December 6, 2021
html
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..

5:01 am, November 19, 2021
react
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..

4:40 am, October 19, 2021
php
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.

11:31 pm, October 7, 2021
wordpress
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         $..

4:28 am, September 29, 2021
wordpress
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. 

4:07 am, September 29, 2021
wordpress
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..

2:35 am, September 28, 2021
wordpress
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..

1:13 am, September 28, 2021
css
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.

5:26 am, September 27, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
javascript
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..

5:17 am, August 10, 2021
javascript
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..

11:17 pm, June 22, 2021
site documentation
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..

3:57 am, June 14, 2021
php
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..

4:19 am, June 3, 2021
wordpress
javascript
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 ..

5:23 am, March 17, 2021
javascript
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..

8:49 am, January 21, 2021
site bugs
add a comment recording system for posts [idea]

add a custom comment system for code and posts with google recapcha

3:02 am, January 14, 2021
css
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..

6:09 am, December 31, 2020
html
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.

5:38 am, December 23, 2020
wordpress
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

12:29 am, December 4, 2020
bootstrap
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..

11:54 pm, August 18, 2020
html
wordpress
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..

1:33 am, June 24, 2020
wordpress
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..

5:49 am, May 4, 2020
css
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..

2:19 am, September 6, 2019
php
Date Conversion PHP

Convert 1/1/2011 into 2011-01-01 00:00:00

10:40 pm, January 14, 2019
wordpress
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'] != ..

6:20 am, August 31, 2018
php
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 ..

6:20 am, August 31, 2018
wordpress
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..

6:20 am, August 31, 2018
php
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..

6:20 am, August 31, 2018
wordpress
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'), ..

6:20 am, August 31, 2018
html
simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page

6:20 am, August 31, 2018
html
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..

6:20 am, August 31, 2018
html
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:/..

6:20 am, August 31, 2018
html
emoji data

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: ..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote