Category Archives: Development

Developer or development related news

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

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

WordPress Meetup West Notes: Dynamic Sidebars and Widgets

Thanks to everyone for coming out to the WordPress West meet up last night. If you weren’t able to make it or want to review what we covered in the presentation I’ve included the slides and some gists of the actual code used if you’d like to test it out yourself.

We went over registering sidebars, the difference between a “sidebar” and a “widgetized area” (hint: not much), displaying sidebars in your theme, and finally creating a custom widget.

Gists after the break.

Continue reading WordPress Meetup West Notes: Dynamic Sidebars and Widgets

Notes from Introduction to Functions and Hooks (Actions & Filters)

Thank you to everyone who made it out to our November General Meetup. We gave a basic introduction to how you can customize WordPress beyond Themes and Plugins using the WordPress Plugin API (Application Programming Interface)

These hooks allow you to include your own custom code within WordPress to do a myriad of things. You can use Actions to inject code, or compare variables and filters to run your own routine within WordPress (like say to pull data from an external source and format it for WordPress to ingest.

This modularity is what makes WordPress so functional for so many diverse user cases. Any plugin is really just a complicated set of functions that leverage the Plugin API to create Actions or Filters.

We gave a little demo, which I won’t repeat here as it was a little inaccurate. Instead I’d like to point you to a few resources that are far more elegant in presenting the basic concepts.

WebDev Studios has a great article on getting started with hooks with a few inline examples.

Pippin Williamson also has a good introduction to using filters, the more complicated of the two hooks (in my humble opinion).

Of course, there’s always the Codex entry on Hooks and the well-organized Code Reference library.

While a little more technical that our past General Meetup topics, we hope you enjoyed the meetup and look forward to seeing you at a future event!

Photo by Thomas Hawk – Licensed under Creative Commons

September Developer Meetup Notes – Making WordPress Plugins and Themes Extendable

Presentation

This presentation was about how to add your own hooks to plugins and themes. Code from the demo can be found here.

Other Cool Stuff Talked About

WordPress Plugins to Check Out

  • MinQueue – Plugin to minify and concatenate enqueued scripts and styles

Slack Stuff

WordPress uses Slack now. Check it out: https://wordpress.slack.com

  • Prowd – A Slack integration to recognize your team’s work.
  • Tatsu – Standup meetings for remote teams
  • Polls – Add polls to slack

Misc Stuff

  • GitUp – Makes git painless
  • Kanbanize – Online Kanban software
  • speetest-net – NPM package for running a speedtest from the command line

Quick WordPress Optimizing Tips

Last week I sat in on this great A List Apart: On Air event titled  “Designing for Performance” It was their first online-only panel with four great presenters. Along the way I picked up a few tips and tricks I wanted to share with you all.

Here’s a few quick things you can do to improve the performance of your WordPress site.

Introduction

Before we begin, if your site is accessible from the web, punch in its URL into one of the following tools (or both!).

Make a note of the scores you’re given. We’ll compare them at the end.

Use a caching solution

The first thing you can do? Install a caching plugin or setup an in-memory cache. For folks on shared hosts (Bluehost, Hostgator, etc) the easiest (and often only) option will be going with a plugin. My plugin of choice is WP Super Cache.  Why this one in particular? It’s been around for ages, is super easy to use while still being customizable, and it’s authors include Donncha O Caoimh and Automattic. A pretty good pedigree if you ask me.

If you don’t want to do much mucking around, just install the plugin and turn on caching. This will allow your site to serve static version of your pages. This make your site quicker as WordPress (and the PHP/MySQL behind the scenes) doesn’t have generate a new page for each visitor.

Advanced options that I like to use are in the screenshot below. I like to make sure I enable  compressing pages as less data has to get tossed around. “Don’t catch pages for known users.” is handy if you’re an individual editor (or have a small team). This tells WordPress to alway serve up a new page to folks who are logged in to your site. This way you always see your updates without having to clear the cache.

WP_Super_Cache_Advanced

Compress your theme’s images

Let’s say you’re building a theme from scratch, using a child theme, or even just uploading a nice crisp PNG for your site’s header image. In each case WordPress  will use images within the theme to display common elements – like that header image. When these elements appear on every page your site has to serve up that image to every viewer, every time.

One way to speed up your site is to make sure you compress these common images as much as possible. This doesn’t mean degrade their quality with heavy compression like jpg images, but to remove as much metadata and use more advanced compression algorithms as possible.

Side note: Another big win for leveraging smaller images is to make sure you’re not uploading giant images to only have them displayed at small sizes. That’s a whole ‘nother post on its own!

How do you do this? Grab an application like ImageOptim or RIOT.

With either of these apps you can drag and drop in your images and let the tool do its magic. This includes background images, header images, or even icons used across your navigation and widgets.

Here’s an example of a recent optimization from a theme I optimized. This is using ImageOptim. Either tool uses a whole suite of tools behind the scenes to make the best optimization quickly and with great results. imageoptim-example

I saved a whopping 47% on average in this theme. In the case of my background tile image I saved a whole 80%. Not to bad. (Here’s another example with less impressive, but still good, results.)

 

Set up a caching rule

Even with something like WP Super Cache in place you still might need to set up some rules about static content. Static content is things like images, documents, multimedia files, etc.

For these files, WordPress delivers the file for a visitor every time. Even if they leave and come back five minutes later!

The easiest way to do this is to modify your .htaccess file and add a few rules for static content. The .htaccess file tells your site to give folks a locally cached version of the file and to ‘expire’ the item in the cache after so many minutes. This greatly helps in the loading of those (newly optimized) theme images I mentioned in the last tip, and any other files visitors consume on a regular or repeat basis.

I’m going to direct you to this post that has the handy steps on caching static content.

 

Minify your CSS

You’re using a child theme, right? Or maybe a custom theme built from a starter framework? Once your site is ready for production you can shrink your CSS files to make things a little quicker.

Minifying your CSS takes the human-readable version of your CSS file, with all it’s great inline comments and indents, and strips all that junk out. The computer doesn’t need any of that!

Now you’ll want to keep an un-minifed version around for future changes. Take a copy of your style.css file in your theme directory and rename it. Call it style-original.css or something and set it aside.

Now, copy and past the content of your style.css file into a tool like CSS Minifier or CSS Compressor. These tools will strip out any comments or spaces (making your file pretty much unreadable by humans) and reduce the file size (and therefore load times) of your CSS.

Copy the minified CSS back into style.css and save. If you have to make new updates down the road (always in your dev environment first, right?) you can re-load your human-readable CSS file, make your edits, and minify again.

On a few sites I manage I was seeing upwards of 60% file size savings. When were talking about mobile devices in not-so-good coverage areas that could be the difference between your site loading and a visitor leaving.

 

Conclusion

This is just a few things you can do quickly to improve the performance of your site. Making your site load quickly for visitors make them more likely to hang around and helps with your search rankings.

How much of an impact does it make? Remember those tests I asked to your run at the beginning of this post? Here’s a before and after (totally unscientific) comparison to a site I manage. I ran the default tests from webpagetest.org. Just using these tips made one score go from a C to a B and another from an F to a B!

webpagetest-beforewebpagetest-after

If you have tips or tricks you use to make your site’s a little quicker, let me know in the comments below. Thanks for visiting and I hope to see you at one of our upcoming meetups!

Photo by _chrisUK – Licensed under Creative Commons