Mike Auteri

Author: Mike Auteri

  • Reflecting on WordCamp Montclair 2025 and What’s Next

    Reflecting on WordCamp Montclair 2025 and What’s Next

    Every year, WordCamp Montclair reminds me why this local community matters, and this year was no exception. I woke up this morning to a flurry of LinkedIn tags, posts thanking everyone who helped make this event possible. It really warms your heart to know people enjoyed something you put so much of yourself into.

    Navigating the fallout from WordCamp US 2024 and what it meant to the broader WordPress community made this year extra challenging. Many organizers (including myself) were already feeling the signs of burnout. There were more than a few times when we wanted to throw up our hands and walk away.

    I’m glad we didn’t. It was exhausting leading up to the event (as it always is), but once you’re there, something shifts. At least for me. I feel calm but sharp, catching up with people I haven’t seen in ages, connecting with familiar faces, and watching everything we built come to life. By then, the camp is what it is. You’ve done the work, and all you can do is let it unfold.

    I only made it to three presentations, but I heard that all the talks were fantastic. I’m looking forward to watching the sessions on WordPress.tv once they’re uploaded.

    So what’s next?

    There’s talk of WordCamp NYC returning in 2026, and many of us on the Montclair team will likely take a year off from running our camp to support theirs. In the meantime, we’ll continue growing the WordPress Montclair Meetup and offer space for learning, connecting, and supporting one another.

    I’m also excited about the new Campus Connect initiative from the WordPress community team, which plans to use GatherPress to help create workshops and events for hands-on WordPress training from experienced WordPress professionals and experts to college students.

    I’d love to bring it to Montclair State University. GatherPress has long been one of my main focuses, and I’m really interested in how these two efforts might support and strengthen each other. If Campus Connect takes off, I think it could offer the same kind of purpose and fulfillment that WordCamp Montclair has given me over the years.

    Thank you to everyone who attended, organized, sponsored, volunteered, presented, and supported WordCamp Montclair. It takes a lot of people to make something like this happen, and I’m so grateful for each of you.

  • Boost Your Productivity with Vim: Essential Key Combinations for Coding Efficiency

    Boost Your Productivity with Vim: Essential Key Combinations for Coding Efficiency

    About 12 years ago I forced myself to get comfortable using Vim. It took about a week before I felt productive using it in my day job. Now I don’t think I can code efficiently without it.

    At first I was just writing code in the terminal’s Vim (seriously). Quickly I moved on to using MacVim. A bit later I moved onto using Vim key mapping plugins for PHPStorm and VS Code. Both key mapping plugins are pretty good and keep my Vim skills sharp.

    Much like typing in general, the keystrokes become muscle memory. Half the time, I have to think hard about the key or key combination I’m entering to do a thing in Vim when I’m teaching others.

    Now I’m by no means a Vim expert or elitist. In fact, I even cheat a bit often times (god forbid I ever use the trackpad). But I swear Vim makes you way more productive. The speed in which you can move around a document with just a few key strokes saves ever so many precious seconds in your day. Trust me, they add up.

    So for this post, I’m going to share with you the key combinations that I find are the most important (at least to me). Maybe it will compel you to give Vim a real try.

    :w :q :wq (write, quit, write & quit)

    The big joke is once you’re in Vim you can’t get out. Well, this is how you get out. And save your file too.

    i (insert)

    Insert mode. By the nature of Vim you mostly just move around the document. Once you want to add something, you type i and start typing what you want. In my case, it’s usually code.

    esc (escape key)

    Quickest way to exit insert mode and start moving around the document again. You can also use ctrl [ but I find that awkward as hell.

    u and ctrl r (undo and redo)

    Simply put u will undo and ctrl r will redo a change you made. Do it again and again for multiple undos and redos (there is a limit though).

    dd or D (delete or cut)

    Quickly delete a whole line. Also stashes that delete and you can paste it with…

    p (paste)

    Paste what you have stashed.

    v and V (highlight)

    Start with v (for inline highlighting) and optionally end with V to select a whole block of text. If you hit them one after the other without moving (or just moving left and right) it will highlight the entire line you are on. Commonly you’ll use this with dd, D, or…

    y (yank or copy)

    Copy what you have highlighted or if nothing’s highlighted, the line you’re on. Then just paste it with p.

    h j k l (right, down, up, left)

    I started off with the arrow keys, but once I switched to h j k l and got used to it, I moved around the document a lot faster. I don’t even notice it anymore. I actually had to go into a document to look up which keys do what because I don’t even think about it. If you’re in insert mode and don’t want to exit it, sure, use the arrow keys. Probably better to just hit escape, but you do you…

    5h 5j 5k 5l (5 spaces to the right, down, up, or left)

    Want to move around faster? Type a number and h j k or l to move that many spaces in that direction. 5 here is just an example… use any number.

    :5 5gg 5G (any number, but this example will take you to line 5)

    Know what line you want to get to? Type : then the number of the line and hit enter. You’re instantly transported there. You can also use 5gg or 5G. I often forget those exist and usually use : and the number. Again, any number works that’s a line number in your document. The 5 here is just an example.

    gg and G (top of document and bottom of document)

    Quickly get to the top of the document with gg and the bottom of the document with G. You’ll be amazed how often you actually use these key strokes.

    %s/foo/bar/g (search replace)

    The example above will replace every instance of foo with bar throughout a file. Much faster than using what’s built into your IDE. Also you can use regular expressions here. foo and bar here are just examples. Use any search and replace text.

    $ and ^ (brings curser to end of a line and start of a line)

    Quickly move to the start of the line you’re on, or the end. Works great with v.

    % (move to matching characters)

    Default supported pairs include () {} and []. There’s also plugins that support markup tags like HTML/XML tags, which is pretty handy.

    :/foobar (find a word)

    I use this to just quickly find a word in the document. Along with that use…

    n and N (next and previous)

    If you’re searching for something, use n to go to the next match and N to the previous match.

    There is SO much more to Vim than this, but I found these are my goto essentials to being productive (though I may add more to this post as I think of them).

    And like I said, I’m no expert. Just some guy that has been using Vim for 12 years, but never really got any better at it in the past 11 years. That said, if you get used to these basic keystrokes, I’m pretty certain after a week (maybe 2) you will feel much more productive. And heck, cheat a little (no one’s watching). Just remember, a few Vim keystrokes goes a long way to saving time and being more productive.

    If you have some favorite Vim keystrokes (or want to mention an obvious one I missed) let me know in the comments.

  • Things I’d like to see improved in the WordPress block editor

    Things I’d like to see improved in the WordPress block editor

    So far this has been my only contribution to the Gutenberg project. Though there’s been several other things I’ve had my eye on improving as I continue to get better at understanding, using, and building WordPress blocks.

    Below is a short list of random things I’d like to improve (or see improved). I haven’t checked if any of these have been brought up or are currently being worked on (yet), but I’ll keep this post updated with my progress and findings.

    Drum roll, Here’s my list…

    Retain HTML block preview state on save.

    This one bothers me a bit and is also a pretty easy fix. In the HTML block, you can paste raw HTML code and then preview it as the rendered HTML. However, on save and refresh, you see the raw HTML render in the editor again rather than retaining the preview you had set when you saved.

    Retaining the preview on save offers a better display. Also, people that are not too tech savvy will likely freak if when see (unavoidable) raw HTML in the editor, which could have a negative impact on their feelings toward the editor and the experience.

    12/31/22 Update: PR has been created!

    Ability to preview a shortcode block.

    Much like HTML block, the shortcode block should also have a preview mode (that maintains state like I mentioned as a shortcoming of the HTML block).

    Shortcodes may have fallen out of fashion, but they are still a part of WordPress, and will be for a long time. They are super simple to create that it’s not a surprise that many developers still use them over blocks in some cases.

    I understand that the Gutenberg team only wants the most basic support for shortcodes while encouraging developers to write blocks, but it seems like a disservice to not provide better tools to folks that continue to write, and those that must support, shortcodes for their sites in a Gutenberg what-you-see-is-what-you-get world.

    I did start writing a plugin that replaces the shortcode block with a Better Shortcode Block, but it has been a several months since I’ve worked on it. This plugin not only has a preview mode that maintains state, but also improves the whole shortcode editorial experience and makes it much more block like.

    Easily change the color of a link.

    This one is sort of annoying and a little more complicated than the first 2 fixes I’ve brought up (mostly around user experience). There’s really no good way of changing the color of a link and its states (like hover). Best you can do (or so I’ve found) is use highlight, but that still creates a weird hover where the color of the underline is different than the color of the text. It’s also a bit of a weird workflow, and still quite limiting. And none of this is actually the correct way to do things, it’s just a workaround…

    I’ve run into some legit instances where this was needed. I’m currently getting around it with some utility CSS classes that I apply to the paragraph block (or just editing the block HTML). But for most users this is not a solution. For the UX, I think adding a tab to the overlay to manage colors and decoration for link states would solve this issue and add the right amount of flexibility.

    Break points for the Spacer block.

    This one I plan to submit to Genesis Blocks first, though I think a lot of the features they added for responsiveness belong in core. StudioPress has done a great job adding responsive tools to core blocks. Just take a look here.

    To expand on this, the Spacer block should also have responsive sizing capabilities. In many cases, the size you make a spacer on desktop is too much for mobile, so being able to control the size of your space between devices is pretty essential.

    That’s my list. Again, I’ll add updates as I progress through some of these improvements. If you have any thoughts on these or other improvements you’d like to see, please leave a comment.

  • How to customize WebPack config in modern WordPress block development

    How to customize WebPack config in modern WordPress block development

    I find myself continuing to dive deeper and deeper into WordPress block development, and the frustrating part is a lack of documentation. So here is a quick post on something I struggled with for a little a bit in the hopes it helps someone else.

    block.json has some pretty cool features like render, style, viewScript, etc. Team this up with @wordpress/scripts to handle transpiling and the process is quite simple… until you want to add entry to a custom webpack config file to extend some capabilities.

    The problem is that if the transpiler finds any block.json files it completely bypasses your root index.js file, which me and others used as the entry point. This wouldn’t be a problem if you just extend your custom webpack.config.js. This is how I was writing it when I first started.

    /**
 * External Dependencies
 */
const path = require('path');

/**
 * WordPress Dependencies
 */
const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');

module.exports = {
	...defaultConfig,
	entry: {
		...defaultConfig.entry,
		index: path.resolve(process.cwd(), 'src', 'index.js')
	},
};

    Problem here is that running this removes index.js and index.assets.php from all your blocks that use block.json in the build directory, but why? I found that when I removed entry and transpiled again, the index.js and index.assets.php files came back. So it was something with that. It looked correct though. I used defaultConfig.entry with a spread operator like I always did because every documentation I read said to do it that way. Because defaultConfig.entry is an object, right?

    Nope! It’s a function here! If you console.log(defautConfig) you’ll notice entry looks like this:

    entry: [Function: getWebpackEntryPoints],

    If you call that function you’ll see all the entry points in an object for your blocks. That means all you have to do in your webpack.config.js file to extend entry is change ...defaultConfig.entry to ...defaultConfig.entry() like so.

    /**
 * External Dependencies
 */
const path = require('path');

/**
 * WordPress Dependencies
 */
const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');

module.exports = {
	...defaultConfig,
	entry: {
		...defaultConfig.entry(),
		index: path.resolve(process.cwd(), 'src', 'index.js')
	},
};

    Now everything works. I’m posting this because most documentation says to write it ...defaultConfig.entry, because entry is a JavaScript object. But since we are extending with the spread operator, we need to call the function to get the actual object.

  • WordCamps and defining “local” after COVID

    WordCamps and defining “local” after COVID

    When it comes to regional WordCamps, the focus is on a speaker selection that is a majority local. 80/20 rule where the 80% are folks that live in the area of the WordCamp. WordCamp Montclair (the camp I’m an organizer of) defines this as the tri-state area: New Jersey, New York, Pennsylvania… the latter two being New York City and Philadelphia areas.

    In the past this was easy, as we had a local community that met in-person at our meetup space in Montclair, NJ at the United Way building.

    When COVID hit everything went virtual. Instead of the United Way building, we scheduled monthly meetups on Zoom. While the pandemic was very challenging, we also found opportunity. We communicated more with each other over Slack, we worked with and supported other NJ WordPress meetup groups, and as a result our community grew… a LOT. And a good deal of that growth was outside of our tri-state area. People saw we were doing things virtually, and they joined in.

    Two years later we have folks that attend our monthly virtual meetups from all over the country and world. Many of whom are also active on our Slack account.

    WordCamp Montclair 2022 is planned for June 25, 2022 and will be in-person. This got me thinking about how I now see our “local” community today. I raised this in a few channels and got some interesting thoughts.

    In my mind, if you are active in our community by attending meetups and engaging with folks in our Slack, then you are also in our community, and if you submit a talk to our WordCamp, I would consider you local, regardless of where you physically live.

    Many agreed with this new definition of “local” for regional camps that were active during the pandemic. However, one very important response that is worth noting is that another reason behind the 80/20 rule also involves travel: How will the speaker be getting to your camp?

    Having more speakers physically close to your camp makes it less risky that the speaker will cancel due to travel issues. So this is definitely something to consider as well.

    So while keeping things physically local is still important, also think of people who are part of your community that may not meet the old definition of local.

  • How to run a successful Help Desk meetup

    How to run a successful Help Desk meetup

    One of the most popular meetup formats is the Help Desk. A good Help Desk is a huge draw for any local meetup. If you are looking to grow your group, I encourage you to schedule one. They are also quite easy to set up. All you need is a space with reliable wifi and a few folks with some expertise!

    Running a successful Help Desk, however, can be quite challenging, especially when you draw lots and lots of people. As someone that has run lots of Help Desks (and made lots of mistakes), let me share a few pointers to help you be successful.

    Introduce the Helpers

    If you skip this step, you will have a free-for-all on your hands. I start every Help Desk meetup asking everyone who wants to be a helper to stand up, introduce themself, and tell the group what they can do to help others. I also mention that to be a helper does not require you be a master coder or an expert in a field. Simply knowing how to do something and helping someone solve a problem is enough. This can be coding, SEO, blogging, social media, content creation, etc.

    I also try to encourage people that have started gaining knowledge from attending Help Desks regularly to be helpers. This goes a long way to helping people gain confidence in their skills, give back to the community, and be inclusive to all.

    Once everyone has been introduced, the folks that are looking for help probably have a good idea who the best person is to get help from. This really does keep things moving smoothly.

    Keep Things Safe

    This especially applies to anyone that is touching a website. Make sure your helpers know to ask some very important questions to the folks that are receiving help… like, is this your website or a client’s website? Do you have a local or staging environment we can try things on? Do you have backups of the website?

    Things can go very wrong very fast, so it is best to err on the side of caution. Make sure all your helpers know this, so you do not have a mess on your hands.

    Help Everyone Get Helped

    There’s nothing worse than attending a Help Desk meetup and not being helped. You will have some people that will do everything they can to flag someone down to get help, but you will have others that will sit quietly, never speak up, want help, and never receive it. It is your job as an organizer to help everyone that wants help to get it.

    To do this well, keep track of who your helpers are and what they can help with. If you see someone that is not being helped (or someone you suspect has not been helped), go over and ask “Has anyone helped you yet?” If they say they need help, ask them to explain the problem in a couple of words. With that information, find the right person that can help them and get the person that needs help on their radar.

    Be aware that some helpers will stay with the same person for the duration of the meetup if left unchecked. Try to limit the time a helper spends with a single person as this can lead to excluding others and supporting only a few. It is important to encourage helpers to make the rounds. Especially your more experienced helpers.

    Depending on the breakdown of helpers to folks that need help, you may want to adjust your approach. For instance, if you only have a few helpers and lots of folks that need help, you might want to limit things to 5-minutes for each person until everyone has received some level of help.

    You Cannot Solve Everything

    Questions at Help Desks run the gamut. Some problems can be solved quickly, but others cannot. It is important to set expectations. Everyone that is a helper is a volunteer and will do the best they can within reason. Sometimes it is important to remind people that are being helped that their problem might be out of the expertise of your helpers, or they might need to pay a developer to do what they are requesting.

    Virtual Help Desk

    Approaching Help Desk in a virtual environment (like Zoom) can be very challenging. Many of the things mentioned above like introducing helpers will keep things orderly, but I would say utilizing breakout rooms with a helper or two in each should be your approach.

    How many breakout rooms will depend on how many people are in attendance, and how many helpers you have. I have found 10 people in a breakout room to be the limit before things can feel a little chaotic.

    The idea is to keep things small, so folks do not get lost in the crowd. As an organizer, you should move between breakout rooms and ensure folks are happy and getting helped.

    Also, if your group has a Slack account, I would encourage creating a #helpdesk channel where people can ask their questions. Especially if you decide a virtual Help Desk meetup is too much work.

    Final Thoughts

    As your group grows, you will be amazed at how popular your Help Desk meetups become. It can feel overwhelming and chaotic at times. That is why it is very important to go in with a process, so everyone has a positive experience, feels they were helped, and knows they belong.

  • How to protect your WordPress site from problematic code in the_content

    How to protect your WordPress site from problematic code in the_content

    By default, WordPress lets you write basically anything in the content of a page, post, or custom post type. When you write or see the_content like this in a WordPress template:

    <?php the_content(); ?>

    That’s likely allowing any code through. Even content that could be problematic. Problematic code would include raw iframes and JavaScript scripts. For example, let’s say you wrote this in the text tab of the classic editor or in the custom HTML block in Gutenberg.

    <script>alert('here');</script>

    When you save that post and viewed it, you would see a JavaScript alert pop up that says here. That is an innocuous example that is maybe just annoying. But let’s say some admin or editor credentials are compromised and a hacker writes JavaScript that could exploit the viewer in some way. How can you defend against that? Here is a simple PHP script you can add to your site to remove any scripts or iframes from the content, but will not effect embeds and shortcodes which may have iframes or scripts:

    function please_sanitize_the_content( $content ) {
	return wp_kses_post( $content );
}

add_filter( 'the_content', 'please_sanitize_the_content', 1 );

    This filter on the_content utilizes the function wp_kses_post which will only allow HTML that WordPress deems safe. We are putting it at priority 1 (that’s what the 1 means in the add_filter function) so it runs really early and doesn’t effect embeds or shortcodes that could have scripts or iframes that your site allows.

    In addition you can also include this line if you are using the Advanced Custom Fields plugin:

    add_filter( 'acf_the_content', 'please_sanitize_the_content', 1 );

    This is a similar filter to the_content but is for Advanced Custom Fields rich editor fields.

    Also note… you can also set the disallow unfiltered HTML constant as such in wp-config.php to ensure your content is clear of malicious scripts and iframes.

    define( 'DISALLOW_UNFILTERED_HTML', true );

    However, this method is not retroactive to content that has already been saved to the database, and it also removes the Additional CSS feature in the customizer (which I don’t love, but find useful at a moment’s notice).

  • WordCamp Montclair 2020 Promo Videos

    For those that aren’t aware, I am lead organizer of WordCamp Montclair 2020, which is happening May 30-31st. This past Friday myself and 2 other organizers (Eileen and Howard) went to our venue at Montclair State University to shoot some short promo videos. This was Eileen’s idea, and I thought it was a really great way to show folks what to expect.

    This is only the second WordCamp Montclair. Last year we held it at our meetup space at The United Way. While the space was inexpensive, it was also lacking in features… like air conditioning and reliable WiFi. In contrast, our venue this year is a state-of-the-art, 50-million-dollar building (with AC and great Wifi, of course). It will include professional AV, a livestream, live captioning, and monitors in the lobby area broadcasting the current session. While I still want to maintain a very local feel, I also want to highlight the major and very professional improvement we are making this year.

    Granted, Howard and I are by no means professional actors. And yes, these videos are meant to be pretty cheesy. What I hope to convey is the really amazing venue we are holding our WordCamp in this year. I hope folks watching this are enticed to sponsor, speak, and attend WordCamp Montclair 2020!

  • Top 10 Tech Talks

    Top 10 Tech Talks

    So far in 2020 I’ve submitted talks to two WordCamps that are happening in the next few months. The talk I submitted is similar to the one I gave at WordCamp NYC in 2019, but with the plan to tighten it up a bit and expand on just one of the topics that I feel I can really speak to.

    I’ve been finding it difficult coming up with new ideas for talks, and brought this up to my manager the other week, who then tasked me with 10 different talk ideas that I feel I could give. He pointed out that my white board was blank and I should use that to get my thoughts out.

    I’m not sure if it was being tasked with this or something else, but I found I could quickly come up with some decent ideas if I just set aside some time to think about it. So far, this is what I have. Maybe something here will actually become a talk I could submit. We will see.

    Gutenberg: Locked & Loaded

    In some of my spare time I’ve been working with a few others to build a better Meetup platform in WordPress. There’s more to talk about there, but I’ll save that for another post. While working on this, I’ve been getting my feet wet with Gutenberg. Mostly, I’ve been focusing on custom post types with predefined layouts and blocks that are locked in place. I think as I explore and learn, there may be a talk here.

    Debugging WordPress

    Something I could probably get better at myself, but I do have a working knowledge of Xdebug, Charles Proxy, Chrome Dev Tools, et al. Some other neat tools could include GA Debug, Tag Assist and other tools specific to a certain aspect of web development.

    Learning Development Later in Life

    Some don’t know this, but I changed careers when I was 30 years old. I didn’t go back to school, but I did take a lot of online courses, went to a lot of Meetups, and many late nights of freelancing and practicing my craft. This talk would be a story of my journey, and maybe it could inspire others to take the leap.

    Deep Dive into Google Analytics

    More than just plugging the UA code snippet in and calling it a day. This talk would explore the Google Analytics API including custom events, custom dimensions, and so on to see the bigger picture of what’s happening on your site.

    Spaghetti to Spectacular: Steps to Improving Code Quality

    This talk would discuss the approach I would take to improving code quality of old code you have running in your application. Things like unit tests, code sniffers, and how to go about refactoring and breaking up functions that do too much.

    View the Source, Luke

    I have a friend who likes to say this. Basically, a look under the hood and learn how WordPress works. Reading code helps you get better and figure things out. Not everything is in the codex, but the code always tells you what you need to know. Hell, you’re sure to find something neat that’s not documented at all. I’ll use some examples of neat things and interesting bugs I solved from poring over core code.

    OOP, Yeah You Know Me

    This talk would focus on writing object-oriented code in the context of WordPress. I would cover some popular patterns, scope, namespaces, and new features that have been made available in more recent versions of PHP.

    Introduction to Unit Tests

    I would focus on PHPUnit since I know that best and look to cover what to test, code coverage, and approaches to testing code.

    WP-CLI for Fun & Profit

    I’ve done quite a bit with WP-CLI in the last 7-8 years and even did a lightening talk 6 years ago on it. Maybe I can come up with a full length talk on some of the interesting problems I’ve solved using WP-CLI both using the built in API and expanding it.

    Introduction to Genesis Child Theming

    I like Genesis and have done quite a bit with it. Genesis has its own way of doing things that leans heavily on WordPress actions and filters. I know a lot of folks have trouble getting started, so maybe a talk on the basics would help.

  • TIL: comma-separated terms

    TIL: comma-separated terms

    A good friend of mine emailed me today with a WordPress question:

    we have a url like /category/term1/ that we’re using to filter on stuff

    If I do get_query_var(‘category’) it will properly return ‘term1’

    If we have the url like /category/term1+term2/

    get_query_var(‘category’) still only returns ‘term1’… do you have any insight as to why?

    Thanks

    I didn’t dig into this too deeply, but found the posts returned sort of curious. It returned term1 only if term2 was a valid term. If say you wrote /category/term1+foobar/ and foobar was not a valid term, then no posts were returned. I tested this merely by seeing what the browser returned from my own blog. You’ll notice https://mikeauteri.com/category/code-snippets+wordpress/ will return just posts in the category term code-snippets (wordpress is also a valid term on my blog), however, https://mikeauteri.com/category/code-snippets+foobar/ will return nothing (foobar is NOT a valid term on my blog).

    Then, just for the hell of it, I tried using a comma instead of a plus… and it did exactly what my friend was looking to do.

    So https://mikeauteri.com/category/code-snippets,wordpress/ will return all posts for both code-snippets AND wordpress. If you add an invalid term (like foobar) it will just be ignored.

    Anyway, pretty neat 🙂