Category: Tutorials

  • How to Keep Gravity Forms Displayed After Submission

    How to Keep Gravity Forms Displayed After Submission

    This post has been updated on 9 March 2022 to reflect updates to the code

    Sometimes you’ll have a Gravity Form that you want to keep visible after it is submitted. Maybe you want people to be able to fill out the same form multiple times, or maybe your design looks better with the form still showing.

    Gravity forms has a filter hook built in called gform_pre_submission_filter, which can be used to make changes to the form, among other things, after the form has validated (ensured that required fields are filled, nothing is blocked, etc), but before the form submits and notifications are sent. You can learn a bit more about that filter on the Gravity Forms documentation.

    We’re going to use this filter and create our own PHP function that will check the form before it is submit, and create a div that holds any confirmation messages that we have set.

    The code is embedded here, or can be viewed as a gist on GitHub.

    Inserting the Form before the Confirmation Message

    First, on line 3 we add our function, dw_show_confirmation_and_form, to the filter. Notice that we use the parameter $form in our function, which gives us access to details about this specific form.

    On line 7 I’m getting the shortcode that inserts the form into the page. In this case I want it to get the proper ID of the form, and I want to display the title of the form but not its description.

    Below that, from line 15 to line 19, we’re checking to see if there are any confirmations for this form. If so, we’re going to loop through each confirmation and append it to the form shortcode (so the form will display again), then put the confirmation text inside of a div that we’ve given the class .confirmation-message. That class can then be used to style the display of the confirmations.

    Finally, on line 21, we return the form. Since we’ve prepended the shortcode with the ID of the form, when the form submits it will display the form again, followed by our confirmation message.

    Gravity Form displaying with confirmation text below it.
    Our post-submission form, with the confirmation text displaying below

    The code above will make this change to all forms. If you need to target just one form, use the ID of the form and change the filter to include the form number after an underscore at the end. For instance, if we’re making this change to form three, we’ll change our filter call to 'gform_pre_submission_filter_3'.

    Clearing Inputs

    So that covers keeping the form displayed, but now we need to clear all of the inputs in the form.

    This is where the function dw_gf_footer_scripts() comes in. Without relying on jQuery it looks for Gravity Forms inputs and textareas to clear them out on reload. Crucially, hidden fields are left alone, so that the values assigned to them are still available for submission.

    Final Notes

    Edit: A few people have pointed out that this can cause issues with using ajax="true" for your form. This can be due to when the JavaScript is loaded, and some necessary jQuery not loading before this. The following post gives an easy way to make Gravity Forms files load in the footer, but it could potentially cause problems with other extensions or plugins.

    https://hereswhatidid.com/2013/01/move-gravity-forms-jquery-calls-to-footer/

    You may also want to do other things, like control whether any fields stay filled or not, update without refreshing the page, or scrolling down to the confirmation when complete, but those are lessons for another day!

    Fediverse Reactions
  • How to Display Links in Print Mode on Your Website

    How to Display Links in Print Mode on Your Website

    I have clients that want to ensure that their pages print well so that people can save things offline for later, like recipes or instructions. I don’t print webpages myself, but I can see plenty of useful reasons to do so.

    One of the issues when printing a webpage is that you lose context and interactivity. This is usually fine, as the site is probably intended to be read online anyway. But sometimes you want to make it easier for people to use that printed site, like still being able to find a linked page from a printed article.

    The Solution: Print Styles for Links

    Let’s say that you want to link to FixUpFox, my WordPress maintenance service. You can put https://fixupfox.com as the text on your page so that it prints properly and people can visit the site from their computer later.

    The above works for print, whether you link it or not, but usually you’ll want to say something like “For site support I use FixUpFox, because they provide great service at an affordable price for unlimited tasks”. In that case, you’ll want to have some way to display that URL next to the linked text when printing.

    Thankfully, there is a media query in CSS that is for print styles. Your browser will pull up that style when viewing the print version of a site. We’re going to use that to create our links.

    Making the Print Styles

    First, we’re going to make a media query in our stylesheet. This can go at the end of your existing stylesheet, or you can place it elsewhere as long as it loads on the page that you want print styles for.

    @media print {
    }

    Next, we’ll add an underline style for links, so they’re easier to see among text in a printed document that might be in black and white. We’ll add that style to visited links as well to override any potential visited link styling already on the page for underlines.

    @media print {
    	a,
    	a:visited {
    		text-decoration: underline;
    	}
    }

    Finally, we’ll use a CSS pseudo-class of :after on links that have an href attribute selector (so it’s not just an empty <a> tag), which is the target URL. We’ll add that target URL attribute of the link (the page that we’re linking to) to the content, after any links on our site. We’ll add a space before the link, and wrap it in parentheses to set it apart from the text. That code looks like this:

    @media print {
    	a,
    	a:visited {
    		text-decoration: underline;
    	}
    	a[href]:after {
    		content: ' (' attr(href) ')';
    	}
    }

    This works with any anchor tag that has a target link, even if it’s a text link instead of the URL. So when I type Ongoing WordPress Support and Maintenance, the printed version of that link will be the text of the link underlined, a space, and the URL in parentheses.

    The following screenshot shows what the link looks like when we view the page in print mode:

    screenshot example of a CSS print style for links
    This is a saved PDF of part of this article. Note the URL in parentheses after the link text.

    Finishing Up

    You’ll likely find that you have lots of things displaying links that you probably don’t need, like the menu to your site, or sidebar content.

    One solution would be to use the print styles to hide those portions of the site entirely. After all, if I’m printing a recipe out for later, I don’t need the navigation, header, footer, or anything else to print besides the content of that recipe. Another solution would be to target links in your content specifically, such as using the .entry-content class to get links that are only in your page and post content if you’re using a theme like the Genesis Framework.

    Whatever method you choose is up to you, but I hope that this helps you consider the ways that you can use print stylesheets, CSS pseudo-classes, as well as CSS attribute selectors to add more context to your site, whether printed or on the web.

    Thanks for following along and putting up with the shameless plugs for my maintenance business!

    Fediverse Reactions
  • Homebrew Saves Me Time Every Day

    Homebrew Saves Me Time Every Day

    I don’t remember exactly when I started using Homebrew, but I know that I had been using a Mac as my regular computer for a while and wanted an alternative to manage dev tools. Homebrew would turn out to be my first foray into the concept and practice of package management, and it’s been tremendously useful for me.

    I keep a personal MacOS setup guide on Github because I swap laptops or reformat my laptop enough that I want to keep track of what tools I use. Adding Homebrew to my software management suite has been instrumental in making this work. I can install and update software and clean up outdated versions. I even wrote a tutorial on setting up a keyword script last week that makes this even easier for me.

    What is Homebrew

    Homebrew describes itself as The missing package manager for macOS and for good reason. It allows me to install/uninstall/update/downgrade/manage software used on my Mac directly from the command line.

    This saves a bunch of time and overhead, and allows me to bulk install programs. I can take a list of install commands, paste them into my terminal, and have them all run at once. Below is a list of programs that I install with Homebrew on a new machine currently, which turns hours of installation into a few seconds of typing and a few minutes of letting the machine run in the background.

    brew install arp-scan
    brew install asciidoc
    brew install brew-cask-completion
    brew install cmake
    brew install composer
    brew install docbook-xsl
    brew install ghostscript
    brew install git
    brew install highlight
    brew install imagemagick
    brew install lastpass-cli --with-pinentry --with-doc
    brew install nmap
    brew install node
    brew install openssl
    brew install php72
    brew install php-cs-fixer
    brew install phplint
    brew install pkg-config
    brew install python3
    brew postinstall python3
    brew install thefuck
    brew install vassh
    brew install vim
    brew install wget
    brew install wrk
    brew install zsh-syntax-highlighting

    Homebrew Cask

    Some programs don’t exist in Homebrew, usually the apps that you use with a GUI, as opposed to command line tools. For these there is
    Homebrew Cask, an extension of Homebrew for the software that doesn’t exist in core.

    So instead of having to open up Safari on a new machine (or IE for the Windows folks, with a tool like Scoop or Chocolatey – The package manager for Windows) just to download Chrome, I can open my terminal after Homebrew is installed and type brew install chrome to get the latest version of the browser installed and ready to use. No more downloading zipped files, unzipping a package, running the package and accepting pages of prompts, and having to eject the package to delete the install files.

    Updates are great too. With the script that I shared last week I update all of my apps every morning, ensuring that I have the latest, greatest, and most secure version. This also means that I am far less likely to open an app on my computer as I’m ready to use it, only to be greeted with a “new version available” dialog to either forget or stop my workflow.

    Here are the cask packages that I currently install after I reformat my computer, which covers the majority of apps that I use.

    brew cask install alfred
    brew cask install arduino
    brew cask install boostnote
    brew cask install calibre
    brew cask install cleanmymac
    brew cask install dropbox
    brew cask install etcher
    brew cask install evernote
    brew cask install firefox
    brew cask install google-chrome
    brew cask install imageoptim
    brew cask install iterm2
    brew cask install nordvpn
    brew cask install owasp-zap
    brew cask install qlcolorcode
    brew cask install qlmarkdown
    brew cask install qlprettypatch
    brew cask install qlstephen
    brew cask install quicklook-csv
    brew cask install quicklook-json
    brew cask install sequel-pro
    brew cask install signal
    brew cask install skype
    brew cask install slack
    brew cask install spectacle
    brew cask install sublime-text
    brew cask install suspicious-package
    brew cask install telegram
    brew cask install transmit
    brew cask install vagrant
    brew cask install virtualbox
    brew cask install vlc
    brew cask install webpquicklook
    brew cask install caskroom/fonts/font-source-code-pro

    Followup and Conclusion

    I just learned that Homebrew has a Patreon to support development of the project, and I just pledged a token monthly donation. For all that it’s given me, it’s definitely proven valuable.

    Read the documentation for Homebrew for all of the cool things that you can do with it. The project homepage has fairly straightforward installation instructions.

    You can see a list of the current Homebrew Formulae, as well as search the available Homebrew Casks to see if your favorite tools are available.

    Do you use Homebrew yet? Do you have another method to manage updates that I should know about, or some tools that I’m missing? Let me know here or on Twitter!

  • Creating a Homebrew Workflow with Alfred on MacOS

    Creating a Homebrew Workflow with Alfred on MacOS

    One of the first suggestions that I was given when I switched from Windows to Mac was to install and use Alfred, a productivity app for Mac OS X. I have to thank Mason James for the suggestion, as Alfred has been an integral part of my Mac usage ever since. Tomorrow I’ll give an overview of what Alfred is and does, but for now I want to talk about a specific workflow that I made. It’s very simple, but that’s a plus for a starting up tutorial.

    Update 11 January 2019: I wrote about a workflow for Homebrew that I started using.

    What are we going to create?

    The task that we’re setting up is going to be a keyword that will run a series of terminal commands for us. I use Homebrew as a package manager for software on my Mac. This, along with Homebrew Cask allows me to manage most of the software that I use on my computer from the command line.

    Similar to an overview of Alfred, I’ll give an overview of Homebrew later, but for now I’ll assume that you can setup both from those sites. Backwards maybe, but I want to show something simple that it can do before walking through setting it up.

    So with Alfred I can set keywords that run commands. In this case, I’m going to make a keyword, brew, that when used will run a series of commands to check for updates of installed software, perform those updates, clean up outdated software versions, and check that everything is functioning properly.

    We’re going to have eight commands run sequentially, so instead of having to type each of those commands manually and wait for each to run, we can type one keyword, have terminal open for us, and let it run in the background while we continue working.

    Let’s get started

    1. Create a new Workflow.

    Open Alfred Preferences, and navigate to the Workflows screen. In the lower left of the screen click the plus button to create a new Workflow. To save time, go to Templates > Essentials > Keyword to Terminal Command, and select that template. Give a name and description to your workflow, and add an icon if you want.

    Setting up a template Workflow
    Starting with a template for our Workflow
    Adding details to the Workflow
    Setting the details of our Workflow

    2. Set the options and commands for your Workflow.

    The two nodes of the workflow
    The two nodes of our Workflow

    When you create the Workflow you’ll have two nodes to work with: the keyword, and the terminal command. Double click on the keyword box to pull up the options for the keyword. We’re going to set brew as our keyword, and change to no argument since we aren’t adding any other commands. If we wanted to we could say setup an argument to update brew, cask, or both, but I just do both by default. I add a title and icon to display when I run the command and click save.

    Setting a keyword for the Workflow
    Setting the keyword options for our Workflow

    Next, double click on the terminal command node. This is where we’re going to put the commands that are going to run after the terminal is opened. The below commands are what I have setup for my Workflow.

    brew update
    brew upgrade
    brew cask upgrade
    brew cleanup
    brew cask cleanup
    brew prune
    brew doctor
    brew cask doctor

    The above updates Homebrew and Cask, then upgrades software that is currently installed and out of date for both. Next we use cleanup to uninstall older versions of the apps that have been updated. Prune will cleanup any outdated symlinks, and doctor will display any notes for potential problems that we can review.

    Add terminal commands to the Workflow
    Adding terminal commands to our Workflow

    Let’s save this series of commands and give it a go!

    3. Try running the command.

    To use this command we need to type our keyword into the Alfred menu. Use whatever hotkeys that you have set to open Alfred (the default is option+space). When you start typing the brew keyword you’ll see the workflow appear as an option. Click enter when it’s selected to run the command.

    Running our Workflow with a keyword
    Typing our keyword pulls up our Workflow

    If everything is setup properly your terminal application should open and paste in the series of commands. Since each is on a separate line they will run sequentially. You can see the commands as they run and any output they have. Since I ran this command shortly before taking screenshots for this tutorial everything is already up to date for me except for a bit of cleanup.

    Commands running in our Workflow
    Running the Workflow opens terminal and runs our commands

    Awesome! This saves a bunch of time!

    This Workflow saves me a bunch of time by updating applications in the background without having to wait for me to open them and have each application run their own update check. Since I’m opening an app when I want to use it the need to update can interrupt my workflow.

    The benefits of this system include:

    • All applications stay up to date with new features and bug fixes
    • I don’t have to wait until I want to use an app to update
    • I won’t click ignore on an update and forget to do it later
    • I can make sure that my computer stays clean with outdated versions of applications getting removed for me
    • I don’t have to remember all of the commands to run, what order to run them in, or have to wait for each one to run before typing the next one

    If you use Homebrew already, I’d suggest setting something like this up to make it easier to manage. It only took me a few minutes to setup, takes a second to run whenever I have time to update (generally every morning for me), and provides the kind of background benefits that save a bunch of headaches over the long term.

  • My Totally Great Guide to Managing Email Like a Pro

    My Totally Great Guide to Managing Email Like a Pro

    This morning I read a new article from Joshua A. Krisch posted to fatherly.com called “Why Email Is So Stressful, According To Science”. As the headline makes clear, the author believes that email anxiety is one of the biggest causes of stress for the average office worker.

    Everyone seems to have their own system for dealing with email, whether it’s treating it like a game, trying for inbox zero, responding to a few at a time and ignoring the rest, or throwing their hands up and declaring email bankruptcy.

    The last option is not uncommon, but is also scary since we all assume that somewhere in those unread emails is that exact opportunity that we’ve been waiting for, and it’s through our inability to manage the growing pile of correspondence that we’re missing out.

    Another fear is that we’ve waited too long to respond to an email, and as time goes on we naturally want to respond to it less, as our guilt around not responding grows. The podcast Reply All decided to fight back two years ago by starting the holiday Email Debt Forgiveness Day, which was just a few weeks ago. If you missed out you can still find info on their site on how to celebrate, along with a helpful email template.

    But does it have to be this hard? I get stress from email time to time, but I admit that it’s never been all-consuming in my life, personal or work. I don’t think that I’m preternaturally disposed to being less stressed by communication, far from it. I have found a few things that make email easier to manage for me, and I’m going to put on my productivity wizard hat to dictate how you should handle your communications.

    1. Check Email Less Frequently

    This one should be the most straightforward. If you check email less frequently, you have a better opportunity to treat it like a discrete event. Use the novelty of checking a few times per day to provide more focus to what you’re checking.

    I keep my inbox clean enough that I’m ok with keeping it in reverse chronological order. I click at the top, and have the Gmail settings for the send and archive buttons as well as the auto-advance lab feature on. I also use keyboard shortcuts on my accounts, allowing me to use my keyboard more, which I’m already using to write.

    You can find the Send & Archive button as well as the keyboard shortcuts in Gmail in the settings page located at https://mail.google.com/mail/u/0/#settings/general. The Auto-Advance lab feature can be turned on here: https://mail.google.com/mail/u/0/#settings/labs

    The Send & Archive button on email compose means I save a few clicks and a screen load.
    The Auto-advance feature also saves time by letting me move directly from one email to the next.

    Using those features I can more quickly progress through email while clearing out my inbox. Every email is acted on and archived.

    I start out with a win by making a lot of email skip the inbox in the first place by filtering them to folders if they are automated notifications or newsletters. I currently use Unroll.me to group emails together, but I’m phasing it out as I transition to a new email account.

    2. Get off of the Notification Cycle

    I’m not a fan of notifications pretty much anywhere. I have a few things that can send me notifications like work messages and texts, but otherwise I let apps and websites stay quiet unless I choose to check on them.

    I could expound upon how this relates to email specifically, but honestly it helps reduce stress with a lot of how I use the web. I end up checking some things more frequently than I’d like, but I let them fit to my schedule, not the other way around.

    3. Know When to Say No/Manage Expectations

    I know the urge to say yes to requests can be powerful. I do this all the time, and I don’t fault anyone else who does. It’s only over the past few years that I’ve started learning how to say no to things that don’t fit my skillset, or that don’t directly help me gain new skills or serve clients better.

    I get the idea that you miss 100% of shots not taken, but maybe those aren’t the shots that I should be taking anyway.

    I also try to let people know when and how I’ll respond, if I am going to have to pass on something, or if there will be further action taken. Being direct is one of the best things that I’ve learned to do in email both to set expectations for others, as well as clarify my thinking.

    If I can put my desires into words, I can have a better chance of making them happen.

    4. Treat Email as a Separate Medium

    This is a habit that’s hard to make. What I mean by treating email as a separate medium is that it’s not a text, it’s not a letter, and it’s not a social media update. Email has existed in a similar form to what we use now for almost fifty years, yet we still want to write full letters with greetings and salutations.

    Chances are I know who you are if I’m responding to an email, and vice versa. I understand that some people feel rude sending short emails, but generally an email that can be answered quickly – or doesn’t require an answer at all – makes recipients feel even better. One hundred people can send me emails that individually take them a few moments to compose, but if they all send in teh same day that equals hours of time dealing with them.

    On the topic of emails without response, I’m still looking for a polite way to let people know that emails don’t require a response. Don’t feel obligated to send me a “Thanks for handling this!” email, when all it ends up meaning is another message to manage.

    So, that’s my attempt at an email listicle. What email tricks should I be trying out? Make me feel more productive!

  • Securing Yourself and Your Business – A Basic Primer

    Securing Yourself and Your Business – A Basic Primer

    I’m giving a talk this weekend at Florida DrupalCamp on some basic personal security tips. The focus isn’t on development security, or on securing Drupal projects, but instead is meant to be applicable to pretty much everybody.

    If you spend any time on the internet, this guide can offer some help to you. First:

    Why do I need to care about this?

    Let’s get one of the common misconceptions out of the way:

    I don’t have anything to hide, so I don’t need to worry about privacy.

    I honestly can’t think of anyone that this statement is true about. Everyone has something that they don’t want others to see, for whatever reason. If I were to ask you for access to every digital account that you own (not to mention your home and all other personal belongings), you would probably not give me access to any of them, even with my solemn pinky oath to not touch anything. The fact that I’m asking gives you pause. Now how about those that don’t bother with the pleasantries?

    You have something of value to lose online. That’s a fact of life now, and while you may be thinking of embarrassing emails or compromising texts, there are other things like workplace data, financial accounts, health records, and more that are vulnerable if you do not maintain some basic web security. With the insidious chaining together of accounts, now you have the danger of one insecure email address allowing all accounts to be compromised.

    Even if you still think that you don’t personally need to worry about security, what about those around you? There is a safety in numbers. When someone is alone in using encrypted communications, they stand out to profilers, even if the content of their communications does not. When everyone around them is using encrypted communications as well, now there’s just so much more chatter to stay safe in.

    Like inoculations against illness serve to inordinately protect the members of society with the weakest immune systems, the group protection that comes from supporting secure software helps those most vulnerable who rely on these tools. Also, your insecure devices can be used to launch attacks that can affect everyone, and those insecurities are not going away anytime soon.

    So now that we’ve covered that it’s important to care about your online security, where do we start?

    What’s Your Profile?

    We’re looking to define two profiles to start with: your Attack Surface Profile, and your Adversary Profile. These will help us determine where to put effort in building our security profile.

    Attack Surface Profile: The ways that you can conceivably be compromised. This is the cellphone in your pocket, the accounts that you have logged in automatically on your laptop, the fact that your email address is linked to your Amazon credit card. You will miss some of these, but the major ones are where it matters most.

    Adversary Profile: Who conceivably cares enough about you that you need to secure yourself against? Are you going through a divorce or custody battle, with lawyers watching your every move? Are you exploring your sexuality or religion in a setting where harm can come from exposure? In addition to these or other specific threats, you have the general drive-by attacks done on accounts related to data breaches to worry about.

    Security Profile: Now that you’ve defined your Attack Surface Profile and your Adversary Profile, you can create your security profile. You’ve identified that you use your laptop at coffeeshops regularly, and commit to avoiding using financial services there. You want to avoid being tracked while going to a sensitive meeting, so you leave your phone at home. You want to learn more about things that may be socially unacceptable, so you use TOR browser to hide your browsing history.

    How Can I Get Started?

    There are a wide variety of tools available with varying degrees of complexity and protections afforded. A few suggestions:

    • Use a password manager. There is the possibility that these tools can be compromised, but they are much better than memorizing (meaning reusing) passwords, which you should stop doing. LastPass is a free web-based tool, and KeePass is an open source password manager that lives on your computer.
    • Enable two factor authentication everywhere that you can. That means email, social media accounts, developer accounts like hosting and Github, everywhere. Two factor authentication is generally accessed via a text or app on your phone, and is used as a secondary method to prove you are who you say you are.
    • Switch to Signal for messaging. It doesn’t have the pretty colored bubbles of iMessage, but get over it. Signal is the current standard for end-to-end encrypted messaging, which means nobody without access to either device can read the messages being sent. It is compatible with all major phone brands, and has all of the features that any standard messenger has, plus some bonus goodies like secure VOIP calls.
    • Check your privacy settings on Chrome, Firefox, Twitter and Facebook.
    • Take advantage of the tools that the EFF makes for privacy. This includes HTTPS Everywhere, to encrypt your browsing to and from websites, and Privacy Badger, which is a custom tailored ad and tracker blocker.

    This is too much. Isn’t this impossible anyway?

    I agree, there are a lot of things that you have to worry about to maintain your privacy and security. There will always be something that you miss, but that doesn’t mean that you shouldn’t try. If you lock your house or car you are engaged in a similar decision-making process. Sure, a burglar could smash a window and get in, but they’re more likely to move on in search of an easier target.

    Don’t give up on security! It is becoming easier than ever to maintain some of your privacy and information security thanks to the work of countless contributors to open source tools. Support their work, and protect your freedoms!


    References
    Your Cybersecurity Self-Defense Cheat Sheet, Jacob Brogan, Slate. 1 February 2017.
    The Privacy Paradox Tip Sheet, Manoush Zomorodi, WNYC. 10 February 2017.
    Tor Overview: Staying Anonymous. Retrieved 17 February 2017.

  • Bash scripting to automate site builds with WP-CLI

    Bash scripting to automate site builds with WP-CLI

    I told myself that I would endeavor to create a project using an entirely new-to-me technology every month, and on the last possible day in January I’m doing a writeup on a bit of bash and wp-cli code written for last week’s WordPress Orlando Meetup.

    While I didn’t quite hit the mark, I did learn quite a bit more about WP-CLI and bash scripting, so I’ll count that as a win.

    The script that we’re going to refer to in the post is here: https://gist.github.com/davidwolfpaw/3f1d431071196f61c753e572700e7cbe. This is intended as a follow up to this post on using VVV, VV, and WP-CLI to setup new sites.

    What are we doing here?

    The script does quite a few things to set up a new WordPress site with some defaults. I made the selections based on my common usage, but the script has been made general enough that it can be modified as you see fit for your own needs.

    First, I’ve got a few constants in the script, including a username that I like to use for these sites, so I get something other than “admin” that isn’t random. It also sets an email for all accounts, and the specific VV blueprint that I want to use. I can cover blueprints at a later time, but for now check out some information about them at the VV Github page.

    Next up I use the name that was input after the command to run this script was issued to create the name and domain of the website. A password and table prefix (the wp_ portion of the WordPress database tables) are both randomly generated. The password is copied to the clipboard to allow me to paste it in while logging into the site for the first time.

    The command below does quite a bit. It uses VV to create a new site on my VVV install, with the name and domain supplied, the username and email that I pre-set, and the table prefix and password that were just generated for us. It also turns on debug, calls the VV blueprint that I’ve setup, and tells VV to use all other defaults that it normally supplies.

    yes | vv create -n $name -d $name.dev --username $wpuser --password $password --email $email --prefix $prefix -x -b $blueprint --defaults

    VV and the blueprint do the bulk of the initial setup, but there are still a lot of things to do.

    Continuing Site Setup With WP-CLI

    There are a lot of tasks that I do on almost every site, most outlined on the previous post, but as a recap:

    • Deleting the “Hello Dolly” plugin as well as all default themes except for the current year default
    • Activating the premium plugins and themes that I use. This includes the Genesis theme, as well as Gravity Forms, iThemes Security and Sync, BackupBuddy, and Advanced Custom Field.
    • Deleting the default page, post, and comment
    • Creating home and blog pages, and setting them to display as home and blog, respectively
    • Creating About and Contact pages
    • Creating a menu with all of the pages that I’ve created, and setting it to the primary menu
    • Removing all default widgets from the sidebar
    • Creating a category titled “News”, and setting it as the default category, to avoid posts being labeled as uncategorized

    Finally, I have the script open up Chrome to the login page for the site that was just created. There I can type in my username and paste in the generated password. Eventually this step can be scripted as well, to automatically log me in.

    And there we have it: a fully setup staging site that saves us hours on creation and setting up defaults that will be used over and over again!

    Drawbacks to the current bash script method

    That’s not to say that this is perfect. By all accounts there’s plenty that I can do to fix up this script. I started working on an integration with the Lastpass-CLI for instance, to use their password generator and to automatically save my passwords to avoid being prompted when I first load the site. For some reason I was unable to get it working, and removed that feature to get it done in time for the meetup

    Gravity Forms also has a CLI, though with the downside of needing to be installed as a plugin first. If I install the plugin though, I can use that to install and license my copy of Gravity Forms, as well as import some default forms. I’m going to add that to a future version of this builder, as most sites that I make will have a contact and newsletter form with a few fields by default.

    Finally, I want to work on executing the script on the server, as opposed to on my local machine. I can set this up with a bit of forethought, but it’d be beneficial to have some sort of installer to allow anyone to input their specifics (credentials, email, install directory, plugins to activate, etc). For now, I’m using vassh, which was developed specifically to run

    vagrant ssh

    followed by a WP-CLI command, but the tool is not very efficient. Currently it opens and closes a connection with each command, which quickly adds up when you’re running several dozen commands like this script is.

  • Automating New Sites with VVV, VV, Blueprints, and Bash

    Automating New Sites with VVV, VV, Blueprints, and Bash

    Who wants to start building new sites quicker? Whether for yourself, for friends, or for clients, you have probably set up more than a few WordPress sites by now. There are probably quite a few things that you do on a regular basis for those sites, right? Here’s a few things that I do:

    • Pull and verify WP Core
    • Pull Latest version of Akismet, Jetpack and Duplicator from repo and activate
    • Pull latest version of BackupBuddy, Security and Sync from iThemes, Gravity Forms and Advanced Custom Fields Pro and ACF Repeater Field (I don’t know how many of these things can be done since they are premium) and activate
    • Do setup of Sync/Security/BackupBuddy as necessary
    • Pull latest version of Genesis & latest of genesis-project-base (I’ll put that on BitBucket soon)
    • Remove sample page, post and comment
    • Set ACF Pro and Gravity Forms Licenses
    • Set Gravity Forms to output HTML5 (default is off, I want it on)
    • Extended CPTS and Extended Taxonomies
    • Create admin account (OBM) with random password, emailing to support@orangeblossommedia.com
    • Set Site Title based on project Title
    • Set time zone to “New York”, since that’s the case for most builds I do
    • Set permalink structure to /%postname%/
    • Create private BitBucket git repo for site
    • Add user/pass to LastPass
    • Create Trello board for site
    • Create Sublime Text Project
    • Open Browser to site
    • Open Sublime Text
    • IFTTT?

    I do those steps for almost every site that I make. Doing so by hand would take an hour of clicking around from screen to screen, waiting for pages to load, modifying settings, and refreshing pages.

    Each of these steps have something in common: since they are done via a computer, they can be defined in terms that a computer can understand. This is where we can begin to automate our process.

    Vagrant is a container solution, similar to Docker, which allows you to create containerized sites. VVV is a Vagrant box, which is basically a set of instructions on how to build a server. I’m going to update my post on setting these up, as there are some useful changes coming to version 2 of VVV, but for now I’ll refer you to this post from last year on setup.

    The other thing that we’re going to use is WP-CLI, and we’re going to pair it with VASSH, a tool to make it easy to SSH into a VVV box. All this means is that we’re going to use some command line tools made to do things with WordPress, like add new themes and plugins, and change the posts.

    Start with the slide deck below on why you may want to give this a try, then move on to the next post which gives some notes on the specific bash script written to do the automation, as well as some of the drawbacks of it as a solution. This post will be updated with version 2 of VVV.

    Edit: the poster of the slide deck removed it from the web.

  • Installing Vagrant, Virtual Box, VVV, & VV On Mac

    Installing Vagrant, Virtual Box, VVV, & VV On Mac

    I’ve been using Vagrant with VirtualBox for local development for over a year now, after introduction to the tools on top of Varying Vagrant Vagrants at a WordCamp. It’s become my default standard for starting new WordPress sites, and it’s more highly accessible than I realized at the time that I first tried it, though it can also be a bit of a black box from the outside.

    Throughout the post I’m going to cover a quick install guide (though by no means exhaustive), and borrow heavily from a guide that I put together and am keeping updated on my Github page. I also discussed this at a developer meetup for WordPress Orlando last month, which you can check out if you want to give ServerPress or MAMP a try too.

    Note, I’m coming at this from a Mac, which used to drive me bananas in guides, so apologies if you’re on Windows.

    Installing Virtual Box, Vagrant, VVV, and VV

    First, let’s talk about what we’re setting up here. The outcome of this post should give you a local development environment for WordPress sites that you can start and expand upon rapidly, making it easier to build new sites for yourself or your clients. We’re going to start by downloading and installing VirtualBox, which is by far the largest part of this project. I use Virtual Box because it is free and accessible for a wide variety of platforms, but VVV supports Parallels, Hyper-V, VMWare Fusion, and VMWare Workstation as well.

    After you’ve downloaded and installed VirtualBox, you’ll want to ensure that you have Vagrant installed. This can be installed a wide variety of ways, but the most straightforward is going to the official download page and installing the version that matches your computer. After Vagrant is installed you should be able to open Terminal and type the command vagrant and see a list of flags that you can use.

    You’ll also need Git for some of this, so if you don’t have it, download here and install it.

    Vagrant installed on Terminal

    Next, you’re going to install vagrant-hostupdater with the command vagrant plugin install vagrant-hostsupdater, then install vagrant-triggers by typing vagrant plugin install vagrant-triggers into Terminal too. These tools will allow Vagrant to automatically set hosts for you, which are a pain in the butt on your own, and allow triggers to run, which lets other programs (say VV?) attach their own events to Vagrant.

    Up next, install Varying Vagrant Vagrants, which is thankfully shortened to VVV. You can do this in Terminal too, using the command git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local. You’re going to move into that directory by typing cd vagrant-local, since vagrant-local is the name of the folder that you made and put it into when you cloned it to your computer.

    The next portion of this is really long. Like, don’t do this at a coffeeshop or via a mobile data plan long. Probably should give fair warning that setting up VVV is a long process on slow internet. Let’s assume that you are on fast internet or have plenty of time to kill. Thankfully you can run this in the background and go along your day, provided heavy YouTube viewing is not part of your downtime. Run the command vagrant up, which is a command that you’ll be getting used to over time. The first time that you run the command it will have to download a whole box for Virtual Box, basically meaning you’re downloading and installing a new operating system that will run alongside your existing one.

    When VVV is installed, you should be able to visit vvv.dev in your browser and see it in all of it’s glory!

    Default VVV page
    In the next post, we’ll make this page show useful information and look pretty.

    Look, at this point you probably need a coffee or something. Relax, you’re doing great, and treat yourself to that caffeinated goodness.

    Site Creation with VV

    To make site creation even easier, we’re going to use Brad Parbs‘ cool tool Variable VVV, or VV for short. There are a few methods to install this, and while I use HomeBrew which makes it rather easy, in the event that you don’t, check out his install instructions here: https://github.com/bradp/vv/#installation.

    With VV installed you can use the command vv --create to install new WordPress sites to a single VVV install with ease. I’m going to save the discussion on how to do that for the next post, since it can cover quite a bit.

    Next Time on the Show!

    I’m going to go through some enhancements in my next post on this topic, like using a custom VVV dashboard, how to get value out of VV, how I make VVV a bit easier to use, and some of the testing that I’ve done around squeezing performance out of VVV and making it load faster.

    I hope that if you’ve stuck around for the journey you were able to successfully get going, or at least will give it a shot. If you’re having any trouble, please leave a comment and I’ll try to help you out here so others can troubleshoot too.

  • Comments on Live Site Being Sent to Staging Site

    Comments on Live Site Being Sent to Staging Site

    If y’all weren’t aware, I’m a big fan of my site host, WP Engine. One of the coolest features that their service has (in addition to built in security, caching, CDN and backups), is the ability to make a staging version of your site with a single click, and copy the staging version to your live site just as easy.

    This is where an issue has arisen however. Yesterday morning before my last post, I made a snapshot of my site for staging, so that I could make a few tweaks and test some code. When someone tried to comment on the post, and when I tried to respond, they were redirected to the staging site.

    Thanks to the help of a quick WP Engine employee, it was determined that Jetpack (which was managing my comments) was authorized on the staging site when I made my snapshot, and for whatever reason that was chosen to be the default. Simply de-authorizing it on the staging site fixed the issue.

    Even though that was an annoying hiccup that I didn’t catch myself, my host quickly did and rectified it. Hopefully I can save a few people out there some time with this 🙂

  • What is the Difference Between PHP, HTML and CSS Anyway?

    While the following post is geared more toward beginners, and not the standard fare for this blog, I’m working up a more basic talk for non-developers to give a jumping off point for what we actually do to someone that wants to make sense of a basic WordPress site theme. There is no way that this could be all-encompassing, but it should be enough to help someone get into trouble while looking at a website’s code.

    Even advanced web developers will run across acronyms and terminology that baffle them on a regular basis, as well as programming languages that they’ve never even seen before, let alone mastered. It wasn’t so long ago that any developer out there couldn’t differentiate between the types of code that went in to running their sites and with new changes being made constantly, no one will ever know them all.

    I’m going to briefly discuss what the differences are between PHP, HTML and CSS, which are the most common types of code that are used to make WordPress websites. I’ll also touch a bit on Javascript, as most websites are running several scripts minimum to help with tasks for each page.

    (more…)
  • How to Build a Responsive Portfolio Site – Part 2

    In my last tutorial post, I described the reasoning for switching to a responsive theme for my website, as well as the logic that went into some changes that I made in layout. Going through the thought process, I’m now going to describe in a bit of detail how I created the responsive portions of the theme. (more…)

🌙 ☀️