WordPress tutorials and more
WordPress tutorials and more
Gutenberg
How to add Category labels on top of the featured images in the Post Preview Query Loop in Gutenberg
In the Query Loop I replaced the Featured Image block with a Cover block and added Category blocks on top of the Cover. Making Category button labels. I also added…
Customizing comments section in WordPress
The following tutorial was originally created years ago. I decided to add on Full Site Editing to where we can modify the comments through the Comments block and associated inner…
How to make a sticky header in WordPress
Sometimes we want an area of the page to be fixed or stick to the page. Sections: A sticky top Navigation menu.A sticky header. Adding a sticky Navigation menu. An…
Customizing the Excerpts Meta Box
Create and style the Excerpt in the Block Editor (Gutenberg). Go to a post and in the right sidebar settings area of the document (Post). Notice the Excerpt area.Here I…
Adjusting the auto embeds of WordPress site links on your site
Styling the Auto WordPress embed link. One can not style the WP embed because this is located inside an iframe which is added from an external web site. One can…
Back to top button link using a HTML anchor.
How to add a back to top link with smooth scrolling in Gutenberg (Block Editor). Add a Buttons block to the bottom of your page. In the sidebar while the…
Add a Facebook Feed (Like Box)
1 – Manually adding a Facebook Feed 2 – Plugins that help you add a Facebook Feed. This can only be done with a Facebook page. Not a profile or…
Disable an automatic WP embed.
Links from WordPress web sites might create wp-embeds (embeds). Such as the example below from Make WordPress Core. It can be difficult figuring out how to remove an auto embed…
Add a Github Gist
An easy way to add a Github Gist into Gutenberg (Block Editor) is by using a HTML block. Locate the Gist you would like to Embed. Click into the area…
Styling frontend and backend
Styling the frontend without it affecting the Gutenberg background layout. I use style.css or the customizer to add CSS to adjust the look of the frontend of a site. With…