{"id":59920,"date":"2025-04-16T07:18:52","date_gmt":"2025-04-16T07:18:52","guid":{"rendered":"https:\/\/muhammad.dev\/?p=59920"},"modified":"2025-04-16T07:27:44","modified_gmt":"2025-04-16T07:27:44","slug":"breadcrumbs-wp","status":"publish","type":"post","link":"https:\/\/muhammad.dev\/breadcrumbs-wp\/","title":{"rendered":"DIY Breadcrumbs in WordPress with Full Site Editing"},"content":{"rendered":"\n

Let’s look at how you can use Gutenberg and Full Site Editing to create Breadcrumbs for your WordPress site.<\/p>\n\n\n\n

You would need to install the latest version of WordPress and a plugin that has FSE (Full Site Editing) support.<\/p>\n\n\n\n

You would also require the The Icon Block by Nick Diego<\/a>.<\/p>\n\n\n\n

Here’s the code. You can copy it and paste it in your Single Post template.<\/p>\n\n\n\n

<!-- wp:group {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\"}} -->\n<div class=\"wp-block-group\"><!-- wp:outermost\/icon-block {\"iconName\":\"wordpress-home\",\"iconColor\":\"secondary\",\"iconColorValue\":\"#0099ff\",\"linkUrl\":\"\/\",\"width\":\"24px\"} -->\n<div class=\"wp-block-outermost-icon-block\"><a class=\"icon-container has-icon-color has-secondary-color\" href=\"\/\" style=\"color:#0099ff;width:24px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z\"><\/path><\/svg><\/a><\/div>\n<!-- \/wp:outermost\/icon-block -->\n\n<!-- wp:outermost\/icon-block {\"iconName\":\"wordpress-chevronRight\",\"customIconColor\":\"#7e7e7e\",\"iconColorValue\":\"#7e7e7e\",\"width\":\"24px\"} -->\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color\" style=\"color:#7e7e7e;width:24px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z\"><\/path><\/svg><\/div><\/div>\n<!-- \/wp:outermost\/icon-block -->\n\n<!-- wp:post-terms {\"term\":\"category\",\"style\":{\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|secondary\"}}}},\"textColor\":\"secondary\",\"className\":\"text-decoration-none\",\"fontSize\":\"small\"} \/-->\n\n<!-- wp:outermost\/icon-block {\"iconName\":\"wordpress-chevronRight\",\"customIconColor\":\"#7e7e7e\",\"iconColorValue\":\"#7e7e7e\",\"width\":\"24px\"} -->\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color\" style=\"color:#7e7e7e;width:24px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z\"><\/path><\/svg><\/div><\/div>\n<!-- \/wp:outermost\/icon-block -->\n\n<!-- wp:post-title {\"style\":{\"typography\":{\"fontStyle\":\"normal\",\"fontWeight\":\"400\"},\"color\":{\"text\":\"#4a4949\"}},\"fontSize\":\"small\"} \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:separator {\"style\":{\"color\":{\"background\":\"#a8a8a8\"}},\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#a8a8a8;color:#a8a8a8\"\/>\n<!-- \/wp:separator --><\/code><\/pre>\n\n\n\n
Once copied and saved, the frontend of the template would look something like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to create clean, custom breadcrumbs in WordPress using Gutenberg and Full Site Editing\u2014no breadcrumbs plugins required. Follow this step-by-step guide to enhance your site\u2019s navigation and user experience with just a few blocks.<\/p>\n","protected":false},"author":1,"featured_media":59922,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[43,52,113],"class_list":["post-59920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","tag-development","tag-gutenberg","tag-wordpress"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/muhammad.dev\/wp-content\/uploads\/2025\/04\/diy-breadcrumbs.png?fit=1536%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts\/59920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/comments?post=59920"}],"version-history":[{"count":4,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts\/59920\/revisions"}],"predecessor-version":[{"id":59928,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts\/59920\/revisions\/59928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/media\/59922"}],"wp:attachment":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/media?parent=59920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/categories?post=59920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/tags?post=59920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}