News

Template: Sticky

This is a sticky post. There are a few things to verify: The sticky post should be distinctly recognizable in some...

Simple GSAP text animation on scroll (2 ways)

This method uses GSAP to add a class to an element and the animation is in css. GSAP: SCSS:...

Widgets in Gutenberg – issues

Reuseable blocks widget seems to work but the block UI is a bit broken at the moment and it...

Co Blocks Plugin

Great for wavy divider blocks

Browser Shots

Insert screenshots in a page/post with shortcodes, example:

Using the WP flexbox grid

. A ul is given the following classes: class=”is-flex-container columns-3 wp-block-post-template is-layout-flow” CSS being applied is

GSAP animated Separator

setup the Separator Style in block-styles.js setup the gsap Add the SCSS

Customizer settings – functions

If you want customizer option not ACF options, then inside the after_theme_setup add these. Setting a custom background colour:...

Image sizes – functions

add image sizes inside after_theme_setup Allow featured imagess: setting up additional image sizes (only use if required in the...

Additional Functions php

Support JSON mimes type: Support SVG mimes type: or use the SVG support plugin can be useful to add...

General Functions php

Register a widget area (inside after_setup_theme)

Blocks Animation Plugin

Apply animations to blocks through a jQuery snippet rather than adding animations to every block in the editor:

Loading a template file from a sub folder

This can be useful for organisation but also for building functionality in a component or modular way or in...

Helpers

Adding reusable blocks to headers, content or footers

Add a ACF relationship field to either a page, posts, event, other-CPT or options page. Example add ‘footer_reusable_blocks’ to...

GSAP animated separator

Register gutenberg block style, in block-styles.js Add GSAP in gsap.js Add the SCSS in _gutenberg-styles.scss

GSAP reveal image on scroll

Register gutenberg block style, in block-styles.js Add GSAP in gsap.js Add the SCSS in _image-styles.scss

GSAP Image with parallax effect

Register gutenberg block style, in block-styles.js Add GSAP in gsap.js Add the SCSS in _image-styles.scss some jquery to fix...

Query Vars

functions.php Loop Or To output the URL with the var string use a confirmation page in gravity forms and...

Mobile Column Classes with Flex basis

Add class to the columns to force media queries to alter the default flex basis eg: .columns.medium-fb100 .column {...

Timeline plugins

Timeline Blocks for Gutenberg Ultimate Timeline Content

news 1

news 2

A test post

gdsfhgfdhdgfhdgfhgfdhdh fdsgfsdgdsfgsdfsdfg fdsgfsdgdsfgsdfsdfg

Alignments and Margins

Normal Paragraph Wide P Full P

Order custom post type by title

Can also remove ‘! is_admin’ to order in admin too:

GSAP parallax

Group 1 Group 2 Group 3

gravity form on dark background

Normal form on white Normal form on dark bg Add this class to the group block: gfrom-light

Anchor offset for sites with Fixed header

We have added the helper class of .anchor for sites that use fixed header navigation and also have the...

Cover page template

Cover page template

Some example content as normal. A heading Some example content as normal. A heading

GSAP Pictures (like google store)

Beautiful moments,captured beautifully. It’s the brilliant Pixel camera, now with an ultrawide lens,and new features that help you to...

Scroll Progress Bar with gsap

HTML at start of <body> CSS gsap JS

GSAP ScrollTrigger

Scroll down parallax1 parallax2 Simple GSAP box effect on timeline Rotate GSAP box effect on timeline TEXT GOES LEFT...

Block Lab Plugin

Saved in the theme in a folder called ‘blocks’

Cursor dots

JQuery

Search the site

Share this page:

Newsletter

Subscribe to get regular news and updates

  • This field is for validation purposes and should be left unchanged.