Tested WordPress code snippets – page 8
Copy-paste snippets for blocks, block themes, security, performance, Tailwind CSS, PHP and React. New snippets every Monday, Wednesday and Friday, each one run in a real WordPress before it is published.
-
Color Admin Menu Items
The easiest way to organize Admin Menu is to add specific colors to it.I personally like to color items I use daily. Code Snippet Add Code Snippet Open Scripts Organizer Hit Add new. Scripts Organizer Settings Trigger Location: EverywhereScript Location: PHP How to find plugin target to write CSS? Hover over item you want to find info and…
Category: WordPressTags: WP Admin -
Attach Category to Custom Post type
By the default if you create Custom Post Type attaching Category to it is not possible. On the line: array( ‘post’, ‘resource_libraries’ ), replace “resource_libraries” slug to your custom post type slug. Code Snippet Add Code Snippet Open Scripts Organizer Hit Add new. Scripts Organizer Settings Trigger Location: EverywhereScript Location: PHP
Category: WordPress -
Create admin user programmatically
Sometimes people forget their WordPress admin credentials and email as well so there is no way for them to reset the password to come back in the admin. Following is a little code that you can either add in the functions.php file or set a script in Scripts Organizer and select the PHP option in…
Category: WordPress -
Rotate logo on scroll
If you need to rotate logo while you are scrolling the page like on Matthias Altmann’s website here is the code he shared with us Example: https://www.altmann.de/
Category: jQuery -
Add Taxonomy to Admin columns
Add this to your functions.php and replace CPT_slug and taxonomy_slug Red is added added column
Category: WordPress -
Add hierarchy option to posts
If you need to have a parent option for any post custom post to organize inside the admin menu or to loop all child post for some post id just add this code snippet to functions.php
Category: WordPress -
Manual query get complex data
Paste this into code block to get that data. Paste that data into Query of Easy posts or Repeater. With this, you can put in query data from ACF Pro as well Credits to: https://wpdevdesign.com/how-to-generate-the-query-string-for-easy-posts-in-oxygen/
Category: Oxygen -
Change the default loop with CodeBlock
Place it above Repeater or East Posts
-
Add prev and next post with title and thumb in the same category
This one is work in progress
Category: WordPress -
Add prev and next post with title and thumb
Add this in codeblock in single post template Title is wrapped with h3 and thumbnail is having class (‘your-class-name’) that you can change to your needs.
Category: WordPress -
Change excerpt length
Paste this into custom plugin’s functions.php return 15 means 15 words excerpt text being eclipsed. More on WordPress.org
Category: WordPress -
Flickity slider hide dots if only 1 slide
This can be done easily with 1 line of CSS code and only-child selector:
Category: CSS -
Images are not sharp enough when they are scaled down
Oxygen adding class to images by default “.ct-image”. To target all the images use img tag or .ct-image. If you want to play with more options there are some couple of more settings:
-
Remove WordPress default image compression
By default, WordPress compresses your images for better performance. Every time you upload a JPEG image in WordPress, it would automatically compress the image to 90% quality. All you need to do is paste the following code in your custom plugin’s functions.php When you do make these image quality changes, you want to make sure…
Category: WordPress -
Limit search to post type
If you need to display only certain post type ( page, post, custom post) you need to add this to function.php On line 4 change what post type you need. Source: https://www.wpbeginner.com/wp-tutorials/how-to-limit-search-results-for-specific-post-types-in-wordpress/
Category: WordPress -
Resize image from inside container to the one edge of the page
Resize image inside a container on one side to the edge of the page. + 40 is column padding size If you want to resize it on the right change left to right on lines 15 and 21 .container is image wrap .hero-img is img class Important set img to:
Category: jQuery -
Update on load and resize
This code will help you to get values on page load and change them on resize. It can be useful to update the CSS values and objects position. Code example with breakpoint
Category: jQuery
3rd party plugins actions admin archive attachment block-themes block editor Blocks build categories Category compression CPT CSS Custom Post Developer development editor Front End full site editing githubpages gutenberg hook Image img load styles loop mu-plugin Must Have npm Oxygen pages php port redirect render_block_data repeater rest api security single product Taxonomy Tips WooCommerce wordpress WP Admin