How I Develop WordPress Websites (Workflow)

Crafting an Efficient Workflow in WordPress Development

In the ever-evolving realm of web development, the term “workflow” frequently emerges as a central concept. However, if you’re a newcomer to the world of WordPress development, this may be a foreign term or concept to you. In essence, a workflow is the systematic process that you follow when working on a project. In this comprehensive guide, we will delve into my personal workflow, which is designed to assist novice developers in creating their own efficient processes. While my workflow is not the most elaborate, it has served me well and continues to evolve to meet my needs.

Understanding Workflow Tools

Before we dive into the intricacies of my workflow, let’s explore the essential tools and applications that form the foundation of an efficient WordPress development process. These tools are indispensable for any developer looking to streamline their work:

1. Sublime Text 3

Sublime Text 3 is a versatile and user-friendly text editor that I consider the best in its class. While some developers may prefer more powerful options like PHP Storm, Sublime Text’s combination of ease and power is hard to beat. It’s my text editor of choice, and I have no plans to switch to another anytime soon.

2. Sass

Sass is a CSS pre-processor that significantly enhances the speed and efficiency of writing CSS code. Unlike regular CSS, Sass must be compiled into a standard .css file (more on this later). I also utilize Compass with my Sass projects for its valuable mixins and other enhancements.

3. Codekit

Codekit is a game-changer for developers, offering a range of features that boost productivity. It’s a paid application that delivers features such as browser auto-refresh, built-in Bower for dependency management, and script and style compilation. While some of these features can be obtained independently and for free, Codekit combines them into a user-friendly interface that’s hard to resist.

4. MAMP

MAMP, which stands for Mac Apache MySQL and PHP, transforms your computer into a local server, enabling you to develop on your local machine. This offers advantages such as increased speed and isolation from the internet, making it an excellent choice for local development. MAMP integrates seamlessly with Codekit’s live browser refresh feature.

5. Git and GitHub

Git is a version control system that empowers you to track and manage changes to your codebase. While graphical user interface (GUI) applications are available, mastering Git through the command line offers more control and flexibility. GitHub, on the other hand, is a platform for managing Git projects, collaborating with other developers, and reviewing open-source code.

Navigating the Development Workflow

Now that we’ve covered the essential tools, let’s delve into the nitty-gritty of the development workflow:

1. Setting Up a Local WordPress Installation

For client projects, I always initiate a local WordPress installation using MAMP. After acquiring a fresh copy of WordPress, I remove unnecessary elements like outdated themes and the Hello Dolly plugin. The only item I retain is the latest Twenty XX theme as a fallback option in case of theme-related issues.

2. Adding Dummy Content

To kickstart the development process, I insert a few dummy posts and pages to work on. Rather than importing extensive test content, I’ve created my own import file that includes only a minimal amount of sample content. Eventually, all sample content is deleted to avoid cluttering the project.

3. Introducing Genesis

The real development work begins when I introduce a fresh copy of the Genesis framework. Over time, I’ve worked with various StudioPress child themes and even developed custom child themes from scratch. Currently, I’m in the process of creating a new version of my own starter theme, but Greg Rickaby’s Sass-ed version of the Sample child theme serves as a valuable starting point.

4. Streamlining with Codekit

Codekit plays a pivotal role in my theme development process. It automates tasks, such as browser auto-refresh, Sass compilation into minified CSS, and JavaScript file minification and concatenation. This results in a leaner and more efficient project, with optimized loading times due to reduced file sizes and fewer HTTP requests. In a future post, I’ll provide a more detailed breakdown of my development process for Genesis child themes.

5. Leveraging Git and GitHub

Throughout the development process, I make periodic commits to the project’s GitHub repository. Depending on the project, whether it’s a single theme, plugin, or a combination of both, each component receives its own repository. Git provides the version control, while GitHub serves as the central hub for managing the project and collaborating with other developers.

Syncing GitHub Repo with Live Installation

Recently, I’ve incorporated WP Pusher into my workflow. This plugin facilitates the synchronization of plugins and themes stored on GitHub (with BitBucket and GitLab also supported) with a live website. This means that I can maintain a live staging website for clients to review recent changes or effortlessly update the production environment by simply pushing changes to GitHub. For more details on why WP Pusher is a game-changer for developers, I’ve written a comprehensive review.

Migrating from Local to Live

As a project nears completion, the final step involves migrating it from the local development environment to a live server. This process used to be daunting, but it’s surprisingly straightforward. Here’s how it’s done:

• Export a copy of the database, open it in Sublime Text, and perform a find-and-replace operation to update links, ensuring they no longer point to “localhost:8888” or your local URI.
• Create a new database on the live server and import the modified .sql file.
• Edit the wp-config.php file to establish the connection with the new database and make any necessary adjustments to plugin and theme files.
• Upload all project files to the live server and commence testing.

Conclusion

In conclusion, this guide provides a comprehensive insight into my WordPress development workflow. While not every detail has been covered, the core elements that enhance my efficiency as a developer have been outlined. For newcomers to the development world, establishing a well-defined workflow from the outset can significantly alleviate the challenges of early work. Over time, you’ll refine your workflow to suit your unique needs and preferences, ensuring that your development process remains efficient and effective.