Tutorial Category: Gutenberg

  • How to add Category labels on top of the featured images in the Post Preview Query Loop in 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 a fallback featured image. I have renewed a 8 year old web site called edwien.no (articles relating to various aspects of religion). I decided to…

  • Customizing comments section in WordPress

    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 blocks. Using the Comments block in Full Site Editing themes.Customizing comments in the Genesis framework. We now have a Comments block and inner blocks that…

  • How to make a sticky header in WordPress 

    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 example using the default theme Twenty Twenty One is using jump HTML anchor links where one clicks a link and it jumps to a section…

  • Customizing the Excerpts Meta Box

    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 have filled in some text. Added a Heading 2, paragraph and a link. The frontend this is seen. I am using the theme Blocksy. Create…

  • Adjusting the auto embeds of WordPress site links on your site 

    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 only style the frame around the itself and not the content inside of it. This CSS can be used to style the frame around the…

  • Back to top button link using a HTML anchor.

    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 Button is selected click the Outline style. Add the buttons text Back to top.Adjust the Border radius. Add a link to the button. Select the…

  • Add a Facebook Feed (Like Box)

    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 a group. Further below I have also added links to a few plugins that can be used. I have used Smash Balloon Custom Facebook Feed…

  • Disable an automatic WP embed.

    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 in WordPress to only show text links. We can transform a wp-embed into a paragraph block (a regular text link), by clicking the embed icon…

  • Add a Github Gist

    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 where it says Embed to select the link. Copy the link. In Gutenberg (Block Editor) add the HTML block and paste in the link. After…

  • Styling frontend and backend

    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 Gutenberg the new Core Editor in WordPress I also need to style the backend.I added the following code to the child theme functions.php file: By…