E-commerce, digital items, and SSL certificates

So, you want to create an online marketplace for your goods or services. What do you need to know? At this month’s meetup we covered the basics of e-commerce.

For the presentation, I setup a demo site on my laptop using MAMP. I suggest setting up a development site so you don’t mess with your existing site.

To keep things simple I’m going to talk about e-commerce in for key areas

  • Storefront
  • Inventory
  • Payment
  • Orders/Shipping

What do do. First, setup a site. Pick a theme. For the demo I used the eStore theme on the WordPress.org theme directory. You can filter for themes that are tagged for commerce!

For the purpose of the demonstration I chose the WooCommerce plugin. Why?

  • It’s popular – 3 million installations
  • Owned by Automattic (previously WooThemes)
  • Great reputation
  • Flexible ecosystem

Once installed, WooCommerce walks you through the process of setting up the basics of your store. Once setup, and depending on the kinds of items  you’ll want to sell you may need to set up attributes, shipping, categories and other settings. You can do this at any time, but if you what you need to set up (like t-shirt sizes and colors) you should do this first. Then, start start adding Products!

During the presentation I roughly followed the handy guide for getting started from WooCommerce.

Payment Processing

And then there’s payment processing. This is one of the trickier aspects of e-commerce. For most people WooCommerce can do what they need 90% of the time. Even with built-in payment process solutions like PayPal and Stripe. However, There are a few things to consider.

Know your audience! What will they be more likely to use? You don’t need a thousand options if most folks your serve have an Amazon account.

 

What about digital items?

Tips for selling digital products with WooCommerce

SSL Secure Sockets layer

If you’re using a payment processor most handle the transaction and then return the visitor to the site. However, with some, like Stripe, you can perform the entire transaction “on site” (or the appearance of on-site). You’ll need a SSL certificate for it to work at all. You also are storing personal information (name, phone, address). Keeping as much information being sent over the wire secure is a good idea.

So, what does having a SSL certificate mean? It means that all communications between a user on their device and your website is encrypted. Think of it as a secret handshake between the two computers that prevents anyone seeing the information being sent (like over that open Wi-Fi at the local coffee shop!) during transmission.

There are many ways to add an SSL certificate. The easiest way, but potentially the most costly is to contact your hosting company. Bluehost and others companies offer it as an add-on – sometimes free, sometimes at a cost.

You can also setup other options, but they require a little technical know-how and time to implement.

  • Let’s encrypt! – https://letsencrypt.org
  • Cloudflare – https://www.cloudflare.com/plans/

Other reasons to have an SSL certificate

It builds trust. When people see that your site is secure they are more likely to trust the site and complete their transaction. Recently more modern browsers alert users when the site is not using an SSL certificate. Having a certificate ensures that your visitor won’t see conceding message about your site not being secure. Finally, Google rankings are slightly improved for sites that have an SSL certificate over those who do not.

Learn more about WooCommerce at WordPress.tv

What the heck is PHP?

These are the presenter notes from our January 2018 meetup.
According to Wikipedia, “PHP is a server-side scripting language”. What the heck does that mean?
Server-side – a server is just a type of computer, like your phone or laptop – with a specific purpose – like your phone or laptop. Server-side means that all the work in creating the web page created in PHP is done on the server. The client (server/client relationship) is your computer/device that just displays the resulting HTML, CSS, and javascript.
Scripting – the code is not complied into machine language – it remains human-readable
Language – a set of instructions (and rules) to make computers do what we want them to do. Every time, even when they break. 🙂

Best practices

Some solid advice, adapted from Presscoders.com.
1. See if a theme option will do the trick first
2. Use CSS to manipulate design (child theme style.css file)
3. Use functions.php for structural changes
4. Add new template files to a child theme
5. Use a plugin (only for major feature additions)

Let’s write some PHP

First, FTP or otherwise access your we server. Create a new document and call it “neat.php”. PHP files are just text files so you should be able to open the file in your text editor of choice.
Copy the following to your “neat.php”, save the file, and then open the file in your web browser. http://yoursitename.com/neat.php
<?php
echo “Hello world”;
?>
You should now see the words “Hello world” in your browser.
The  text you copied over is PHP! The first line let’s the server know the following text should be treated as PHP code. The second is our code. “echo” is a PHP command that outputs the strings (the text) it is being passed as arguments. So we’re saying, “Hey PHP, output the following bit of text. The colon is an instruction separator. We’re telling PHP that we’re done with this instruction. The last sentence tells the server, We’re done running PHP. You can stop now.
Here’s some PHP inside of an HTML element.
<div style=”border: 3px solid red;text-align:right;”>
<?php
echo “Hello world”;
?>
</div>
This is our same PHP code as before, but this time its inside of an HTML div. As you can see in this very simple example, your HTML and PHP can live inside of one another. Having HTML inside of PHP is a little more complicated to explain, but also possible.

How does WordPress use it?

WordPress uses PHP across the software. Most commonly for most WordPress users you’ll find it inside of your Theme files. These files are called templates.
Using your text editor, open the “footer.php” file in your theme of choice. Each theme’s file will look differently, but you can see that the code inside the template defines what the footer (bottom most section of your pages) will look like.
Some themes are broken up into even smaller units like for instance:
“template-parts/footer/site-info.php”

What can I do with PHP to modify my WordPress site?

Everything!
Small little changes like we did above in our child theme. The best way to learn when starting out is to just go muck with something, save the file and see what happens. If something breaks or doesn’t behave like you expect, undo your changes, save, and try again.
The loop is the way WordPress builds individual posts. You an modify things inside the loop so it applies to every post that appears – either by itself or in a list like say your blog or a category.
functions.php
One way to modify your WordPress site is by editing your theme’s functions.php !
Here’s an example that allows you to customize the login form users see when administering a site.

Themes and plugins are written in PHP!

Themes
You can hack an existing theme, or create your own. Instead of starting from scratch, use a starter theme!
As an aside: Starter themes are really basic themes that provide a base for you to build your own custom themes without starting totally from scratch. They often contain little to no styling.
A popular example:  http://underscores.me
Let’s mess around a little with our footer.php. What happens if you add each of these lines to your code? Where does it break or not work?
<?php wp_title(); ?>
<?php $author = get_the_author(); ?>
<?php $author = get_the_author();
echo “$author”
?>
More on WordPress functions:
Plugins
Since PHPis a scripting language and not compiled, we can view and modify any of the code we see in WordPress – including plugins!
One of the most simple and popular plugins that you can look at to see how it works:

Extend WordPress

You can also use PHP to store, retrieve, and modify content from the database! WordPress stuff, or you can extend it to your own schema!
One of my favorite is Advanced Custom Fields – gives you control over how content is entered, and then uses short PHP snippets to include in your theme files.

What do I do when I’m stuck?

Debugging errors in WordPress/PHP is something you’ll have to run into when working with your site. A few resources:
Google! Just enter the most generic parts of the error message with the word “WordPress: will lead to discussion (and hopefully answers) where other people have encountered similar issues.

More resources

Staging WordPress

At the General WordPress Meetup this month we discussed staging WordPress. Here are a few notes from the meeting and some helpful links. As always, I hope to see you all next month as we learn about PHP and WordPress!

What is a staging environment?

A staging environment is a place to experiment, play, and test with WordPress. You can use this space to test your current (or future) site and content, without messing anything up!
What do we mean by “staging”? Staging a website is breaking down the development of the site into separate stages. It is a one possible tier in the product development process. The end stage is often called your “production” environment. The actual site visitors see when they visit  your site. Commonly if you are developing software of any kind (WordPress sites are software!) you will have multiple environments that precede your production site. In larger organizations, or with more complex sites, you may have multiple staging environments, for security, quality assurance, customer feedback (like a beta environment) and more.
For the purpose of a single-operator site like most folks you should have at least a single staging environment.
What the heck do you mean by “environment”? An environment is a place where code runs. This includes the operating system, software your code is dependent on, and any configuration specific to each (memory allocation, disk quotas, etc).
It’s a fancy way of saying the space where you’re running WordPress  separate from where your production site is running – so you can change and modify one environment without impacting another.

Why are they important?

WordPress sites are complex. Even your basic sites has many moving parts. As Carl Sagan once said, “If you wish to make an apple pie from scratch, you must first invent the universe.”
Setting up a separate staging environment allows you to test, play, and work in parallel with your production site without breaking anything. Staging sites also offer a level of redundancy when it comes times for updates to themes, plugins, and WordPress itself. Are you worried that an update might break something? Or that a theme change could reset your customizations? Better to test that on the stating environment than your production site!

How do you set up a staging environment?

There are generally two ways – locally, or on a web server somewhere. There are pros and cons of each. Bother are generally the same in how WordPress will function.

Local

Local setups are best handled by a software that will set up the environment for  you. One of the most popular solutions is a fee software called MAMP, which is available for both Macs and Windows PCs.
MAMP is easy to set up. Install the software and hit the “Start Servers” button. You now have a web server running on your computer. From here you can install WordPress, setup a MySQL database, and get to work customizing WordPress.
Pros
– Easy to set up with many guides available online
– Offline access meaning other’s can accidentally see your in-progress site
Cons
– Have to muck with command line make it appear as online site with a nice URL
– Can’t easily show others as the site only exists on your computer
– Local MAMP environment can be different from actual production site (this is more rare now a-days, but still possible).

Web server (subdomains)

Another way to set up a staging environment is to use a web server like you have for your production site. But Chris, I only have one web server – where my current site lives! Ah ha! This is where subdomains come into play. Most web hosts (GoDaddy, Bluehost, Dreamhost, etc.) allow you to set up a secondary subdomain. This is  a separate site that runs on your existing web host (most likely in a separate folder from where your current site lives).
So, for your staging site you might have something like “test.coolsite.com” and your production site will live at “cool site.com”.  You can work on test.coolsite.come and not touch your life site’s configuration. For many hosts setting up subdomains is easily handled through your administration panel. You create the subdomain, access the directory (folder) where the subdomain lives, and install WordPress like you did for your production site. Here are a few guides for some of the more popular web hosts.
 Pros
– Often runs on the same exact configuration as your production site
– You can share the subdomain with other people so they can see the site while you are working on it.
Cons
–  A little more difficult to set up, but if you already have a production site, it’s a bit more of a “rinse and repeat” procedure as you’ve already done it once!
– It is another live site on the Internet! You have to make sure security and access are managed (along with updates).

Additional Tips

– If running on a subdomain: Make sure your staging site is kept up to date!
– Set the site to “Discourage search engines”. In WordPress, under “Settings>Reading” look for the option and enable.
– You may even want to use a plugin to password protect the site.
– If you really want to make sure search engines don’t inadvertently suck in your in-progress staging site, add a text file to  your root subdomain directory and insert the following two lines of text.

User-agent: *
Disallow: /

 This tells search engines to not index anything in the subdomain.

Migration

So once you have your site setup as you want it in your staging environment, how do you move it to production? In the past you would have to have done this manually. Which, as the Codex explains, can easily be a time-consuming and error prone process. If this was 5-7 years ago I would recommend the manual process (and still think it’s important to understand what is happening underneath the hood) but today there are many helpful, well-written plugins that can help make these migrations much easier.

I recommend two plugins to help, each is a little different in their approach. These are well-supported and well-reviewed plugins with many tutorials and guides available online. Pick one and follow the directions to move your staging site to production. As with anything WordPress related, make sure you have a backup of your files and database before doing anything!

WordPress General Meetup Notes – Essential Plugins

In December we talked about essential plugins and where to find them.

WordPress.org should be your first stop to look for plugins. There you can find the Plugin Directory, which lists all freely available plugins. Aside; There’s a new version of the directory coming soon that is even better for discovering plugins! You can also browse the directory from within WordPress itself under the “Plugins>Add New” menu in the WordPress dashboard.

Plugins listed in the directory give a description of what the plugin does, installation notes, and even reviews from other plugin users. You can also see who the developers are and most plugins have an active support forum to discuss issues and feature requests with the developer. One way of determining if a plugin is good to use is to follow  a short checklist.

  • Has it been updated recently?
  • How many sites are actively using it?
  • What is the average rating?
    • What do the reviews say about the plugin?
  • Is the developer active in responding to questions?
  • Does the developer maintain other contributions to the community (plugins, themes, presenting at WordCamps, etc)?

One thing to keep in mind with plugins is performance. Too many plugins can slow down your site. Installing two plugins that do the same thing is also not a good idea as conflicts can happen that can impact performance or down right break your site! This is why having a good development site to tinker with is helpful when managing WordPress.

On to the list of plugins we talked about. I’d love to hear of alternatives or additional items in the comments!

The discussion also covered a few other related tools for managing and monitoring your site. These included:

Thanks to everyone who came out and we’ll see you in January!

WordPress General Meetup Notes – Page Builders

In October Alex Miller gave an introduction to page builders. These are plugins that can drastically change how you manage content in your WordPress site. From drag-and-drop layout options, easy galleries and more.

I took down a few notes, which try to cover some of the larger points Alex made through the evening. Feel free to drop a note below if you have any questions or feedback.

  1. Why use page builders?
    1. One reason is that it keep folks from messing up things they shouldn’t be messing with!
    2. It also makes it easy to update content without out having to be a design/layout genius.
  2. Only going to cover WordPress.org page builders – ones that are freely available
  3. Live Composer – https://wordpress.org/plugins/live-composer-page-builder/
    1. Cons
      1. bunch of clutter in the sidebar you can’t remove
      2. navigating tools in live view are a little cumbersome
      3. pre-populates text fields
      4. lots of toolbars, confusing
    2. Pros
      1. lots of tools
      2. can bring up standard WP editor in visual mode
  4. Site origin – https://wordpress.org/plugins/siteorigin-panels
    1. Cons
      1. limited layout options for ‘rows’ (like only bottom margin for each row)
    2. Pros
      1. no clutter in sidebar
      2. easy-to-use visual editor
      3. import/export layouts
    3. Beaver builder – https://wordpress.org/plugins/beaver-builder-lite-version/
      1. Cons
        1. no prebuilt templates for free version
        2. limited media ‘modules’ (called widgets in other page builders)
        3. no gradient support in column/row settings for backgrounds
        4. some default padding/margin are a little weird
      2. Pros
        1. limited modules are really easy to use
        2. responsive design break points can be set per module
  5. General notes on page builders
    1. Once you commit to a visual editor, switching (or going without) will be work – there’s not a lot of cross-migration between these competing tools.
    2. Uninstall might not keep your content!
    3. Beaver builder and site origin does add html and thankfully no shortcodes! Live editor is all inside their plugin – hard to salvage underlying content
    4. Think about what you need. Do you need a page builder (landing page) or just custom post types and ACF?
  6. Beaver builder is #1 pick
    1. good usability, flexibility, and support

WordPress General Meetup Notes – Contributing to the WordPress Community

In September our very own Jen Swisher, the lead organizer for WordCamp St. Louis 2017 shared how you can contribute to the WordPress community. It’s not just about code or design, but there are many ways to get involved. Quite frankly, we need your help!

Check out Jen’s presentation below and join us at our next monthly meetup and get involved!

WordPress General Meetup Notes – WordCamp Recap and Intro to WordPress

This month at our general meetup we talked about our recent WordCamp and what we can do better next year. If you weren’t able to attend the meetup, but did attend WordCamp, please leave a note on what we can do better next year in the comments section.

Speaking of WordCamps, don’t forget to check out other nearby events. Oklahoma City is in July, Nashville in September, and  Cincinnati in October!

At our meetup we spent the rest of the evening talking about the basics of WordPress.  We shared a few resources I’ve shared below. It was a free-form conversation and we touched on a few big points and delved into a few nitty-gritty details (like importing content) as well.

One of the first things we discussed was the difference between WordPress.org and WordPress.com. The .org version is the self-hosted, you-can-do-anything version of WordPress. This flexibility comes at a cost. You have to set up your own hosting solution (where WordPress lives) and are responsible for testing, upkeep of WordPress, and maintaining your plugins and themes. However, it is by far the most rewarding way to use WordPress as the potential for adaptation and customization is limitless.

The other version of WordPress is the .com version. This version is hosted by a for-profit company (Automattic). They maintain WordPress, plugins, and themes. However, you are limited to a smaller selection of customization options, and on their free tier have other limitations (like ads being shown on your site).

From there the conversation went into talking more about the .org version. We discussed where to find themes (WordPress.org) and plugins (WordPress.org) and how to find themes and plugins that were well-maintained and supported.

We also reviewed the Codex, the “Mother Brain” of the WordPress community. The Codex is an encyclopedia of information about every bit of WordPress. From child themes, to specific functions, it covers it all. Any time you want to learn how to do something in WordPress (especially on the geeky side of code) start with the Codex.

Another great resources is WordPress.tv. Those WordCamps I mentioned earlier? Nearly every session from every WordCamp is recorded and shared there. If you want to know more about CSS or eCommerce, there are plenty of videos to peruse – for free by folks who know their stuff. Here’s one of the first videos you should start with. Matt Mullenweg, founder of Automatic and WordPress, gave a great overview of where WordPress is at, and where it is going, last year at the first WordCamp US event.

If WordPress.tv isn’t your cup of tea, and you live in the St. Louis region, you can also get access to the thousands of videos on the education site lynda.com. More info is on the St. Louis County Library site.

One of the questions was on managing WordPress projects. Something I hope we can talk about at an upcoming meetup. For now, I think Lucas Lima (a local St. Louisian) gave a great talk last year about this very topic.

A book recommendation along the lines of working with clients was my choice pick, You’re My Favorite Client by Mike Monteiro.

That was it for the eventing – a lot to digest I’m sure. If you’ve reached the end and still want more, view past topics on our Meeup.com page or peruse the archives here on stlwp.org. OR, if you’re really adventurous, join us at an upcoming meetup!

Photo by Armando Torrealba – licensed under Creative Commons

What’s up with WordCamp St. Louis 2016?

The short version:

WordCamp St. Louis will be Friday, May 14th and Saturday, May 15th at Washington University. Sign-up for more information and we’ll let you know once our site is up.

Slightly longer version:

WordCamp central is working on revamping their process for organizing WordCamps. Part of that new process requires that we have a mentor to help us. Mentors are volunteers and we’re all out of ’em! So we’re waiting for a mentor, to get the OK, to get our site setup, to start doing all the fun things that come with organizing a WordCamp!

WordPress West Meetup Notes: Speeding up WordPress

Thanks to everyone that was able to make it out to the WordPress Meetup West on Monday night. We covered speeding up your WordPress site at the server level, theme level, and content level.

Next month we’ll be looking for speakers to give 5-10 minute lightning talks. So if anyone has a topic they’d like to share send me a message through the Meetup group and we’ll get things set up.

Here’s the notes:

Meetup notes from “What’s New in WordPress 4.4?” for December 2015

This month we talked about what’s new in the latest release of WordPress, version 4.4. Here’s a few notes from the evening’s presentation.

Little History

First a little history and reminder. With WordPress releases like 3.x and 4.x –  these are generally bigger updates to WordPress that include new features or large changes.

3.4.1 or 4.3.2 are smaller bug and security fixes – these are applied automatically by default. You won’t often find much outward facing in these updates.

Last Few Releases

Here’s a list of the last few releases of WordPress leading up to 4.4 and what they brought to the table.

4.2 – Bud Powell

  • Customizer came into its own
  • new languages!
  • better plugin installations
  • “Press This” got an update (bookmarklet that allows you to quickly post content from wherever you’re at on the web.)
  • emoji support (really a sneaky update for better Unicode support) for translations

4.3 – Billie Holiday

  • resetting password made more secure
  • menus added to Customizer
  • multisite changes
  • updated editor – switching between visual and text with less “ugh”
  • formatting shortcuts in visual editor
    • * or 1.

4.4 – Clifford Brown

That brings us to our most recent release. One little note, Eric Juden and Joe McGill are two local st. Louisan’s who are code contributors in this release!

  • New Default Theme – Twenty Sixteen
  • Responsive Images
    • supplies the relevant sizes to the browser
    • visitors only get the best image size
    • Built into core so themes and plugins can take advantage (like Twenty Sixteen)
    • Joe McGill!
  • oEmbed for WordPress
    • like embedding a YouTube or tweet, you can now embed WP posts from other WP sites
    • Added new services like Cloudup, Reddit Comments, ReverbNation, Speaker Deck, and VideoPress.
  • Taxonomists – terms now have metadata, just like posts and users
  • Rest API – you can speak to other websites and services using JSON.
    • Create you own endpoints to communicate with WordPress
    • Community member Paul Heirendt had a great video to share explaining APIs!
      • https://www.youtube.com/watch?v=rvQJcBBsi3k
  • Other – few multisite fixes, language updates

Read More

http://codex.wordpress.org/Version_4.4

https://premium.wpmudev.org/blog/wordpress-4-4/

See you in January!

Thank you to everyone who came out. Our next general meetup is January 20th. I hope to see you there!

Skip to toolbar