mazey-wordpress-utils

Mazey WordPress Utils

Browser-focused TypeScript utilities for modifying WordPress page markup.

• Project website
• Playground
• API documentation

Install

You can get mazey-wordpress-utils via npm.

npm install mazey-wordpress-utils
Copy

Usage

hideSidebar

Hide the sidebar on the webpage.

Example: https://example.com/home?hide_sidebar

hideSidebar({
  urlContainList: ['hide_sidebar', 'no_sidebar'],
  primarySelector: '#main-content',
  secondarySelector: '#sidebar'
});
Copy

hideHeaderInTOC

Hide the header when it meets one of these two conditions:

• Use WordPress Plugin Easy Table of Contents and open it in this page.
• The page's URL is matched with one of the urlContainList.

Example: https://example.com/home?hide_header_in_toc

hideHeaderInTOC({
  urlContainList: ['hide_header_in_toc', 'no_header_in_toc'],
  headerSelector: '.site-header'
});
Copy

isIncludeInUrl

Check if the current URL includes a specified string.

Example: https://example.com/home?example

isIncludeInUrl({
  urlContainString: 'example'
});
Copy

setImgLazyLoadingWhenDomReady

Set loading="lazy" on images inside a matching container.

setImgLazyLoadingWhenDomReady('.site-content');
Copy

setImgWidthHeight

Set the width and height of an image based on the parameters specified in the image's URL.

Use jQuery to select all img elements on the page and then checks each image's src attribute for width and height parameters. If these parameters are found, the function sets the image's width and height accordingly.

The width and height parameters in the URL should be in the format width=<value><unit> and height=<value><unit>, where <value> is a number and <unit> is a CSS unit like px, rem, or vw.

Example 1: For an image with the URL <img src="https://example.com/image.png?width=400px&height=200px" alt="file" />, the function will execute window.jQuery('img').width('400px') and window.jQuery('img').height('200px').

Example 2: For an image with the URL <img src="https://example.com/image.png?width=400rem&height=20vw" alt="file" />, the function will execute window.jQuery('img').width('400rem') and window.jQuery('img').height('20vw').

Contributing

Development Environment

Dependency	Version
Node.js	v22

Scripts

# install the project Node.js version
nvm use

# install dependencies
npm install

# lint
npm run lint

# test
npm test

# build
npm run build

# build and validate the GitHub Pages artifact
npm run docs

# run the website and playground development server
npm run dev

# run the full package and website verification pipeline
npm run preview
Copy