• Skip to main content

Matt Ryan

A journey lugging aspirations and experiences, tools and ideals.

Blog

How to Create a WordPress Form with Payment Options from PACS

by · Jan 25, 2023

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/

Filed Under: PACS, Technology, WordPress

SSL Certificates – The Why and How from PACS

by · Jan 19, 2023

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

Filed Under: PACS, Technology, WordPress

Simple URLs Legacy WordPress Plugin Released

by Matt · Dec 30, 2022

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.

Filed Under: Development, WordPress Tagged With: plugin

Let’s Make a Block Child Theme

by Matt · Nov 14, 2022

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

  • Create Block Theme

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

  • Generate Child Theme
  • WP Child Theme Generator
  • WPS Child Theme Generator

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.

Filed Under: Draft, Speaking Tagged With: BurbsWP

WordPress Website Security from PACS

by · Oct 22, 2022

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.

Filed Under: PACS, Technology, WordPress

Making a child theme for a block theme

by Matt · Sep 19, 2022

Hi WordPress wizards. Thanks for tuning in today. This is the start of our 2022 – 23 PACS season. I had hoped to record the session, but alas, Teams and my Microsoft account are not playing well today and I had no option available to me to record the meeting. To be fixed next month. […]

The post Making a child theme for a block theme appeared first on PACS WordPress SIG.

Filed Under: PACS, Technology, WordPress

Don’t email your password!

by Matt · Aug 8, 2022

This post originally appeared on capwebsolutions.com

The Problem: Your technical support team just asked you for access to your website, hosting account, registrar, etc. As a technical support professional, I will typically need to get access to the dashboard of your website to begin working on a problem. Sometimes, I need to make a change to your DNS zone file, or […]

The post Don’t email your password! originally appeared on Cap Web Solutions.

Filed Under: Cap Web Solutions' Posts, Entrepreneurialism, WordPress

Next Page »

© 2023 · Matt Ryan · Made with in Chester County, Pa
Powered by the Genesis Framework using a customized by Cap Web Solutions No Sidebar Pro Theme.

  • About
  • Blog
  • Contact
  • Privacy