WebDevStudios and Five for the Future

Since the inception of Five for the Future (5FTF), WebDevStudios (WDS) has been actively involved. We’ve gone through various iterations of hosting 5FTF. Here’s how we do it today: every last Friday of the month, our team pauses working on client projects and focuses on contributing to WordPress. This takes place in a variety of ways, but here’s what seems to be the most popular:

• Organizing a WordCamp
• Developing a WordCamp talk
• Taking support tickets from the WordPress Support Forum
• Developing or updating a free plugin
• Mentorship
• WordPress community involvement
• Contribution to the overall knowledge base of WordPress

Last Month’s 5FTF Contributions

During the August 5FTF Friday, our team came up with some interesting ways to contribute to WordPress. Here are just a few:

• Lead Engineer Lauren Levin (Pittenger) built block patterns for the WordPress Block Pattern Directory.
• Principal Engineer Joel Schlotterer created some PRs for issues for our own open-source starter theme wd_s.
• Engineering Manager John Heimkes reviewed themes in the WordPress theme repository.
• Frontend Engineer Ashley Stanley contributed to our own open-source plugin WDS Site Documentation.
• Backend Engineer Garrett Baldwin built an open-source plugin designed to add theme documentation to the WordPress admin dashboard. You can access it on GitHub.

Five for the Future Is for Everyone Who Uses WordPress

It is important for individuals and companies within the WordPress ecosystem to participate in Five for the Future. This initiative is crucial in sustaining and advancing the WordPress open-source project, which powers a considerable portion of the internet. Here are a few reasons why getting involved with 5FTF is significant:

1. Sustainability of WordPress: WordPress is maintained and improved by a global community of volunteers. By contributing 5% of your work time, you help ensure the long-term sustainability of the platform. Your contributions can directly impact the development of core features, bug fixes, security enhancements, and overall stability.

2. Community Building: Engaging with 5FTF strengthens the sense of community within the WordPress ecosystem. It fosters collaboration, knowledge sharing, and camaraderie among developers, designers, marketers, and users. It’s an opportunity to connect with like-minded individuals who are passionate about WordPress.

3. Skill Enhancement: Getting involved with open-source projects like WordPress can be a valuable learning experience. You can expand your skill set, gain hands-on experience, and improve your coding, project management, and communication skills. It’s a win-win situation where you both give and receive.

4. Business Benefits: For companies and independent developers in the WordPress space, contributing to 5FTF can be a strategic move. It enhances your company’s reputation, demonstrates your commitment to the WordPress community, and can lead to new business opportunities and partnerships.

Sharing Our 5FTF Success!

Follow the hashtag #5FTF on X (formerly Twitter). That’s where some of our teammates share their Five for the Future contributions. While there was a time when it seemed like our WordPress website agency was the only one sharing 5FTF success, we’re seeing a trend of more and more WordPress companies and independent developers sharing their contributions, too. All the cool kids are giving back to WordPress!

So keep up with our team on social media tomorrow. You can view their posts from August’s 5FTF Friday below. Be sure to follow us at @webdevstudios.

While the rest of the @webdevstudios team has #5FTF today, I was lucky enough to be at #WCUS Contributor Day yesterday, where I started chasing a WP CLI bug and ended up opening this WordPress core ticket and creating a patch.https://t.co/5KWKShALqy

— Sal Ferrarello (@salcode) August 25, 2023

Another beautiful #5FTF day @webdevstudios I’m working on my open-source theme, a great way to beat the heat!

— David Walz (@DavesjoshinWDS) August 25, 2023

#5FTF @webdevstudios and I really want to be at #WCUS, but for now I’ll be doing #WCAsia stuff and working on wd_s and wd_f themes. pic.twitter.com/sol8AWaSXP

— JC Palmes #WCAsia2024 (@jpalmes) August 25, 2023

Happy to be working on the #WordPress #ActivityPub plugin today for #5ftf!

— django (@MediaFormatUX) August 25, 2023

It’s #5ftf Day at @webdevstudios and this time I am contributing by submitting some bug fixes to #Wordpress core pic.twitter.com/3ZnbmCODLk

— Aslam D WordPress (@aslammdoctor) August 25, 2023

The post Tomorrow, Our WordPress Website Agency Is Giving Back via Five for the Future appeared first on WebDevStudios.

How do you go about doing this, especially when you’ve already committed your work and pushed it to the server? How do you retroactively sign your Git commits? We’ll do this in six steps:

1. Gather Information
2. Install GPG
3. Create or use a key
4. Set up Git to sign commits using GPG
5. Rebase your commits
6. Overwrite your branch with your newly signed commits

There’s a lot to unpack, so we’re going to need six steps. Also, these instructions are for macOS; Windows and Linux users may have different commands.

Step 1: Gather Information

I’m self-aware enough to know that I’m the kind of person to just skip straight to the doing, but a quick moment here will save you from having to duplicate effort later. In particular, you can avoid this ‘gotcha’ that has gotten more than one person at the end of this process:

The name and email on your GPG key must match the name and email on the Git commits!

For those of us fortunate enough to be employed as software engineers, it can be all too easy to get our work and personal emails and keys mixed up. If the emails don’t match up, then Git will not verify the commit. So, don’t make my mistake, and check what email you’re using first. In your Git repository, type git log. This will show you the most recent commits in this branch:

You want to make note of two things here. First, find out how many commits you need to sign. Second, note the name and email address attached to those commits. We’ll want to use the same name and email when setting up our GPG key.

Step 2: Install GPG

If you’re not sure if you’ve installed GPG, run the command which gpg. If you get any result at all, it is installed. If not, it’s easily installed using Homebrew: brew install gpg

If you install GPG using Homebrew, make sure you have added your GPG key to your bash profile as mentioned in the GitHub knowledgebase using this command:

echo 'export GPG_TTY=$(tty)' >> ~/.bash_profile

Step 3: Create a New Key (Or, Use an Existing One)

Detailed instructions for this step can be found in GitHub’s documentation. To go over it in brief:

1. Check for existing keys with the command gpg --list-secret-keys --keyid-format LONG
2. If no keys are listed, create a new GPG key. Remember to use the email address you used for your commits.
3. Choose the key that matches your email address and copy the ID. It will be the part listed after the ‘/’ in the list (emphasized in bold font in the example here: sec rsa4096/7CB000B9D7FE18A5 2019-11-14 [SC]
4. Paste it into the command below to print the public key to the screen: gpg --armor --export 7CB000B9D7FE18A5

Step 4: Add the Key to Git and GitHub

You will need to add the public key to your GitHub profile and set up Git on your computer to use your key to sign commits. For GitHub, follow their instructions to copy the key you printed in the last step into your GitHub profile.

For Git on your computer, copy the ID of the key (7CB000B9D7FE18A5 in the example above) and use it in this command: git config user.signingkey 7CB000B9D7FE18A5. Then tell Git to sign commits using this command: git config commit.gpgsign true.

Aside: If you want to sign all commits across all of your repos add the --global flag:

git config --global user.signingkey 7CB000B9D7FE18A5
git config --global commit.gpgsign true

Step 5: Rebase

Now that you’ve created a key and set it up in both Git and GitHub, it’s time to rebase your commits. This will essentially undo and redo your commits, but signed with your new key.

First off, let’s run git log again:

In this example, we can see that there are two commits in the feature/better-readme branch (our current branch) that we need to sign. To recreate these commits, use this command:

git rebase -i HEAD~2

This tells Git we want to interactively rebase the last two commits. It will launch the Vim text editor to let us proceed:

For this rebase, we want to ‘reword’ the commits. Even if we don’t change the commit message at all, it will still force Git to recreate the commit and sign it. If you know your way around Vim, just change ‘pick’ in each line to ‘r’ (for ‘reword’). If you want instructions, here’s one way to do this:

1. Type :%substitute/^pick/reword/ and press Enter to replace all instances of the word ‘pick’ to ‘reword.’
2. Type :wq command (for ‘write and quit’), then press Enter.

(To explain: : brings up the Vim command prompt. %substitute begins a find-and-replace on every line, with ^pick matching any line that begins with ‘pick.’)

This will kick off your rebase. For each commit, a new Vim editor will open. You can make changes here if you want, but you will likely just want to type :wq and press Enter for each one. When that’s done, Git will show you the results:

Step 6: Git, Please

The last step is to force these changes up to the server. Since we rewrote commits, we want to replace the commits on GitHub with the ones on our computer. The command (which should be used very judiciously—as in this is the only time I have ever used this command) is git push --force-with-lease.

For more on this particular Git command, our own Sal Ferrarello has an article on the subject. Once you’ve done that, your pull request should look a lot more shiny:

Need more web development tips and tricks? Keep up with our blog and scroll below to sign up for the WebDevStudios email newsletter.

The post Retroactively Sign Git Commits appeared first on WebDevStudios.

This, in itself, is shocking. When it first came out, nobody expected a tool made by Microsoft to become so dominant. After all, Sublime Text and Atom (made by GitHub) were incredibly popular and had a large user base; Microsoft had a large hill to climb.

Microsoft did lots right when developing VS Code, but there are a few (okay, five) specific things that sick out (to me) that make it universally appealing. First and perhaps foremost, they integrate extensions as a primary function of the IDE.

This focus is obvious. It has a button in the activity bar! Extensions are popular in Atom and Brackets, as well (both very similar IDEs built on Electron), but neither have made extensions so accessible and simple. This means that if, for some reason, you want your editor to work differently, there’s probably an extension for that. If there isn’t one, you can code one yourself using their thorough documentation and API.

Secondly, Visual Studio Code is fast. Maybe not FAST like Sublime Text (which is built with C++, as opposed to JavaScript and HTML, implemented with Electron), but significantly faster than either Atom or Brackets. And you know what they say: you don’t have to be faster than a bear, you just have to be faster than the person next to you. The speed of VS Code makes similar editors feel sluggish and unresponsive.

Then there’s Git. Sublime doesn’t have it out of the box. Atom does, but VS Code just does it better. Want to git a lot of developers excited? Get Git right!

Microsoft made Visual Studio Code open-source, hosting it on GitHub. This was unexpected. Microsoft is not known for being open-source-friendly. Perhaps this was originally a foreshadowing of June 2018, when they bought GitHub for $7.5 billion. No matter what the reason, being open-source invigorated and built a community, quickly.

The last thing that sets them apart is actually two things that works as one: they have listened to their user base on GitHub, then have promptly fixed or added whatever had been requested. This responsiveness has captured many fans and caused Visual Studio Code to improve leaps and bounds in a short time. Today, they’re at nearly 60,000 commits with no signs of slowing down. Developers love them some pull requests (PRs) and lots and lots of commits.

(In comparison, Sublime Text 2 had, at one time, appeared to have stopped development entirely, with Sublime Text 3 seemingly forever in beta. It was eventually released on September 13, 2017.)

Speed Up / Customize / Tweak Your Development

Before you continue, I’ve got to break something to you. The following tips aren’t necessarily unique. I haven’t discovered hidden settings that nobody else has found.

Instead, the following pieces of advice aim to surprise you with a new keyboard shortcut or an extension you hadn’t heard about. I’d like to try to address almost all aspects of how you can modify or customize VS Code to your liking, not just list a bunch of neat extensions. If you need a more in-depth primer on everything Visual Studio Code, I recommend reading the official Getting Started Guide, which is fantastically thorough.

One last thing, all of the keyboard shortcuts are for MacOS; I chose to omit the Windows shortcut as opposed to getting some wrong. Here’s the Windows VS Code shortcuts reference, the MacOS shortcuts, and the Linux shortcuts.

Sound cool? Keep calm and develop on.

Visual Aids

Color Themes

If there’s one thing that you can do that will go furthest in enhancing your enjoyment and efficiency when using Visual Studio Code, it’s making sure you use a color theme that is legible and reduces your eye strain. A lot of developers will be staring at their IDE for hours at a time, so you owe it to yourself to find a theme that works for you.

Here are a few I’ve used for quite some time and enjoy a lot. You might notice these are all dark themes with nary a light one to be found. After trying a few light themes for a while, I just couldn’t get past the extra strain they put on my eyes. For me, when coding, darker is better. If lighter themes are your jam, check out some good ones here.

Cobalt 2 by Wes Bos

• I recently started using Cobalt for Visual Studio Code and now also use it as my Firefox theme, although I prefer this one. I like that the focus is clearly on the editor with the side panels darkened the right amount. Additionally, highlighted elements are clear and pronounced. It’s really nicely done.
• Search extensions for: wesbos.theme-cobalt2
• VS Code Marketplace link

Monokai Pro (nagware – 10€ to remove the occasional popup, but it’s worth it!)

• I used Monokai Pro for a couple years and found that the lower contrast really helped with long-term eyestrain. The developer has put a ton of work into this theme and it shows. It comes highly recommended, even though it’s a paid theme (although you can ignore the occasional nags, if you prefer).
• Search extensions for: monokai.theme-monokai-pro-vscode
• VS Code Marketplace link

Material Theme (website or Github)

• This is a theme I’ve actually not used for more than a brief time. However, with 1.7M installs, clearly people like it. Check it out if Material Design is your thing.
• Search extensions for: equinusocio.vsc-material-theme
• VS Code Marketplace link

Monokai One Dark Vivid

• This is a less popular theme, but I used it for a long time. I really loved the high-contrast rainbow color scheme but the ultra-high contrast might not be for everyone.
• Search extensions for: ashpowell.monokai-one-dark-vivid
• VS Code Marketplace link

Bracket Colors

Extension: Bracket Pair Colorizer 2

• Search extensions for: coenraads.bracket-pair-colorizer-2
• VS Code Marketplace link
• This also colors the indentation guides.

Icon Themes

I prefer the Material Icon Theme, but VS Code Great Icons are also… uh, great.

Material Icon Theme

• Search extensions for: pkief.material-icon-theme
• VS Code Marketplace link

VS Code Great Icons

• Search extensions for: emmanuelbeziat.vscode-great-icons
• VS Code Marketplace link

Extensions

ACF Snippets

• Do you do a lot of coding with Advanced Custom Fields (ACF)? This is the extension for you. I prefer this to the more-installed alternative as I find the snippet triggers for this one are simpler to remember. Want to Get Sub-Field? Yep, it’s gsf + TAB. Straightforward.
• Search extensions for: baerkins.acf-snippets-vscode
• VS Code Marketplace link

Auto Comment Blocks

• • You can easily insert multi-line comments. Just type /** + Enter and you’re good to go.
  • Search extensions for: kevinkyang.auto-comment-blocks
  • VS Code Marketplace link

Better Comments

• This goes nicely with Auto Comment Blocks. Highlight TODOs and FIXMEs and NOTEs (and more) so they stand out in your code. It’s also very customizable.
• Search extensions for: aaron-bond.better-comments
• VS Code Marketplace link

Comment Anchors

• I clearly love comments. This extension automatically adds an anchor, essentially a bookmark, to anything that says NOTE, TODO, FIXME, etc. It also creates a VS Code panel, so you can find all Anchors in a project or just the ones in the current file, which is handy.
• Search extensions for: exodiusstudios.comment-anchors
• VS Code Marketplace link

Settings Sync

• This feature is absolutely fantastic if you use more than one computer and you want the exact same setup, even if you’re going from Mac -> Windows -> Linux. Everything is beautifully kept in sync.
• Search extensions for: shan.code-settings-sync
• VS Code Marketplace link

Search the WordPress Docs

• If you can’t remember (like me) if get_permalink accepts the post object or just the ID, and whether or not it has any optional parameters, you’ll find this feature super useful. I have mine bound to cmd + F1 and set to open in a side-by-side panel.
• Search extensions for: yogensia.searchwpdocs
• VS Code Marketplace link

Path Intellisense

• This is great if you need to include() a lot of files.
• Search extensions for: christian-kohler.path-intellisense
• VS Code Marketplace link

Highlight Matching Tag

• So subtle, but it’s very useful. It gives you a bit of context, both as an underline as well as a gutter marker, and works with everything from functions to SCSS blocks to good ol’ HTML.
• Search extensions for: vincaslt.highlight-matching-tag
• VS Code Marketplace link

SCSS Formatter, SCSS Intellisense, SCSS Everywhere

• If you write SASS, you need these.
• Search extensions for: sibiraj-s.vscode-scss-formatter, mrmlnc.vscode-scss, gencer.html-slim-scss-css-class-completion
• VS Code Marketplace – SCSS Formatter, SCSS Intellisense, SCSS Everywhere

Emmet

Emmet is a great time-saver, allowing you to write a bunch of custom HTML & CSS snippets on the fly. Pro tip: use multi-cursors (find out how below) to activate Emmet in a variety of spots at once.

Here’s a great tutorial on all the ins and outs of Emmet in VS Code. Some quick Emmet shortcuts can be found below.

• HTML
  • div.header>ul.menu>li.menu-item*3
• SCSS / CSS
  • Use TAB to trigger the following shortcuts. To enable TAB triggering, see the Settings below.
  • m > margin
  • p > padding
  • d > display: block
  • r > right
  • t > top
  • w > width
  • h > height

Useful Settings

Add the following to your Settings file (cmd + ,), or modify them with the Settings UI:

• “files.trimTrailingWhitespace”: true
  • Always removes trailing space on lines.
• “files.insertFinalNewline”:true
  • Add a newline at the end of the file.
• “editor.smoothScrolling”: true
  • So smooooth.
• “workbench.editor.enablePreviewFromQuickOpen”: false
  • If you’re using cmd + p to open files, don’t set them as previews.
  • This leaves files that you single-clicked in the file explorer as previews.
• “extensions.ignoreRecommendations”: true
  • Hide the extension recommendations.
• “editor.fontLigatures”: true
  • Turn on font ligatures. (See below.)
• “emmet.triggerExpansionOnTab”: true
  • Let emmet trigger suggestions with the TAB key.
• “telemetry.enableTelemetry”: false
• “workbench.settings.enableNaturalLanguageSearch”:false
  • The above two settings disables data collection by Microsoft.
• “editor.cursorBlinking”: “phase”
  • I prefer this to a blinking cursor.

Keyboard (& mouse) Shortcuts

If you want to be efficient, don’t take your hands off of the keyboard! As I mentioned at the top of the article, all of the keyboard shortcuts are for MacOS. You can find links to the keyboard shortcuts for all platforms here. Before starting in on the shortcuts, are you coming from a different IDE? If so, there’s probably a keymap for that!

Downloadable Keymaps:

• Sublime Text
  • Search extensions for: ms-vscode.sublime-keybindings
  • VS Code Marketplace link
• Atom
  • Search extensions for: ms-vscode.atom-keybindings
  • VS Code Marketplace link
• Notepad++
  • Search extensions for: ms-vscode.notepadplusplus-keybindings
  • VS Code Marketplace link
• JetBrains
  • Search Extensions for: isudox.vscode-jetbrains-keybindings
  • VS Code Marketplace link
• Visual Studio
  • Search Extensions for: ms-vscode.vs-keybindingsPreview
  • VS Code Marketplace link
• Xcode
  • Search Extensions for: stevemoser.xcode-keybindingsPreview
  • VS Code Marketplace link
• Did I miss your favorite IDE? There’s lots more.
  • VS Code Marketplace Keymaps

Keyboard Shortcuts

The official Key Bindings list can be found here.

cmd + shift + p

• Command Palette
• Do anything by typing.

cmd + p

• Open any file quickly with fuzzy search.

cmd + shift + .

• Display and jump through your code tree via breadcrumbs.

cmd + shift + ;

• Select current breadcrumb, then navigate with arrows.

cmd + ,

• Open and play with your settings.

cmd + alt + click

• Goto Definition in a side-by-side pane

cmd + l

• Select whole line with cursor.
• Works with multi-cursors

ctrl + j (note: NOT cmd)

• Join line (Mac only)

shift + option + Up/Down

• Duplicate line up or down

cmd + shift + k, cmd + c, cmd + v

• Simply put your cursor on the line to manipulate. The whole line doesn’t have to be selected.
• Delete line > cmd + shift + k
• Copy / cut line > cmd + c / cmd + x
• Paste line > cmd + v

cmd + d

• Select word under cursor, highlight all occurrences of that word in the file.
• Hit again to progressively select more of the same word.

cmd + shift + l

• Select all occurrences of a word in current file.

shift + option + drag

• Column mode
• Alternatively, use the middle mouse button

cmd + shift + t

• Reopen files that you recently closed in order (just like in your browser!).

cmd + shift + e, f, g, d, x

• Focus panels > file explorer, find, git, debug, extensions (in order, from top to bottom)

Multi-cursors

• Option + click
• (Might be set to ctrl + click, toggleable in the Settings or in Selection > Switch to…)

shift + option + right (or Left)

• Select everything inside brackets { }.
• Use Right to expand selection to include next section.
• Use Left to shrink selection.

Quickly toggle between terminal and editor focus

• Add the following to your settings, modifying as desired:
  • { “key”: “ctrl+`”, “command”: “workbench.action.terminal.focus”, “when”: “editorTextFocus” }, { “key”: “ctrl+`”, “command”: “workbench.action.focusActiveEditorGroup”, “when”: “terminalFocus” },

Other cool things

Fonts with Ligatures

So, why use font ligatures at all, and what are they?

Ligatures are a font that will merge several characters into a single one, to make them more legible or to stand out in some way. In programming, that basically means you’ll see ⇒ instead of => and ≥ instead of >= and so on. Different fonts will support a different number of ligatures, so try a few to decide what works for you. Here’s an example of the ligatures supported in Fira Code:

Want to try some out? Cool. To start, enable ligatures in your settings by adding “editor.fontLigatures”:true, (or use the UI) then install and select one of the following fonts:

• Fira Code
  • https://github.com/tonsky/FiraCode 
  • https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions 
• JetBrains Mono
  • https://www.jetbrains.com/lp/mono/
• Cascadia Code
  • https://github.com/microsoft/cascadia-code

Good fonts for coding:

• https://speckyboy.com/best-free-fonts-coding/
• https://github.com/chrissimpkins/codeface

Zsh shell > Bash

• Here’s why you should use it.
• How to use it in Visual Studio Code after installing:
  • Use the Command Palette:

• • Adding the settings manually: (cmd+.)
    • “terminal.integrated.shell.osx”:”/bin/zsh
    • “terminal.integrated.shell.linux”:”/bin/zsh”

Workspaces

• You can have workspace-based settings!
  • Formatting
  • Color themes
  • Etc.
• In one Workspace, you can open different folders which are not necessarily in the root folder.
  • File > Add Folder to Workspace

Get a Wider Monitor

No, really. Consider buying an ultrawide monitor. Check out the screen real estate! This is one of best things I’ve ever done to increase my productivity.

That’s all I’ve got. If I find some new efficiencies, I’ll add them here so be sure to check back periodically. Also, if you find some that I’ve missed, feel free to share them with me on twitter.

Have fun coding!

The post Speed Up Your Development with Visual Studio Code appeared first on WebDevStudios.

Maybe it’s just me, but @webdevstudios is one of the few companies that often shares their Five for the Future work https://t.co/AVvnDeLkYY

— Jeff (@jeffr0) June 5, 2017

While giving back to the WordPress community isn’t something that WebDevStudios (WDS) does for the glory and accolades (or the glamour, for that matter), actively and consistently participating in Five for the Future is something we do with a great amount of pride. Last year, WDS contributed 1,500 hours to the WordPress community, and we are on track to complete the same this year.

Our team’s contributions are varied and diverse. They include volunteering or speaking at WordCamp events, building plugins and adding them to the WordPress repo, transcribing talks for video caption, replying to tickets submitted at the WordPress support forum, and much, much more. Below are some examples of those contributions. And after the first of the new year, we’ll tally up all the hours contributed and report back to you. Keep up with our team’s Five for the Future contributions by following the hashtag #5ftf on Twitter.

Eric Fuller, Senior Frontend Developer

“Over the past couple of Five for the Futures, I’ve been working on creating a Todo plugin for WordPress. You might be thinking, another todo plugin? And yes, I would agree in most cases but this one is actually going to have a pretty nice feature set!” says Eric.

“My approach to this plugin is to create a fully functional frontend prototype before actually wiring it up to the WordPress backend. This is an effort to practice separation of concerns when it comes to FED/BED,” he explains. Check out the prototype branch here.

Jay Wood, Lead Backend Developer

In addition to actively working on an open ticket in GitHub, Jay has also been developing a robust random post generator for WP CLI, which supports multisite, post types, post counts, taxonomies, terms, term counts, and featured images. Plus, it comes complete with a cleanup command to undo it all! Neat, huh? Get all the details here.

And, because it’s October, after all, Jay is also participating in Hacktoberfest! And if all of that is not enough to qualify as a considerable amount of Five for the Future contribution (it is!), Jay is using his free time to learn Jenkins more deeply, which is a Continuous Integration and Deployment system that’s pretty configurable.

Ben Lobaugh, Backend Developer
Ben has been building out a standard WDS Docker development instance and combining that with automated testing capabilities that can be plugged into Jay’s Jenkins server.

 

 

 

Greg Rickaby, Lead Frontend Developer

“TeamJBW spent our Five for the Future testing wd_s as we revert from Neat 2.0 to Neat 1.9,” reports Greg. “The three of us tried to build a website using the /revert-neat branch of wd_s. We identified only one issue and fixed it. We also updated some documentation. We believe this branch is ready to be merged into master.” Learn more about the history of the WDS internal starter theme wd_s here.

 

 

Jeremy Ward, Backend Developer

“I’ve been working on my Dudley Patterns Framework plugin, which allows developers to quickly pull in reusable components powered by the meta fields plugin of their choosing (it defaults to Advanced Custom Fields),” Jeremy says. He has also been working on setting up a unit testing suite for the plugin and getting started on some initial tests so he can ensure that the code is rock solid.

Learn more about the Dudley Patterns Framework plugin here. Installable packages can be found on Packagist. Search for “Dudley.”

Aubrey Portwood, Senior Backend Developer

Aubrey has been working on getting out an internal Single Sign On plugin for WebDevStudios. He’s also contributing to WDS’s own coding standards. You can view that here.

 

 

Justin Foell, Senior Backend Developer

Justin is killing it at Five for the Future. He presented a metadata talk called “Too Meta” at WordCamp Portland, assisted Aubrey by updating the WDS Coding Standards, and has also been contributing to the internal Single Sign On plugin project for WDS.

Additionally, Justin has worked with other developers on the WP Strava plugin, which is designed to use the Strava V3 API to embed maps and activity for athletes and clubs on a WordPress site. Check out the plugin here.

John Hawkins, Business Development Manager

John recently donated his time and expertise by giving the talk “The Part You Play in Your Company’s Website Security” at WordCamp Salt Lake City.

 

 

 

Corey Collins, Lead Frontend Developer

Corey is our expert transcriber, having provided the captions for two WordPress.tv videos: Don’t Fear the Command Line and Diversity and the Design Team. He also did some work in wd_s, updating the header to an out-of-the-box, three-column header with Customizer support for an additional button/search form trigger.

 

Kellen Mace, Frontend Developer

Just recently, Kellen shared his knowledge at WordCamp Ann Arbor by speaking on “Build a Simple Frontend App Using the WP REST API + React.” He demonstrated an interactive React app he built for WDS to manage internal training, and he showed how he turned that project into a general starter plugin that anyone can use to get started building WP REST API-powered React apps. His WordPress React App Starter plugin is available here.

 

Cameron Campbell, Creative Lead

Cameron has been working on the design screens for an upcoming plugin called WDS Checklist Plugin, which is designed to provide developers with a thorough checklist for website launches. As full columns are completed, the user will even receive words of encouragement, such as, “Keep up the good work, champ!”

 

Will Schmierer, Lead Frontend Developer & Jo Murgel, Frontend Developer & Designer  

Seeing as how teamwork makes the dream work, Will and Jo have worked together to develop and design a WordPress theme for student athletes looking to be recruited for college sports. Custom post types include events (so the athletes can feature their upcoming games) and videos. This project remains in development. We’ll keep you updated.

The post Five for the Future: the Gift That Keeps on Giving appeared first on WebDevStudios.

]]> https://webdevstudios.com/2017/10/31/five-for-the-future-gift/feed/ 0 17626 https://webdevstudios.com/2015/06/16/wds-github-releases-for-may-2015/ https://webdevstudios.com/2015/06/16/wds-github-releases-for-may-2015/#respond Tue, 16 Jun 2015 16:28:02 +0000 http://webdevstudios.com/?p=11352 Every month, WDS releases a bunch of goodies over on Github (and occasionally WordPress.org and elsewhere). While we typically share the links on social media, we know that it’s easy for things to get lost in the noise, so we will be bringing you our top releases of every month. While the vast majority are Read More WDS Github Releases for May 2015

The post WDS Github Releases for May 2015 appeared first on WebDevStudios.

]]> Every month, WDS releases a bunch of goodies over on Github (and occasionally WordPress.org and elsewhere). While we typically share the links on social media, we know that it’s easy for things to get lost in the noise, so we will be bringing you our top releases of every month. While the vast majority are on Github, we’ll sometimes also be featuring non-Github releases as well.

Catch up on last month’s releases, and check out our choice releases for May 2015:

WP Contributions

WP Contributions provides an easy way to display your WordPress.org Themes, Plugins, Core tickets, and Codex contributions with handy widgets and template tags. It was also featured on the Tavern!

CMB2 Date Range Field

MORE CMB2 GOODNESS FOR YOU, this time from Dusty! CMB2 Date Range Field adds…well, a fancy CMB2 date range field type. This is particularly great for events, bookings, and the like.

WDS Custom Login Page

Ever want to have a login page for your site that’s not the wp-login.php page? This plugin gives you the ability to have a page in the WordPress admin act as, and override, the default wp-login.php page. It works with any workflow you might be comfortable with; you can use a custom page template, you can use a named page template (page-login.php), you can use a template tag to display the login form, or you can use a simple shortcode.

WDS Simple Page Builder

We already featured this, but Chris wrote a blurb that may give some greater insight to those who want to learn more about what WDS Simple Page Builder is about:

WDS Simple Page Builder is a plugin that allows you to build and arrange custom layouts for pages out of template parts in the theme. It’s designed primarily with custom WordPress themes in mind and was originally built for the new Maintainn redesign. Instead of overloading content editors with layout and formatting options for widgets and component types and forcing them to learn or use HTML to create custom-designed elements, these things are built by the theme developer and all the content manager needs to worry about is arranging them on the page. Recent updates remove the requirement for an already-existing CMB2 installation and the ability to set a global template part configuration that can be used for all pages instead of requiring each page to be set up manually.

WDS Browser Detect

Here’s a lightweight plugin to detect browsers, operating systems, and devices. It’s powered by a (slightly) modified version of Chris Schuld’s https://github.com/cbschuld/Browser.php

Yeoman WordPress Plugin Generator

This update has three new sub-generators for creating widgets, custom post types, and options pages to be bundled with your plugin-wp generated plugin…and many bug fixes too!

And as per usual, special thanks to Justin Sternberg for helping me put this post together!

Did any of you out there use any of these this month? Did you see other Github releases that tickled your fancy? Tell us! 

 

The post WDS Github Releases for May 2015 appeared first on WebDevStudios.

]]> https://webdevstudios.com/2015/06/16/wds-github-releases-for-may-2015/feed/ 0 11352 https://webdevstudios.com/2015/02/24/wds-github-releases-for-february-2015/ https://webdevstudios.com/2015/02/24/wds-github-releases-for-february-2015/#respond Tue, 24 Feb 2015 17:03:57 +0000 http://webdevstudios.com/?p=10674 Every month, WDS releases a bunch of goodies over on Github (and occasionally WordPress.org and elsewhere). While we typically share the links on our social media, we know that it’s easy for things to get lost in the noise, so we will be bringing you our top five(-ish) releases of every month from now on. Read More WDS Github Releases for February 2015

The post WDS Github Releases for February 2015 appeared first on WebDevStudios.

]]> Every month, WDS releases a bunch of goodies over on Github (and occasionally WordPress.org and elsewhere). While we typically share the links on our social media, we know that it’s easy for things to get lost in the noise, so we will be bringing you our top five(-ish) releases of every month from now on. While the vast majority are on Github (and for this month, they ALL are), we’ll sometimes also be featuring non-Github releases as well.

February was a busy month! We had a lot going on, and released some really exciting stuff!

Here are the top five releases from WebDevStudios:

Version 2.0.2 of CMB2

You may have seen the brilliant Justin Sternberg’s recent blog post on the CMB2 WordPress Plugin (and if you haven’t, go read it now!). Version 2.0.2 of CMB uses new APIs for adding metaboxes and fields demonstrated in example-functions.php.

In keeping with backwards-compatibility, the cmb2_meta_boxes filter method will still work, but is not recommended. New API includes new_cmb2_box helper function to generate a new metabox, and returns a $cmb object to add new fields (via the CMB2::add_field() and CMB2::add_group_field() methods).

Bonus: After reading “How a Crowdsourced Code Snippet Library Can Boost Your Open Source Project,” by WPTavern’s Sarah Gooding, we were inspired and created the CMB2 Snippet Library as well.

WDS RSS Post Aggregator

This nifty little tool allows you to selectively import posts from RSS Feeds to your WordPress installation and save them as a sort of automated blogroll. With this plugin, you can pull up a list of posts from an RSS feed, then click one, and it will automatically import the link to your site. Plus, the permalink to that “post” will actually send the user to the original resource. Lastly, it will pull the first image in the content, and save it as the featured image for that link post.

This one was originally built for the Microsoft News Center, and hasn’t been released on WordPress.org just yet.

WDS Widget Boilerplate

Do you need a starting point for creating new widgets? WDS Widget Boilerplate provides a good working point for creating widgets, plus it gives you a shortcode for free. It’s a great way to way to quickly create a widget with standard WDS code.

WDS Required Plugins

Okay, okay, so this plugin isn’t exactly new, but it was updated recently.

WDS Required Plugins will allow you to pick plugins that you’re using and set them to never deactivate. This is particularly cool for building projects that require functionality in plugins, especially if you don’t want your client randomly disabling it!

WDS Change Comment Author 

This plugin allows admins to update and edit authors of existing comments from wp-admin. It also creates a drop down menu of users that admins can select to comment as. This is especially useful for office/commercial blogs that have one person managing comments; if your boss or colleague needs you to shoot a quick comment out on their behalf, this plugin makes it simple.

A little extra…

Another favorite from this month that we wanted to throw in real quick: The Etsy Importer plugin, by Corey Collins, allows you to do exactly what it says–import products from Etsy with ease. Check it out!

Did any of you out there use any of these this month? Did you see other Github releases that tickled your fancy? Link us up in the comments!

The post WDS Github Releases for February 2015 appeared first on WebDevStudios.

]]> https://webdevstudios.com/2015/02/24/wds-github-releases-for-february-2015/feed/ 0 10674 https://webdevstudios.com/2013/12/03/custom-metaboxes-and-fields-1-0-0-released/ https://webdevstudios.com/2013/12/03/custom-metaboxes-and-fields-1-0-0-released/#respond Tue, 03 Dec 2013 14:19:29 +0000 http://webdevstudios.com/?p=7929 If you’re not already familiar, Custom Metaboxes and Fields for WordPress is a WordPress drop-in plugin that will “create metaboxes with custom fields that will blow your mind.”  The Custom Metaboxes and Fields (CMB) library is a frequently used tool at WebDev, so I approached Jared Atchison about some possible improvements. Jared gave me commit access and Read More Custom Metaboxes and Fields 1.0.0 Released!

The post Custom Metaboxes and Fields 1.0.0 Released! appeared first on WebDevStudios.

]]> If you’re not already familiar, Custom Metaboxes and Fields for WordPress is a WordPress drop-in plugin that will “create metaboxes with custom fields that will blow your mind.”  The Custom Metaboxes and Fields (CMB) library is a frequently used tool at WebDev, so I approached Jared Atchison about some possible improvements. Jared gave me commit access and I began maintaining the project, introducing new features and merging changes from the community.

On Wednesday, November 27th, we rolled out version 1.0.0 which contains several big-bang features that are sure to make your WordPress development experience that much easier. Several WordPress community members, and a few WDS members (Brian Messenlehner, Michael Beckwith, Corey Collins, and myself) had a hand in this release.

Here is a list from the 1.0.0 changelog:

• Added select_timezone type, a standalone time zone select dropdown. The time zone select can be used with standalone text_datetime_timestamp if desired. Props @dessibelle
• Added text_url type, a basic url field. Props @dessibelle
• Added text_email type, a basic email field. Props @dessibelle
• Added ability to display metabox fields in frontend. Default is true, but can be overriden using the cmb_allow_frontend filter. If set to true, an entire metabox form can be output with a new function:

  cmb_metabox_form( $meta_box, $object_id, $echo );

  Props @dessibelle, @messenlehner & @jtsternberg

• Added hook cmb_after_table after all metabox output. Props @wpsmith
• file_list now works like a repeatable field. Add as many files as you want. Props @coreymcollins
• text, text_small, text_medium, text_url, text_email, & text_money fields now all have the option to be repeatable. Props @jtsternberg
• Custom metaboxes can now be added for user meta. Add them on the user add/edit screen, or in a custom user profile edit page on the front-end. Props @tw2113, @jtsternberg

We hope you’re as excited for the possibilities with 1.0.0 as we are and we are already working on updates for version 1.0.1! If you would like to see a new feature or improvement feel free to contribute and submit patches on github. Also, the wiki page needs to be updated so if documentation is your thing, please feel free to jump in and update some docs!

Get Custom Metaboxes and Fields for WordPress is a WordPress on Github!

The post Custom Metaboxes and Fields 1.0.0 Released! appeared first on WebDevStudios.

]]> https://webdevstudios.com/2013/12/03/custom-metaboxes-and-fields-1-0-0-released/feed/ 0 7929