Responsive controls are a long-sought-after feature for the WordPress Block Editor. Changing a page’s design or layout based on a user’s device is a staple of modern web design. Yet, doing so in WordPress has typically required a third-party solution, such as a page builder. Thankfully, that’s changing.

The WordPress project is slowly but surely inching toward responsive block settings. Version 6.9 introduced the Block Visibility feature, allowing you to temporarily disable a block without deleting it from a post. WordPress 7.0 took it a step further by adding options to hide a block based on device.

Perhaps it’s a niche feature. But it’s also quite handy for targeting mobile or desktop users with specific blocks. And it’s also a gateway to more responsive controls landing in WordPress 7.1.

Today’s tip will show you how easy it is to show or hide a block based on a user’s device. Here we go!

Sample Project: Simplify a Hero Area for Mobile Users

Here’s a common scenario: Your website has a large hero area, complete with a high-resolution image, text, and a call to action (CTA). It looks great on a desktop device but is clunky on a phone. The image is too big, and there’s too much text for users to digest. What to do?

The responsive Block Visibility controls will make this a piece of cake. We’ll create two hero areas – one for desktop and another optimized for mobile. The result will be a better user experience for everyone.

Step 1: Create Desktop and Mobile Hero Areas

The first step is to create the two hero areas for our page. We’ll grab one from the WordPress Block Pattern library and see what we can do with it.

Our desktop hero area is beautiful on the big screen! It should also work well on tablets, such as an iPad. However, it may be overwhelming for mobile users.

Let’s simplify. We duplicated the desktop hero and made a few changes:

• We replaced the image with a cropped version that is optimized for smaller screens.
• We centered the text and CTA.
• We replaced the three columns of text with one, shorter passage.
• Finally, we tightened up the spacing to reduce scrolling.

The mobile hero offers the same immersive look without the extra bulk.

Step 2: Assign Hero Areas to Their Respective Devices

As of now, our page has two hero areas, each contained within a Group block. The next step is to set one of them to display on desktop/tablet devices, and the other on mobile. We’ll use the Block Visibility feature to make it happen.

Desktop/Tablet Devices:

• Click on the Desktop Hero block we created.
• Click on the Options menu (⋮) and select Hide Block.
• Choose the Hide on Mobile option.
• Click the Apply button and save the page.

Mobile Devices:

• Click on the Mobile Hero block we created.
• Click on the Options menu (⋮) and select Hide Block.
• We’ll choose two options this time: Hide on Desktop, Hide on Tablet
• Click the Apply button and save the page.

You may notice that the mobile hero no longer displays on the Block Editor canvas. That’s the desired result, as it won’t be in the way when working in Desktop preview mode.

Switch to Mobile preview mode, and you’ll see the opposite effect. The desktop hero is hidden, allowing the mobile version to take over. You can edit these blocks when in the appropriate preview mode.

Note that you can also view and edit these blocks using the Document Overview (List View) feature (Shift+Alt+O). Select the block, click on the Options menu (⋮), and select Show from the menu. You can hide it again once you’re finished editing.

Oh, and be sure to test on different devices! It’s not enough to shrink your desktop’s browser window. You can use your browser’s dev tools to emulate a mobile device if you don’t have one handy.

Use Different WordPress Blocks on Different Devices

It’s often the little extras that make the biggest difference. Targeting different devices via the Block Visibility feature is a prime example. Its release didn’t draw much fanfare. However, it makes WordPress more flexible for designers.

Before WordPress 7.0, we’d have to work around this limitation. That could mean installing a specialized plugin or writing custom CSS rules in a theme. Now, we’re only a few clicks away from choosing which blocks display on a given device.

The feature saves us time, improves the user experience, and won’t hog server resources. Most of all, it’s a sign of things to come for WordPress.

The post How to Hide WordPress Blocks Based on Device appeared first on Speckyboy Design Magazine.

WordPress websites seem to grow more complex each year. We add a multitude of plugins and write custom code. And now we’re adding various flavors of AI to the mix.

It’s risky to apply these features to a production website without proper testing. As such, a staging site is crucial to ensure everything works. This enables you to catch bugs before they impact users. It also allows you to experiment with new features.

What is a staging site? It’s a copy of your production website that lives elsewhere. Common examples include a separate install on your web host or a local installation. The content doesn’t necessarily have to match. However, the site’s theme and plugins should be included to ensure an apples-to-apples comparison.

This guide will introduce you to how staging sites work, ways to implement them, and tools for building them. Soon, you’ll have everything you need to set up the perfect testing environment.

---

Does Your Web Host Offer Staging Environments?

Before we go any further, note that many web hosts offer staging environments. Some allow you to clone your production site with a click, making the process a piece of cake.

Beyond the convenience of this setup, there are a few other advantages. The first is that the hosting configuration is the same. You have the same server architecture, and can usually run the same versions of PHP and MySQL (or MariaDB, depending on what your host offers).

It’s also possible to change versions when needed. You can use this functionality to test PHP upgrades and make any necessary adjustments.

Another big plus is that you can often sync your websites across environments. This is a great solution for launching a redesign or shipping new features.

Best of all, hosts do the behind-the-scenes work to ensure your staging site works. They’ll assign a temporary URL, saving you from performing a search-and-replace in the database.

A host-based staging site is usually the best option. It’s easier and has all the features you’ll need.

Local Hosting Tools

Hosting your staging site locally is another worthwhile option. You get the speed and privacy of running WordPress on your device. Even better, there are tools for spinning up new sites in a jiffy. From there, you can use a backup plugin to copy your production site and import it locally.

Here are a few tools that you can use to build a local staging environment:

Studio

Studio is a free and open-source local development environment from WordPress.com (a sponsor of Speckyboy). The app uses WordPress Playground to help you create new sites on demand with no dependencies. If you use WordPress.com or Pressable for hosting, you can also sync your local sites.

Local

Local offers one-click WordPress installations and a host of other goodies. You can use SSH or WP-CLI to manage your sites via the command line, create live links to share with others, and hot-swap PHP versions for testing. The app also syncs with sites hosted on Flywheel and WP Engine.

MAMP and XAMPP

We’ll lump these two apps together, as they are similar in scope. Both are local server environments that work on multiple operating systems. XAMPP will install an Apache/MariaDB/PHP/Perl stack. MAMP lets you choose from Apache or NGINX, along with a MySQL/PHP/Perl/Python/Ruby stack. Consider them both a bit more hands-on than the other local apps in this roundup.

WordPress Staging Plugins

Finally, we’ll introduce you to some plugins that will help you create a staging environment. Some will create a separate WordPress install on your existing host, while others connect to third-party services. You’ll also find plugins that pack up your site so that you can upload it elsewhere.

WP STAGING

WP Staging provides flexibility for how and where to create a staging environment. The plugin will clone your site to a subdirectory on your existing host. But you can also download a package to use locally or remotely. It also doubles as a daily backup plugin.

WPvivid

Create a custom site backup with WPvivid and migrate it to a subdirectory on your web host or other remote server. You can even send your site’s files to cloud services like Amazon S3, DigitalOcean Spaces, Dropbox, and Google Drive. There’s also a 1-click restore feature for rolling your site back to a previous version.

InstaWP Connect

InstaWP is a WordPress cloud service for rapid site building and deployment. You can use the InstaWP Connect plugin to copy your production website to the platform. From there, you can sync content between environments – perfect for testing new items before launch. Note that you’ll need an InstaWP account to use their service.

BlogVault

You can use BlogVault to create a staging backup to their cloud service. Make changes on staging and merge them back to your production site. The plugin also supports migrating your site to another host and will create incremental backups as you make changes. Note that BlogVault offers a 7-day free trial – you’ll need to pay for long-term access.

A Better Way To Test WordPress

A staging environment is a must-have for any mission-critical WordPress website. It’s a safe place for testing, troubleshooting, and experimenting. In addition, it provides peace of mind in knowing your work won’t negatively impact users.

The tools above will give you a great start, but some go the extra mile. Features such as site syncing and backup restoration make your job that much easier. The more automation you can bring to the process, the better.

Don’t take chances with your live website! Staging environments have never been easier to build and use. Find the tool that fits your needs and create your own personal safety net.

The post Best WordPress Staging Site Tools & Resources in 2026 appeared first on Speckyboy Design Magazine.

Portfolio websites are a key part of any creative professional’s branding. They’re a place to showcase your work and share your expertise with prospective clients. On a personal level, they’re also a nice way to look back on your past achievements.

WordPress is the perfect tool for creating an online portfolio. The content management system (CMS) makes it easy to add new projects. What’s more, its theme ecosystem means you can build a beautiful website in less time.

We’ve rounded up the top free WordPress themes for your portfolio. Block themes are a particularly growing segment. They empower you to create custom layouts within your web browser – no page builder necessary. However, we also included some outstanding classic themes. After all, WordPress is all about giving us options.

Read on to find a WordPress theme that makes your work shine!

---

---

Dark Mode Portfolio

Free to Download | Demo | WordPress Hosting

There’s something about a dark color scheme that makes your creative work stand out. Dark Mode Portfolio is a minimalist block theme that lets your images do the talking. Think of it as a LinkTree alternative mixed with the power of dozens of custom block patterns. This theme gives you the flexibility to build a unique website. Oh, and it also includes light color schemes if you want a brighter aesthetic.

FSE Portfolio

Free to Download | Demo | WordPress Hosting

FSE Portfolio offers a colorful way to bring your projects to life. This block theme includes bold typography and patterns with built-in animations. The movement is tasteful and won’t overwhelm visitors. You’ll also find beautiful layouts for listing blog posts and calls to action. A multicolumn footer is there to share your social profiles and secondary navigation.

Soundscape

Free to Download | Demo | WordPress Hosting

Musicians and performance artists will love Soundscape. This block theme includes patterns for media-rich headers, hero areas, and handsome sidebar layouts. Speaking of sidebars, the theme uses a left-hand navigation menu that lets your content take center stage. The blog layout includes room for standout featured images.

Mobiki

Free to Download | Demo | WordPress Hosting

Mobiki is a block theme for those who want to keep things simple. It features a mobile-first approach and includes a unique sticky footer menu on small screens. The included block patterns can be used in a one-page or multipage configuration. There’s no unnecessary fluff here, just the basic ingredients of a winning portfolio website.

Vividone

Free to Download | Demo | WordPress Hosting

Movement is a great way to grab a user’s attention, and Vividone uses it to great effect. The theme’s home page comes with a dual carousel layout to showcase your projects. You’ll also find on-scroll animations that add a touch of class to your portfolio. It’s all you need to start building a stunning one-page site.

Midnight Blogger

Free to Download | Demo | WordPress Hosting

Midnight Blogger features organic color schemes, bold typography, and a spacious layout. The 12+ block patterns range from a contact section, a multicolumn blog post listing, and a team roster. There’s also a selection of beautiful cover images to help you make a strong first impression.

Creative Minimalist

Free to Download | Demo | WordPress Hosting

Your portfolio should do more than simply promote your work. It should also reflect your personality. Creative Minimalist provides a starting point for those who believe less is more. It features an artsy aesthetic that is anything but loud. Perfect if you’d prefer to let your work speak for itself.

Artist Art Gallery

Free to Download | Demo | WordPress Hosting

Here’s a theme that combines eye-catching design with animation to create a beautiful home for your projects. It starts with the old-school photo collage hero section – a great place to add your most impactful images. There’s also a slick timeline pattern that comes together as you scroll. Every detail has been considered, allowing you to focus on content.

Adas Personal Portfolio

Free to Download | Demo | WordPress Hosting

Adas Personal Portfolio is a great fit for those who want to build an online resume. The multicolumn layout offers a complete solution for introducing yourself to prospective clients. The theme was developed with Elementor in mind, making it easy to add your own custom touches.

Freelance Portfolio

Free to Download | Demo | WordPress Hosting

Smart use of color is part of what makes Freelance Portfolio a standout theme. Its combination of grayscale hues with rainbow accents adds creative flair. The overlapping hero area included with the package is also an attention-getter. It’s proof that you can demonstrate professionalism and your fun side.

WP Portfolio

Free to Download | Demo | WordPress Hosting

WP Portfolio features a tidy grid layout that adapts well to any screen. It’s a no-fuss theme for anyone who wants to share their work in an easy-to-navigate interface. Each grid item includes a hover effect that can house a caption or post excerpt. You’ll also find nested sidebar navigation and a bit of a brutalist vibe.

Best WordPress Portfolio Themes at a Glance

The Perfect Home for Your Projects

Your creative portfolio deserves an outstanding website. The themes on this list will help you build one in less time without compromising.

Most of these themes include prebuilt design components, such as block patterns. They’re handy for quickly adding common features like photo galleries, testimonials, and blog post listings to your site. But it doesn’t have to end there.

You can also go above and beyond by customizing these components to match your personal brand. Unlike the old days, you aren’t stuck with a default look and layout. That’s the beauty of WordPress blocks – even if you aren’t using a block theme.

Now that you have a starting point, it’s time to build the perfect home for your projects!

---

The post 10+ Best Free Personal Portfolio WordPress Themes in 2026 appeared first on Speckyboy Design Magazine.