Matt Ryan

A journey lugging aspirations and experiences, tools and ideals.

Blog

How To Add an RSS Feed Reader to your WordPress Website from PACS

by ·

This Month’s WordPress SIG Topics

What’s new in WordPress since we last met.

Our featured area is a live demo How To Add an RSS Feed Reader to your WordPress website.

But first, our Topics from the Trenches segment.

Topics from the Trenches

Anyone, anyone? Yes, in the back!

Ron asked about a surprise captcha that was showing up when he visited the calendar page on his website, but only from his mobile device. Google does limit the number of hits to its calendar API under it free plan. If you add a credit card to your plan the limits are removed. The free tier is fairly high. A reboot of the phone cleared the issue. It may be that having the calendar opened in the browser on his phone, even while the page was not displayed could call out to the service and generate hits.

What’s new with WordPress?

The Month in WordPress – January 2023 – Detailed blog post on what’s going on. Lots of details about the upcoming WordPress 6.2 beta and Gutenberg 15.

Featured Topic: How To Add an RSS Feed Reader to your WordPress Website

What is RSS?

RSS is a type of web feed that allows users and applications to receive regular updates from a website or blog of their choice. The acronym RSS stands for Really Simple Syndication or Rich Site Summary. It is sometimes referred to as the feed or RSS feed.

In the early days of internet, if you wanted to keep track of updates on your favorite website, then you had to bookmark it and then manually visit to see if there were any updates.

RSS feed solved that problem by allowing users to keep track of their favorite websites without having to manually visit the website each time.

RSS allows bloggers and publishers to automatically syndicate their content, so that people can read it in their email, feed reader and other devices.

How Does RSS Feed Work?

RSS feeds work by publishing your latest content in a structured XML document. This feed contains your full articles or the summary, and metadata for each item like date, author, category, etc.

This XML document can then be fetched and read with a RSS feed reader. There are many RSS feed reader software available for all operating systems, desktops, and mobile devices.

All WordPress sites come with built-in support for RSS feeds. By default, each page of your WordPress site contains a meta tag that points to your website’s RSS feed location.

Finding Your Feed URL

There are times when you want to tell someone your site’s feed address or URL, or you need it to submit it to search engines and directories, many of which now accept feed URL submissions. There are four possible URLs for each of your feeds. Any of these will work.

http://example.com/?feed=rss
http://example.com/?feed=rss2
http://example.com/?feed=rdf
http://example.com/?feed=atom

If you are using custom permalinks, you should be able to reach them through this usage:

http://example.com/feed/
http://example.com/feed/rss/
http://example.com/feed/rss2/
http://example.com/feed/rdf/
http://example.com/feed/atom/

Why use an RSS feed?

Being able to display content from these RSS feeds opens up a whole new world for your WordPress site. You could build a news aggregator, create a content hub, aggregate job listings, plus a lot more.

How to use an RSS feed?

Here are a few examples of feed reader pages & services.

Eg.
https://stjameschurch.ws/news/forward-day-day/
https://mattryan.co/
https://dailybolt.com/

Example feeds in the wild:
https://wptavern.com/feed/
https://blog.archive.org/feed/
https://capwebsolutions.com/feed/
https://www.wissahickondems.com/feed/

Resources

Plugins

RSS Aggregator by Feedzy

WP RSS Aggregator

Zoom recording of the session

Can ChatGPT Outline My Presentation?

by ·

I recently put together a presentation for the WordPress SIG of the Philadelphia Area Computer Society (PACS) on the topic of RSS Feeds. On a whim I decided to try to see what ChatGPT would come up with if I asked it about the subject of the presentation. Could it outline a presentation for me?

This post shows what it came up with. I was impressed.

Here is the starting screen once you are logged into https://chat.openai.com/chat.

The blank chat bar can be somewhat intimidating. Not much to go on. I entered:

Add an RSS feed reader to my WordPress website

The response I received was typed out on the screen. I have included a screenshot of it at the bottom of this post.

Yes, ChatGPT’s response did include the numbered list and the “That’s it!” at the end. How cool is that?

To add an RSS feed reader to your WordPress website, you can follow these steps:

  1. Install and activate an RSS feed reader plugin: There are many RSS feed reader plugins available for WordPress. One popular option is “WP RSS Aggregator”. To install and activate this plugin, go to your WordPress dashboard, click on “Plugins” > “Add New”, search for “WP RSS Aggregator” and click “Install Now” and then “Activate”.
  2. Set up the plugin: Once the plugin is activated, go to “RSS Aggregator” in your WordPress dashboard and click on “Add New Feed”. Enter the RSS feed URL you want to display, and any other settings you want to adjust.
  3. Create a new page or post: To display the RSS feed reader on your website, you’ll need to create a new page or post. Go to “Pages” or “Posts” in your WordPress dashboard, and click on “Add New”. Give your page or post a title, and then click on the “+” symbol to add a new block.
  4. Add the RSS feed reader block: Search for the “RSS Aggregator” block and add it to your page or post. This will display the RSS feed reader on your website.
  5. Customize the display: You can customize the display of the RSS feed reader by adjusting the settings in the plugin. For example, you can change the number of items displayed, the order of the items, and the styling.
  6. Publish your page or post: Once you’re happy with the display of the RSS feed reader, click on “Publish” to make it live on your website.

That’s it! Your website now has an RSS feed reader. Visitors can view the latest posts from your RSS feed right on your website.

While I don’t think the the AI robot was as personal as I was, I do think the content was sufficient for the audience.

Here is a link to the original post on my PACS presentation. Enjoy!

How to Create a WordPress Form with Payment Options from PACS

by ·

The easiest way to create a simple WordPress payment form is by using WP Simple Pay.

WP Simple Pay is a Stripe payment plugin for WordPress that lets you accept credit card payments, Apple Pay, Google Pay, and more without having to install any special eCommerce plugins.

This free plugin is perfect for non-profits, small businesses, volunteers, and anyone who wants to collect payments without having to invest in advanced eCommerce plugins.

For this guide, we will be using the free version of WP Simple Pay since it has everything you need to start accepting payments online. There’s also a pro version that lets you accept payments using ACH direct debit, set up a recurring payment plan, add a buy now pay later plan to WordPress, and much more.

First, you’ll need to install and activate the WP Simple Pay plugin.

Upon activation, the plugin will automatically launch the setup wizard.

In the next step, you’ll need to connect a Stripe account to WP Simple Pay. Stripe is a beginner-friendly payment processor for website owners.

To get started, click on the ‘Connect with Stripe’ button.

After that, you can either log into an existing Stripe account or create a new one.

If you’ve already registered with Stripe, then simply type in the email address and password for that account.

WP Simple Pay will now show you how to connect your Stripe account to WordPress.

If you’re not already registered with Stripe, then type in your email address and then follow the onscreen instructions to create your free Stripe account.

Once you’re logged into a Stripe account, go ahead and click on ‘Create a Payment Form.’

If you’ve clicked away from this screen by accident, then don’t worry. You can reach the same screen by going to WP Simple Pay » Add New in the WordPress dashboard.

The free WP Simple Pay plugin has a few different payment templates that can help you create different kinds of payment forms within minutes. You can unlock extra templates by upgrading to WP Simple Pay Pro, including a template that adds a Stripe donate button in WordPress.

Since we want to create a simple WordPress payment form, hover over the ‘Payment Button’ template and then click on ‘Create Payment Button’ when it appears.

In the ‘Title’ field, type in a name for your payment form. This title is just for your reference so you can use anything you want. Notice that you will see an SSL warning message. You will need to add an SSL certificate to your website in order to use Stripe to process payments.

You can also use the ‘Description’ field to add some information about your payment form. Again, WordPress won’t show this to your site’s visitors but it can be useful for your own reference or for anyone else who shares your WordPress dashboard.

After that, click on the ‘Payment’ tab.

By default, WP Simple Pay will create your payment form in test mode, meaning you can’t accept payments from visitors.

We recommend leaving the ‘Global Settings (Test Mode)’ radio button selected, so you can test how the form works before you start accepting payments from visitors.

Next, you can decide how much you’ll charge visitors by typing a number into the ‘One-Time Amount’ field.

Note: By default, WP Simple Pay uses the dollar currency. If you want to accept payments in any other currency, then simply head over to WP Simple Pay » Settings. You can then select the ‘Currency’ tab and choose a new currency.

After you’ve done that, select the ‘Form Fields’ tab.

By default, your button will have the label ‘Pay Now’, but you can change this to anything you want by typing into the ‘Button Text’ field. We are using “Send Us a Tip” since this is an optional payment.

You can also change the ‘Button Processing Text,’ which is the message that WP Simple Pay will show to shoppers while it’s processing their payment.

Again, since this is an optional payment form you might use something that reflects this, such as ‘We’re processing your donation.’

By default, WP Simple Pay will use the same button style as your WordPress theme. It also has a ‘Stripe blue’ style that you can use, as you can see in the following image.

If you want to use this button style, then simply select the ‘Stripe blue’ radio button in the ‘Payment Button’ section.

After that, select the Stripe Checkout tab and choose the information that WP Simple Pay will collect from visitors at checkout.

For example, if you’re selling a physical product then you’ll want to check the ‘Collect Shipping Address’ box.

As you’re working on the payment form, you can preview how it looks at any point simply by clicking on the ‘Preview’ button.

This opens the payment form in a new tab, in exactly the same way you preview posts and pages in the standard WordPress editor.

When you’re happy with how the payment form looks, go ahead and make it live by clicking on the ‘Publish’ button.

You can now add the payment form to any page, post, or widget-ready area using the value in ‘Form Shortcode.’

If you published the form in test mode, then the Stripe dashboard doesn’t show any payments you get during this time, which makes it difficult to test your optional payment form.

To see your transactions, you’ll need to activate test mode in Stripe by logging in to your Stripe dashboard and then selecting the ‘Payments’ tab.

Here, simply hover your mouse over the optional payment form, and click on the ‘Edit’ link.

You can now go ahead and select the ‘Payment’ tab, and then click on the radio button next to ‘Live Mode.’

Finally, click on ‘Update.’ Your payment form is now live, and you’re ready to start accepting money from your audience.

Resources:

This session was taken largely from a blog post originally appearing on WP Beginner. The link is shown below.

How to Create a WordPress Form with Payment Options (Easy Way) (wpbeginner.com)https://www.wpbeginner.com/plugins/how-to-create-wordpress-forms-with-a-payment-option/

SSL Certificates – The Why and How from PACS

by ·

This Month’s WordPress SIG Topics

What’s new in WordPress since we last met.

Our featured area is a discussion on WordPress website security.

But first, our Topics from the Trenches segment.

Topics from the Trenches

Anyone, anyone? Yes, in the back!

Topics From The Trenches

What is markdown?
– John Davey

What is Markdown?

Markdown is a text-to-HTML conversion tool for web writers.
Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.

– John Gruber – founder

Uses of Markdown

Creating WordPress content Add New Page ‹ wpsigworking — WordPress

Generic HTML writing

General notes – Obsidian

What’s new with WordPress?

State of the Word – 2022

The Month in WordPress – November 2022 – Detailed blog post on The State of the Word.

No new code releases

Featured Topic: SSL Certificates
Why & How

SSL (Secure Sockets Layer)

The standard security technology for establishing an encrypted link between networked computers.

Benefits to your WordPress Website

Encrypts and secures sensitive information so that only the intended reader can read it.

Ensures secure passage of information across the net

SEO & Perceived Value Impact

SSL certificate impacts your website SEO

Sites w/o SSL installed deemed lower-trust websites

Penalized on search rankings

Give visitors confidence

Secure with SSL

How to Get One?

Ask your host

Let’s Encrypt (letsencrypt.org) is free

Some charge, eg GoDaddy $79/year

Cloudflare, free tier

Really Simple SSL – WordPress plugin | WordPress.org

Then What

Install Certificate

Redirect HTTP -> HTTPS

How to Redirect

Log into WordPress Dashboard

Settings | General

WordPress Address (URL)

Site Address (URL)

Update URLs to include https instead of http

Server Redirect

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_USER_AGENT} ^(.+)$
RewriteCond %{SERVER_NAME} ^coolexample.com$ [OR]
RewriteCond %{SERVER_NAME} ^www.coolexample.com$
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

Mixed Content Messages

Database Search and Replace

http://coolexample.com -> https://coolexample.com
http://www.coolexample.com -> https://collexample.com

Plugin: [Better Search Replace – WordPress plugin | WordPress.org](https://wordpress.org/plugins/better-search-replace/

Cloudflare Options

Overview · Cloudflare SSL/TLS docs

Simple URLs Legacy WordPress Plugin Released

by ·

Simple URLS Legacy is live. This has been an awesome experience. I have a plugin in the WordPress repo.

As a backend engineer at WebDevStudios I have been given the opportunity to contribute to the future of the WordPresss open source project by participating in the Five for the Future initiative. WebDevStudios contributes to the #5FTF project by enabling its employees, ALL it’s employees, to work on a #5ftf project on the last working day of the month.

Over the past three months, I have been working on a fork of a plugin I have been using for quite some time on WordPress websites I have developed for myself and others. About a year ago, the plugin Simple URLs was adopted by another developer and the plugin was redirected into more commercial directions.

I preferred the simplicity of the original plugin as intended by its developer, Nathan Rice. I followed the online discussions in the Genesis Facebook group about the plugin and decided that I wanted to do something about it. I decided to fork the original plugin ( to ‘fork’ is to make a copy ) at the point when it was adopted by the new developer. That was at v 0.9.9. I wanted to go back to this older, or legacy version of the plugin.

And so it was, Simple URLs Legacy was born.

Today, my dream of having a plugin in the WordPress repository has finally come true. You can install the plugin directly from your WordPress dashboard by searching for simple urls legacy, or download it from wordpress.org/plugins/simple-urls-legacy.

Simple URLs Legacy plugin displayed in WordPress dashboard

Thank you @webdevstudios for sponsoring this activity and enabling me to feel such a strong sense of technical community with all other developers who fully embrace the WordPress ecosystem.

If you try out ‘SURLEG’ and have ideas or feedback, please let me know. And don’t forget to leave a review.

Let’s Make a Block Child Theme

by ·

How are block themes different from classic themes?

Quick Review

  • What is a child theme?
  • Why use one?

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. To understand how child themes work it is first important to understand the relationship between parent and child themes.

What is a Parent Theme?

A parent theme is a complete theme that includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.

What is a Child Theme?

A child theme inherits the look and feel of the parent theme and all of its functions but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site.

Child themes

  • Make your modifications portable and replicable;
  • Keep customization separate from parent theme functions;
  • Allow parent themes to be updated without destroying your modifications;
  • Allow you to take advantage of the effort and testing put into parent theme;
  • Save on development time since you are not recreating the wheel; and
  • great way to start learning about theme development.

Block vs Classic Themes

  • Block themes are built for the newer functionality of WordPress
    • Use blocks to edit all parts of your site, customize everything from your background colors to font sizes for all heading blocks.
  • Classic themes are built with PHP templates, functions.php and more
    • Include features like widgets, a dedicated menus section, a customizer, and more.
  • Classic themes do not work with the Site Editor.

Building a child theme for a block theme.

  • Start with a testing environment.
    • LocalWP from WP Engine. Cross-platform local development environment for WordPress.
  • Download LocalWP at https://localwp.com/

LocalWP Default Setup

  • LocalWP sites start with 3 default themes. They are:
    • Twenty Twenty-Three << set as the active theme
    • Twenty Twenty-Two
    • Twenty Twenty-One
  • We are going to build a child theme for TwentyTwentyThree

Basic Local Site Environment

Site created -> http://letsmakeachildtheme.local

Screenshot of the LocalWP admin dashboard showing new local site name letsmakeachildtheme

We are going to use the LocalWP admin screen to jump to the folder on our PC that holds the newly built website. The “Go to site folder” link jumps right to the root of the local site.

Screenshot capture of PC file explorer showing folders and files in a local WordPress website.

Folder setup on disk with LocalWP. LocalWP creates the top-level folder on disk using the name of the website. Inside that is an ‘app/public/’ folder which holds the WordPress core files. LocalWP also creates a few support folders that hold the configuration data for the specific webserver and the PHP version being used for the website. We won’t be working with those folders and files here.

You have the WordPress website with folders

  • wp-admin, wp-content, wp-includes
  • 18 files created on a new site
  • The files created may vary based on your host

Block Theme Child Theme Requirements

  • Folder to hold child theme files
    • style.css
    • theme.json
  • 2 additional folders
    • parts
    • templates

I’m going to jump into my editor for this next step to better demonstrate the the folder and file creation steps in a more cross platform experience. I use Visual Studio Code as my code editor. It’s available for Windows, Mac, Linux, or on the web.

Open wp-content/themes folder in VS Code editor.

SCreenshot of Visual Studio code showing files in WordPress block theme

Create a folder for our child theme. We will call it mychildtheme.

Create two files & folders

FilesFolders
style.css
theme.json
parts
templates

The style.css file needs a few tags so that WordPress knows it is a theme, and that it is a child of a parent theme. By default, all themes are considered parent themes.

A theme.json file is used to define the many settings in Global Styles and more. You can learn more about theme.json from the developer handbook.

In Classic themes, functions.php is necessary for child themes. Block child themes do not require this. Let’s jump into the dashboard of our WordPress website to see what is going on.

The style.css file needs tags to show that it is a child theme. Basic tags needed are the theme name and the template name. They include the name of the parent theme. That name matches the theme folder name.

Style.css

The developer documentation says:

Your stylesheet must contain the required header comment at the very top of the file.
This tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.

You’ll need to include the boilerplate in style.css file containing your header information.

  • Theme Name: the name of your new child theme.
  • Template Name: the folder (directory) name of the parent theme.
  • Text Domain: name is unique to your WordPress child theme.

A minimal child theme style.css file header is shown below:

/*
Theme Name: My Child Theme
Template: twentytwentythree
Text Domain: twentytwentythree-child
*/

Here is a full style.css header.

/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: Twenty Twenty Three Child Theme
Requires at least: 5.8
Tested up to: 6.1
Requires PHP: 5.6
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentythree-child
Template: twentytwentythree
*/

theme.json

See the developer documentation for a deeper dive into theme.json. We’ll take a look at the Twenty Twenty-Three theme.json file at the highest level.

{
    "version": 2,
    "customTemplates": {},
    "settings": {},
    "styles": {},
    "templateParts": {}
}

Within each of these are further styles available to you. For example, the settings area in the Twenty TwentyThree uses:

{
    "settings": {
        "appearanceTools": true,
        "layout": {
            "contentSize": "650px",
            "wideSize": "1200px"
        },
    "slug": "foreground-and-background",
    "name": "Foreground and background"
}

It is recommended that you copy the theme.json file from the parent theme and edit as needed. Take out the settings you do not intend to change and keep the ones you will tweak for your child theme.

If you are so inclinded, start from scratch.

For help making a theme.json file check out the themegen.app site for a guide to creating many of the choices for your theme.json file.

Folders: parts & templates

  • parts folder holds customizable elements, ie headers and footers, built with html.
  • templates folder is where you will create customizable pages that used to be built using php template files.
    • Very similar to template files in classic theme
    • Built using Block editor-styled HTML elements

Let’s Make a Change & Create a Child Theme

My New Color pallet

Bluey Party Theme from Color-Hex.com.

Block theme child theme generators do all this for you!

Child theme generators for block themes

Allows you to make changes in the current block theme, and then save those changes as a child that is downloaded and ready for you to install and activate.

Child theme generators for non-block themes

These will create 2-4 basic files needed for non-block themes. The WPS Child Theme Generator will also enable you to download a zip of the theme.

Resources

  • https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/
  • https://developer.wordpress.org/themes/advanced-topics/child-themes/
  • https://www.godaddy.com/garage/how-to-create-a-block-child-theme-in-wordpress/
  • theme.json – https://developer.wordpress.org/themes/advanced-topics/theme-json/

This presentation was delivered at the BurbsWP WordPress gathering held in person in Malvern, on November 14, 2022. Sponsored by Green Street Technology Solutions.

WordPress Website Security from PACS

by ·

WPSIG October 2022 Website Security This Month’s WordPress SIG Topics What’s new in WordPress since we last met. Our featured area is a discussion on WordPress website security. But first, our Topics from the Trenches segment. Topics from the Trenches Anyone, anyone? Yes, in the back! Nothing this month. This ad hoc section of our […]

The post WordPress Website Security appeared first on PACS WordPress SIG.