Day 11: WordPress – Customization & FSE

WordPress Customization

This built-in tool allows you to make changes to your site’s appearance and see a live preview of your updates.

Key Features of the WordPress Customizer:

• Site Identity: Modify your site title, tagline, and logo.
• Colors: Customize the color scheme of your theme.
• Menus: Manage navigation menus.
• Widgets: Add and arrange widgets in your sidebar and other widget-ready areas.
• Homepage Settings: Set a static front page or your latest posts as the homepage.
• Additional CSS: Add custom CSS to tweak your site’s design further.

What are Widgets?

WordPress widgets add content and functionality to the widget area. The widget area is a pre-defined area by the theme, typically located in the sidebar or footer, but varies from theme to theme.

How to use normally?

1. Go to Appearance > Widgets in the WordPress Administration Screens.
2. Choose a Widget and either drag it to the sidebar where you wish it to appear, or click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button. There might be more than one sidebar option, so begin with the first one. Once in place, WordPress automatically updates the Theme.
3. Preview the site. You should find that the “default” sidebar elements are now gone and only the new addition is visible.
4. Return to the Widgets Screen to continue adding Widgets.
5. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
6. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
7. To save the Widget’s customization, click Save.
8. To remove the Widget, click Delete.

Block-based Widgets Editor

The Block-based Widgets Editor brings the power of blocks to the Theme Customizer and Appearance > Widgets sections in the WordPress Administration Screens allowing you to add blocks right next to any current widgets. You can now customize your Widget Areas using blocks, just like how you use the block editor to create content.

How to add a block

1. Navigate to Appearance > Widgets.
2. Click on a specific Widget Area you’d like to edit.
3. Select the + prompt to add a block. You can use the search functionality to find the block you want or select Browse All to see the various options.

WordPress Editor

The WordPress Editor, also known as the Block Editor or Gutenberg, revolutionized content creation with its block-based approach. Each piece of content, such as paragraphs, images, and videos, is treated as a block, making it easier to organize and style your content.

WordPress now ships with Block Editor (a.k.a Gutenberg) as the default WordPress editor. It takes a new block-based approach to create content where everything on your page is considered a block (headings, paragraphs, images, etc).

Tips for Using the WordPress Editor:

• Blocks: Learn about different block types and how to use them effectively.
• Reusable Blocks: Save blocks that you use frequently to streamline your workflow.
• Block Patterns: Use pre-designed block layouts to quickly build complex page structures.
• Block Styles: Customize the appearance of individual blocks to match your site’s design.

Blocks list

Blocks are the components for adding content in the new WordPress block editor. There are several blocks available within WordPress that you can easily add to your post or page, move within a post or page and search for.

Text Blocks

Media Blocks

Design Blocks

Widgets Blocks

Deprecated block	Since	Replaced with / Renamed
Button block	5.4	Buttons block
Text Columns block		Columns block
Post Comment block		Comments Query Loop block
Comments Query Loop block		Comments block
Comment Author Avatar block		Avatar block

How to Create Reusable Blocks

How to Create Reusable Blocks

WordPress Terminology

• Back-end: The back-end refers to the section of your website where you can log in and manage everything from your Dashboard.
• Codex: The official WordPress manual containing support articles, documentation, code snippets, and links to external resources.
• Content Management System: Software designed to manage the content on a website.
• cPanel: A web-based administration tool for managing your web hosting account.
• Database: Software used to store and manage data in an organized manner.
• Default Theme: The theme that comes pre-installed with a fresh WordPress installation. It also serves as a fallback theme if the current theme experiences issues.
• DNS: Refers to the Domain Name System, which maps domain names (like google.com) to their IP addresses.
• DOM: An interface that enables programmers to dynamically access HTML and XML on a web page.
• Domain Name: A system used to assign easy-to-remember names to website IP addresses.
• Footer Area: The horizontal section at the bottom of a website where widgets and copyright information are typically displayed.
• Front-end: The user-facing part of your website where visitors can view and interact with your content.
• Gravatar: A service that allows users to associate a global avatar (image or photo) with their email addresses.
• Header Image: A wide image that can be set to appear at the top of your website.
• Hosting Provider: A company that offers space on a web hosting server for a fee.
• IDE: An application that provides all the tools necessary for software development and testing.
• Menu: A collection of links to pages, categories, and social media profiles on your website, usually displayed in the navigation area.
• Meta: The meaning can vary in WordPress depending on its usage, but it’s typically used to refer to administrative data.
• Multisite: The ability to create a network of WordPress sites from a single WordPress installation.
• Navigation: A set of links on your website that assists site visitors in navigating through your content.
• Nonce: A one-time token generated by WordPress to protect your site against unexpected or duplicate requests, which could lead to permanent or unintended consequences.
• Permalink: A permanent link to content on your website, making it easy to share unique pages with others.
• Sidebar: A location on your website where you typically display elements like the search bar, recent and popular posts, and other important widgets. A website can have more than one sidebar.
• Toolbar: The small black bar just above your site that provides quick links to various parts of your website, usually visible only to logged-in users.
• XML-RPC: A remote procedure call (RPC) protocol that uses XML to encode its calls and HTTP as a transport mechanism.

WP: FSE

Full Site Editing is one of the recently added features in WordPress. It has been introduced in WordPress 5.9. FSE mainly focuses on the user editability of different site templates without making any changes in the code.

Key Components of FSE:

• Site Editor: Access and edit the structure and design of your entire site, including headers, footers, and sidebars.
• Templates: Create and customize templates for different types of content, such as single posts, archives, and 404 pages.
• Template Parts: Reusable sections of your site, like headers and footers, that can be applied across multiple templates.
• Global Styles: Define and manage the styling of your site, including typography, colors, and spacing, all from one place.

Workflow Summary

1. Editing:
   • Users access the Site Editor and select templates or template parts to edit.
   • Blocks are added, configured, and styled using the block-based interface.
2. Rendering:
   • The React interface dynamically updates the preview, leveraging the REST API for real-time changes.
   • On the front end, the HTML templates and CSS variables from theme.json ensure consistent styling.
3. Saving:
   • Customizations are saved as custom post types, ensuring version control and manageability.
   • The WordPress backend processes these changes, updating the live site accordingly.

Relevant Articles:-

https://www.elegantthemes.com/blog/wordpress/wordpress-full-site-editing

https://medium.com/@dominicmeso/how-wordpress-actually-works-behind-the-scenes-efc8fc896d68

Thank you for reading…
by ~Leaveitblank(Mayank Tripathi)