Reworking SearchWP’s Advanced Settings Screen – Part 1

The biggest user-facing change that’s coming in SearchWP 3.0 is a reworking of its Advanced settings screen. The last update to this screen was nearly three years ago and while it served a purpose then, it was showing signs of aging. While I’m a strong believer in decisions over options (albeit a bit more lax in the form of providing quite a lot of hooks to work with) I feel that the Advanced settings screen for SearchWP is both necessary and helpful.

Not all customers are experienced with development and comfortable implementing their own hooks, and SearchWP aims to be an asset to programmers and non-programmers alike.

Problem review

The Advanced settings screen does what’s on the tin; provides an interface to more advanced Settings/Actions in SearchWP.

I consistently take down feature requests from customers and also have a pulse on support tickets to find out how SearchWP can be improved over time. Some ‘advanced’ topics that continually came up that apply to this screen are:

• Improved stopword (common word) management
• Management of ignored terms as they relate to statistics
• Easier control over Shortcode parsing

The other overarching improvement to make is that of taking the code from a mix of PHP sprinkled with JavaScript to something that follows in the footsteps of the main settings screen update in version 2.9: Vue! 🤓

Planning

When I plan anything out I always start with simply thinking it through in my head. I look at what I like that’s there already and what’s working well, and just think through high level ways of solving the problem(s) at hand.

In this case I have a somewhat decent structure to work with in the form of the existing settings screen, so I plucked out what I like and don’t like about it.

What I like

• Actions and Settings are straight forward and carry the style of SearchWP and WordPress
• Customers are able to easily manipulate Actions and Settings
• Settings automatically updates/saves just by toggling check boxes

What I don’t like

• Significant, unnecessary white space
• Export & Import is structured poorly, feels (and looks) like an afterthought
• Settings check boxes automatically saving can introduce confusion when there’s latency

Given this pros/cons list I take some time to stare off into space and think about what it would take to restructure the screen to take into account the existing positives, resolve the existing negatives, and work in solutions for the new problems at hand. This process usually takes a few minutes but sometimes involves walking around and getting a cup of coffee just to get everything organized.

Then a quick (really quick) sketch. Literally pen on paper.

Part of me wishes it was more impressive than that, but it started as the little thumbnail with a checklist of things to add below it. As I sketched out the larger version I would check off new items that needed to be included. As you can see I got about 10% ‘done’ before I just… stopped. For me there wasn’t anything more to do. I had in my head the end goal and in the interest of time I jump right into code.

Building

I already had a build system in place for SearchWP’s main settings screen so I duplicated that and got to work.

▶︎ To be continued…