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...
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...
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
A test post
gdsfhgfdhdgfhdgfhgfdhdh fdsgfsdgdsfgsdfsdfg fdsgfsdgdsfgsdfsdfg
Order custom post type by title
Can also remove ‘! is_admin’ to order in admin too:
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
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...