Author: Neftaly Malatjie

Copy and Paste from SayPro Staff Kraal

To edit the heading in the Twenty Twenty-Five WordPress theme (which uses Full Site Editing), you need to determine which heading you’re referring to:

• If you mean the main site heading (H1 or Site Title) at the top of the homepage,
• Or a heading inside a specific page or template.

Here are both options:

---

🧭 Edit the Main Heading (Site Title)

Option 1: Via Site Editor

1. Go to Appearance → Editor.
2. Click on the Header template part (or just click the site title directly if it’s visible).
3. Select the Site Title block – it might be styled as a heading.
4. Edit the text directly or style it (change font, size, color) in the right sidebar.
5. Click Save.

💡 If it says “Site Title” instead of showing the name, it’s using dynamic content — it will reflect what’s set in Settings → General as the site title.

---

📄 Edit Headings on a Page or Template

1. Go to Appearance → Editor.
2. Open the Templates section.
3. Choose the template you want to edit (e.g., Home, Page, Single).
4. Find the heading block (e.g., H1, H2) within the template.
5. Click it to edit the text and adjust its settings (size, style, alignment).
6. Click Save.

---

🔧 Customize Heading Styles Globally (Optional)

If you want to change how all H1s, H2s, etc., look across your site:

1. Go to Appearance → Editor.
2. In the top left, click the Styles icon (the half-moon or ‘A’ icon).
3. Click Typography → Headings.
4. Adjust font family, size, weight, etc., for all headings globally.
5. Click Save.

---

If you’ve already changed all 15 WordPress, WooCommerce, and custom plugin templates to adjust their layout or appearance and are looking to refine them (for example, applying a global width of 80% to all templates across your site), you can do so more efficiently by targeting the core container or layout elements in your CSS or through the Site Editor.

Here’s a breakdown of how to manage global changes across all templates, with an emphasis on content width and ensuring consistency across your custom and plugin templates.

---

1. Using CSS for Global Changes (Recommended for Speed and Efficiency)

To target all templates and content areas, you can apply custom CSS to ensure they follow the 80% width rule globally, regardless of the template or plugin.

Steps:

1. Go to:
   Appearance → Customize → Additional CSS
2. Add the following CSS: /* Global content wrapper - set to 80% width */ .wp-site-blocks > * { max-width: 80%; margin-left: auto; margin-right: auto; } /* WooCommerce specific content */ .woocommerce-page .content-area, .woocommerce-page .single-product, .woocommerce-page .archive.woocommerce-page { max-width: 80%; margin-left: auto; margin-right: auto; } /* Target custom plugin content containers (adjust selector as needed) */ .custom-plugin-content { max-width: 80%; margin-left: auto; margin-right: auto; } This CSS targets:
   • The general content wrapper for all pages.
   • WooCommerce content areas like single product pages and shop pages.
   • Custom plugin content (you may need to adjust the selector .custom-plugin-content based on your plugin’s HTML structure).
3. Click Publish.

---

2. Using the Site Editor (For Full Site Editing)

For a more visual approach, particularly for templates that use the Site Editor, follow these steps:

Steps:

1. Go to:
   Appearance → Editor
2. Open the Templates section and choose the templates you’ve modified (e.g., Single Product, Archive, Page templates).
3. Select the Group Block or the container holding the main content.
4. In the right-hand sidebar, under Dimensions, set the Width to 80%.
5. Save your changes for each template.

---

3. Check for Custom Plugin Template Adjustments

If your custom plugins have separate templates (e.g., custom layouts or WooCommerce product display templates), you may need to:

• Inspect the HTML structure of those plugins’ templates.
• Target the specific wrapper or content block using the plugin’s custom class or ID and apply your 80% width using either the Site Editor or CSS.

If you’re unsure about which selectors to use for a plugin, you can inspect the plugin’s content using Developer Tools (right-click on the element > Inspect) in your browser and target those specific classes or IDs in your custom CSS.

---

4. Consider Using a Child Theme (Optional)

If you’re making extensive changes across many templates or want to ensure your customizations persist across theme updates, it’s advisable to create a child theme:

• This way, you can add custom templates or CSS without worrying about losing them during theme updates.

---

Would you like help inspecting specific plugin templates or any other aspect of your custom theme and plugin setup? Feel free to share more details, and I can assist further!

The Discussion Settings in WordPress control how your site handles comments, pingbacks, and notifications for blog posts or pages. These settings are important for managing community interaction, reducing spam, and improving user experience.

---

📌 How to Access Discussion Settings

1. Log in to your WordPress Dashboard.
2. Go to Settings > Discussion.

---

🛠️ WordPress Discussion Settings Explained

1. Default Post Settings

These options control whether posts allow comments and link notifications.

• ✅ Attempt to notify any blogs linked to from the post
  • Sends a pingback to other blogs you link to, letting them know you linked to them.
• ✅ Allow link notifications from other blogs (pingbacks and trackbacks)
  • Allows you to receive pingbacks from other sites that link to your posts.
• ✅ Allow people to submit comments on new posts
  • Enables or disables comments globally for new posts.
  • Note: You can still override this setting on a per-post basis.

---

2. Other Comment Settings

• ✅ Comment author must fill out name and email
  • Helps prevent anonymous spam comments.
• ✅ Users must be registered and logged in to comment
  • Useful if you want to restrict comments to members only.
• ⏱️ Automatically close comments on posts older than X days
  • Disables comments on old posts to reduce spam and moderation workload.
• 🔁 Enable threaded (nested) comments X levels deep
  • Allows replies to comments up to a certain depth (e.g., 3 levels).
• 📄 Break comments into pages…
  • Paginate long comment sections for better performance and readability.
• 🔝 Comments should be displayed with the older/newer comments at the top
  • Choose the order of comment display.

---

3. Email Me Whenever

• ✅ Anyone posts a comment
  • Sends an email when a new comment is submitted.
• ✅ A comment is held for moderation
  • You’ll be notified when a comment is awaiting approval.

---

4. Before a Comment Appears

• ✅ Comment must be manually approved
  • Hold all comments for review before they appear on your site.
• ✅ Comment author must have a previously approved comment
  • Automatically approves comments from users who’ve had a comment approved before.

---

5. Comment Moderation and Blacklist

• Comment Moderation: Automatically holds comments in moderation if they contain a set number of links (a common spam indicator) or specific words.
• Disallowed Comment Keys: Instantly marks comments as spam if they include blacklisted keywords, IPs, or email addresses.

---

6. Avatars (Profile Pictures)

• ✅ Show Avatars: Enables avatars next to commenter names.
• Maximum Rating: Set the allowed avatar rating (G, PG, R, X).
• Default Avatar: Choose a default image for users who don’t have a custom avatar (e.g., Mystery Person, Gravatar Logo, Identicon).

---

✅ Recommended Discussion Settings for Most Sites

Setting	Recommended Option
Allow comments on posts	✅ (if community engagement is desired)
Require name/email	✅
Close comments after X days	✅ (e.g., 30–60 days)
Manual approval	✅
Moderate links	✅
Show avatars	✅ or ❌ (based on site type)

---

🧰 Tools for Comment Management

• Akismet Anti-Spam: Automatically filters spam comments.
• Disable Comments Plugin: Allows you to turn off comments site-wide.
• wpDiscuz or Jetpack Comments: Enhance comment features with threading, likes, and social login.

---

The WooCommerce Payment Settings control how customers can pay for their orders. WooCommerce supports various payment methods, including credit cards, PayPal, bank transfers, and more.

📌 How to Access Payment Settings

1. Log in to your WordPress Dashboard.
2. Go to WooCommerce > Settings.
3. Click on the Payments tab.
4. Business Location: South Africa
5. Setup only on PayFast

---

💳 Overview of WooCommerce Payment Options

In the Payments tab, you’ll find a list of available payment methods, including built-in and third-party options. Here’s a breakdown of common payment methods and how to manage them:

---

✅ Built-in Payment Methods (Default WooCommerce Options)

1. Cash on Delivery (COD)
   • Enable: Allows customers to pay with cash when the order is delivered.
   • Settings: You can customize the title, description, and payment instructions.
2. Bank Transfer (BACS)
   • Enable: Allows customers to pay via direct bank transfer.
   • Settings: Enter bank account details (e.g., bank name, account number, and instructions).
3. Cheque Payments
   • Enable: Customers can pay via cheque.
   • Settings: Provide instructions on how customers should send the cheque.
4. Pay on Delivery
   • Enable: Offers the option to pay when the product is delivered.
   • Settings: Configure delivery instructions or a custom message.

---

✅ Popular Third-Party Payment Gateways

1. PayPal
   • Enable: Allows customers to pay using PayPal.
   • Settings: Requires a PayPal email address and additional configurations like sandbox mode for testing.
2. Stripe
   • Enable: Accept credit/debit card payments via Stripe.
   • Settings: Requires API keys from Stripe.
   • Note: You may need to install the Stripe plugin if it’s not pre-installed.
3. Square
   • Enable: Accept payments through Square.
   • Settings: Requires Square account credentials.
4. Amazon Pay
   • Enable: Allows customers to pay via their Amazon account.
   • Settings: Requires an Amazon Pay account.

---

✅ Payment Method Management

In the Payments tab, you can:

• Enable or disable payment gateways by toggling the switch next to each method.
• Reorder payment gateways by dragging them to the desired position (important for custom checkout flows).
• Configure each payment method by clicking on the “Set Up” or “Manage” button next to each option.

---

🧑‍💻 Advanced Payment Settings (optional)

1. Payment Request Buttons:
   • Some payment gateways (like PayPal and Stripe) offer payment request buttons for easy one-click payments.
2. Payment Method Restrictions:
   • You can restrict payment methods based on certain conditions, such as specific countries, user roles, or cart totals.
   • For example, you can restrict PayPal for international orders or offer COD only for specific regions.
3. Capture Charges Immediately:
   • For gateways that authorize payments (like PayPal), you can set them to capture charges immediately or after the order is processed.

---

📦 How to Install Additional Payment Gateways

If you don’t see a payment method you’d like to offer (e.g., Klarna, Authorize.Net, etc.), you can easily add more via the WooCommerce Marketplace:

1. Go to Plugins > Add New.
2. Search for the payment gateway plugin (e.g., “Klarna for WooCommerce”).
3. Install and activate the plugin.
4. Once activated, go back to WooCommerce > Settings > Payments, and you should see the new gateway available for configuration.

---

⚠️ Important Considerations

• Always test payment gateways in sandbox mode before going live.
• Make sure to configure SSL (Secure Socket Layer) for secure transactions, especially if you’re processing payments directly on your site.

---

Great — you’re using the Twenty Twenty-Five theme, which is a Full Site Editing (FSE) theme. Unlike older themes, menus in FSE are created and managed via the Site Editor, not the traditional Appearance > Menus screen.

Here’s how you can add a second-level (dropdown) navigation menu using the Twenty Twenty-Five theme:

---

✅ Steps to Add a Second-Level Navigation Menu in Twenty Twenty-Five

1. Go to the Site Editor

• From your WordPress dashboard, navigate to: Appearance > Editor

2. Open the Header or Navigation Area

• Once the Editor opens, you’ll see the visual layout of your homepage.
• Click on the header area or locate the Navigation block.
• If you don’t see one, click the + icon and search for Navigation, then add it where needed.

3. Edit the Menu Items

• In the Navigation block, click “+” to add a menu item.
• Add a top-level link (e.g. “Services”).
• Then, to create a second-level item:
  • Click on the menu item (e.g., “Services”).
  • Click the three-dot menu (⋮) > “Add Submenu Link”.
  • Or click the right arrow to indent and make it a submenu item.

🔁 You can repeat this to build additional submenu levels.

4. Reorder or Nest Items

• Drag items around visually.
• Indent a menu item under another to make it a second-level link.

Example Layout:

• Home
• About
• Services
  • Web Design
  • SEO
• Contact

5. Save Your Changes

• Click the “Save” button in the top right to apply your changes.

---

📌 Notes

• Dropdown menus are supported natively in the Navigation block with Twenty Twenty-Five.
• The submenu will display on hover (desktop) or toggle (mobile).
• You can style the navigation block using block settings (colors, spacing, etc.).

---

🧩 Optional Enhancements

• Add icons or custom styles using custom CSS or a plugin like Editor Plus or Block Visibility.
• Create a navigation template part that can be reused across pages if needed.

---

Copy this from SayPro Charity Kraal

To add a WooCommerce icon (typically a cart or user/account icon) to the top navigation menu or header, follow the method that best matches your theme setup. Here’s a complete guide to adding the WooCommerce cart or account icon to the top of your site:

---

🛒 Goal: Add a WooCommerce Icon (Cart or Account) to the Top Navigation

---

✅ Option 1: Use Your Theme’s Built-In WooCommerce Icon Support

Many popular WordPress themes (like Astra, OceanWP, GeneratePress, Storefront, or Hello Elementor) have native support for showing WooCommerce icons in the header.

Steps:

1. Go to Appearance > Customize
2. Look for options like:
   • Header > Cart Icon
   • WooCommerce > Store Notice / Header / Account
   • Layout > Primary Menu / Header Elements
3. Enable:
   • 🛒 Cart Icon
   • 👤 Account Icon (usually linked to “My Account”)
4. Customize icon style and placement (some themes let you move it to the top bar or secondary menu).

🔔 If your theme supports a header builder, you can drag and drop the Cart or Account element into the header area.

---

✅ Option 2: Add WooCommerce Icons Manually via Menus

To add a Cart or Account link to the menu:

1. Go to Appearance > Menus
2. Under Pages, add:
   • Cart (/cart)
   • Checkout (/checkout)
   • My Account (/my-account)
3. Use Custom Links if needed.

Optional: Add Icons to Menu Text

If your theme allows Font Awesome or icon fonts, you can include them like:

<i class="fas fa-shopping-cart"></i> Cart
<i class="fas fa-user"></i> My Account

⚠️ Only works if your theme or plugins support HTML in menu items.

---

✅ Option 3: Use a Plugin to Add WooCommerce Header Icons

Use a plugin for more control or if your theme doesn’t support WooCommerce icons out of the box.

Recommended Plugins:

• WooCommerce Menu Cart (by WP Overnight)
  • Adds a cart icon with item count and total in the menu.
  • Highly customizable.
• Elementor Pro or Header Builder Plugins
  • If using Elementor or similar, drag-and-drop a cart/account icon into your custom header.

---

🧩 Option 4: Use Shortcode or PHP (Advanced)

If you’re editing a custom theme or header:

WooCommerce Cart Icon (PHP):

<?php
    echo '<li class="menu-cart">';
    echo '<a href="' . wc_get_cart_url() . '"><i class="fas fa-shopping-cart"></i> (' . WC()->cart->get_cart_contents_count() . ')</a>';
    echo '</li>';
?>

Place this code inside your header.php (or a custom nav walker), wrapped in appropriate HTML.

---

🔄 Make Sure WooCommerce Is Set Up Correctly

• Cart and My Account pages must be published and assigned under WooCommerce > Settings > Advanced.
• Icons won’t link correctly if these pages don’t exist or aren’t assigned.

---

🎯 Summary

Method	Best For
Theme Customizer	Easiest for supported themes
Menus with Icons	Quick and flexible
Plugin (Menu Cart)	Cart icon + item count
Custom Code	Full control (developer option)

---

H

SayPro XX Resources

• SayPro XX Resources Insights
  • SayPro XX Industry Insights
  • SayPro XX ase Studies
  • SayPro XX Whitepapers
• SayPro XX Webinars & Events
  • Upcoming SayPro XX Events
  • SayPro XX On-Demand Webinars
• SayPro XX Knowledge Center
  • SayPro XX Articles
  • SayPro XX eBooks
  • SayPro XX Templates & Checklists
• SayPro XX FAQs
• SayPro XX Glossary

To move pages from normal (standalone) pages to sub-pages (child pages) under a parent page in the Twenty Twenty-Five theme on WordPress, you can follow these steps. The process remains similar to what I previously described, but I’ll guide you with some additional details specific to the theme’s layout.

Steps to Move Pages to Sub-Pages (Child Pages):

---

1. Log in to Your WordPress Admin Dashboard

• Go to your WordPress login page (usually www.yoursite.com/wp-admin) and enter your login credentials.

2. Navigate to Pages

• In the left-hand sidebar, go to Pages and click on All Pages to see a list of all pages on your site.

3. Edit the Page You Want to Make a Sub-Page

• Find the page you want to make a sub-page and click on Edit under the page title.

4. Set the Parent Page

• Once you are in the page editor, look on the right-hand side for the Page Attributes section.

For the Block Editor (Gutenberg):

• In the Document panel (on the right sidebar), find the Page Attributes section.
• You’ll see an option labeled Parent. This is where you can choose the parent page for the current page.

For the Classic Editor:

• In the Page Attributes box (on the right side), you’ll see a Parent dropdown menu.
• From the dropdown menu, select the page you want to use as the parent for this page.

For example, if you want this page to fall under a parent page called Services, select Services in the dropdown menu.

5. Publish or Update the Page

• After selecting the parent page, scroll to the top of the page editor and click Update to save the changes.

---

6. Check the Frontend

• After making the change, go to the frontend of your website to confirm that the page is now listed as a sub-page under the parent page.
• The Twenty Twenty-Five theme automatically organizes pages hierarchically based on parent-child relationships, and it will display sub-pages in the appropriate manner, either in the navigation or sidebar.

---

7. Update Navigation Menus (If Needed)

In some cases, the parent-child page structure might not automatically appear in your menu. To manually organize the pages in the menu, do the following:

1. Go to Appearance > Menus in the WordPress dashboard.
2. Select the menu that is currently active or the one you want to edit.
3. In the left panel, add the parent and child pages to the menu.
4. Drag the child pages slightly to the right under the parent page to create the hierarchy. This will visually indent them as sub-pages (child pages).
5. Click Save Menu to save your changes.

---

8. Test the Menu (If Adjusted)

• After saving the menu changes, go to the frontend of your site and test the menu. Hover over the parent page in the navigation, and the sub-pages (child pages) should now appear as a dropdown or be listed as part of the parent page’s hierarchy.

---

Notes on the Twenty Twenty-Five Theme:

• The Twenty Twenty-Five theme, like other WordPress default themes, should automatically display sub-pages in a hierarchical structure on the page or in the menu if you set them up correctly.
• The parent-child page structure will be reflected in the page’s URL and in some cases, the theme might display it in a submenu or under a parent page in the page structure.
• If you want to customize how these pages display or want to add custom elements, you might need to modify theme files or use a plugin to enhance the functionality.

Conclusion:

By following these steps, you can easily create sub-pages in the Twenty Twenty-Five theme. The page hierarchy will be maintained, and the theme will automatically manage the structure in both the page editor and the front-end display.

To change the Site Icon (also known as a favicon) in WordPress, it’s not done directly through the General Settings, but rather through the Customizer. Here’s how to do it step by step:

---

🖼️ What Is a Site Icon?

The Site Icon is the small image that appears:

• In the browser tab next to your site title.
• In browser bookmarks.
• On mobile devices as a home screen icon (if someone saves your site to their phone).

---

🔧 How to Change the Site Icon in WordPress

✅ Method 1: Using the Customizer

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Customize.
3. In the Customizer sidebar, go to Site Identity.
4. Look for the Site Icon section.
5. Click Select Site Icon.
6. Upload a new image or choose one from your Media Library.
   • WordPress recommends a square image at least 512 × 512 pixels.
   • Select the Square SayPro Logo
7. Click Publish at the top of the Customizer to save your changes.

---

✅ Method 2: Using the Full Site Editor (for block themes)

If you’re using a Full Site Editing (FSE) theme (like Twenty Twenty-Four):

1. Go to Appearance > Editor.
2. In the top left, click the site logo or title area.
3. Choose the Site Icon section if available or click the Settings gear icon.
4. Follow prompts to upload or change the icon.
5. Save your changes.

---

🔄 To Remove or Replace the Site Icon:

• Just follow the same steps and either remove the current icon or upload a new one.

---

📐 Recommended Image Format

• Size: 512 × 512 px (minimum)
• File types: .png, .jpg, .ico (prefer .png for clarity)

---

To add or customize a top login icon on your WordPress navigation menu, you have a few ways to do it depending on your theme and desired functionality (e.g. icon + link to login/logout or user account). Here’s a complete guide:

---

🔒 Goal: Add a Login/User Icon in the Top Navigation Menu

✅ Option 1: Using a Plugin (Recommended for Non-Coders)

1. Install a User Menu Plugin

• Go to Plugins > Add New.
• Search for a plugin like:
  • WP User Manager
  • Login Logout Menu
  • User Menus – Nav Menu Visibility
• Install and activate the plugin.

2. Add Login/Logout Links to Menu

• Go to Appearance > Menus.
• You will see new options like Login, Logout, Register, and User Profile.
• Add them to your desired menu (usually the Primary or Top Header menu).
• Some plugins let you display different menu items based on whether the user is logged in or not.

3. Optional: Add an Icon

• If your theme supports Font Awesome or SVG icons, you can manually add a user icon to the menu item label: Login
  • Or use the built-in icon selector (if your theme or plugin supports it).

---

🔧 Option 2: Manual HTML or Custom Link with Icon

If you don’t want a plugin, you can manually add a menu item:

1. Go to Appearance > Menus.

2. Click Custom Links.

• URL: Enter your login page URL. Usually it’s:
  • /wp-login.php for default login
  • Or a custom login page like /my-account/ (for WooCommerce)
• Link Text: Add a user icon with text like: Login

⚠️ Note: This works only if your theme allows HTML in menu items or supports Font Awesome.

---

🛒 Option 3: WooCommerce User Account Icon (If You’re Using WooCommerce)

1. WooCommerce automatically adds a “My Account” link.
2. To show it as an icon:
   • Use a theme like Astra, OceanWP, or Storefront that supports header icons.
   • Or customize it via your theme’s header settings or builder (Elementor, Block Editor, etc.)

---

🎨 Optional: Styling the Icon

You can style your menu login icon via Custom CSS:

.menu-login i {
  margin-right: 5px;
  color: #333;
}

Assign a custom class like menu-login to your menu item under Screen Options > CSS Classes.

---

Summary

Method	Best For
Plugin (User Menus, Login Logout Menu)	Easy, dynamic login/logout links
Custom Menu Link with HTML Icon	Manual control, minimal setup
WooCommerce My Account Icon	WooCommerce sites needing login/account access
Theme Header Builder	Full visual control (if supported by your theme)

---