Introducing…Blog XChange! Contribute Your Knowledge To Our Blog And Get Hero Points Plus Links To Your Site

Featured Imgs 29

Are you looking for great tips, tutorials, and hacks from experienced web developers to take your skills to the next level and help you solve client problems faster? Well, so are we! That’s why we are launching The BLOG XCHANGE!

WPMU DEV Members Blog XChange
Chun-chun-chun-chun…Blog XChange! (Members Only)

tl;dr – The Blog XChange is a new initiative for WPMU DEV members aimed at providing better engagement with our member community by focusing on the content that matters most to you. Help us to help you and we’ll reward you with Hero points and links to your site.

Blog XChange…What The Heck Is That??

Here at WPMU DEV’s secret content lab, we are always searching for new blog content ideas.

You would think that hiring the most brilliant writers in the WordPress universe would result in endless blog content, but alas, this isn’t so.

Which is ironic, I know, given that one of us is the author of a best ok-selling book called “Infinite Content Creation (How to Never Run out of Content Ideas for Your Blog).”

The WPMU DEV blog, however, is a different beast. We don’t publish fluffy filler content about WordPress. We know that our audience (yes, YOU!!) would never stand for it.

We know that you expect us to write articles and tutorials with substance. Beefy content (or tofurkey if you prefer non-meaty adjectives) that you can apply in your business to improve not only your skills but also solve real challenges for your clients and deliver them better and faster websites that will help them get results.

wpmu-dev-blog
Help us make our blog your blog!

Writing blog content targeted to your needs requires us to spend a lot of time researching previous post comments, scouring our members’ forum, analyzing analytics, doing keyword research, peeking into our competitors’ sites, reading through tons of industry newsletters, etc.

Sometimes, we come near, but near just isn’t close enough.

We want to post content on our blog that reflects who you are, what you do, and how you solve everyday challenges in your business working at the coalface and deep in the trenches.

Since we can’t be you (somebody’s gotta write the blog, right?) we came up with an ingenious idea:

“Why not tap into your knowledge and experiences as a WordPress web developer and reward you for all contributions you make to our blog?”

A Fair Trade

When we recently floated the suggestion to create an area where members could exchange their knowledge for hero points and links to their sites, we received overwhelmingly positive feedback and support from our members…“provided it’s a fair trade,” said all of you in unison.

We know you’re busy running a business and that you pay us to serve you, so we don’t expect you to give us something for nothing.

We’re all about fair trading here at the DEV…(you’re probably not even aware of this, but did you know that you can now get hero points just for commenting on our blog posts?)

Hence, Blog XChange (and not Blog XPloitation!)

By sharing your knowledge and experiences on the Blog XChange, you will be helping other members and helping us too! In return, we will reward you for your contributions with loads of hero points and, if we use your content on our blog, with links to help promote your business.

Web Developer.
Don’t let all that great knowledge go to waste…xchange it for hero points and links at the Blog XChange!

In this post, I’ll briefly tell you how it works and how to get started if you’d like to contribute. For full details, including guidelines for posting content and exactly how we will reward you for your contributions, see the pinned post inside the Blog XChange. (Check it out…it’s now live in your Member’s Area!)

Blog XCh-ch-ch-Changes – How It Works In A Nutshell

First off, we’re not looking for Pulitzer-prize-winning authors. You don’t have to submit polished prose or perfectly-presented publish-ready posts…we’ll take care of that.

What we’re looking for is a good ‘chunky’ piece of content that comes from your experience as a WordPress web developer, website builder, digital agency, tech support services provider, etc.

In your own words, tell us about a problem you have solved or a solution, fix, or hack you discovered that improved some Aspect of your or your client’s website or business.

Test and compare different plugins you are currently using against ours and share your results.

If you like, also feel free to share code snippets, screenshots, links to your favorite time-saving tools and resources, etc.

Preferably, it would be ideal if the content you share on the Blog XChange includes using our plugins or services (you’ll get extra points for that!) but it’s not a requirement.

Every contribution you make on the Blog XChange will earn you points. After all, just by posting it, you are helping other members.

Hustle
The Blog XChange can be your little side hustle.

What the blog team will do, is regularly scan the contributions posted on the Blog XChange. We will then reward you for anything we use on the blog. This includes quotable sentences, paragraphs, or sections of text, code snippets, mini-tutorials, video reviews,…even links to great tutorials published on your own sites, or a great headline idea for a new post will earn you a point.

In some cases, we may contact you to discuss publishing a full-blown article, tutorial, or case study. This is exactly what happened when one of our members posted a comment on one of our discussions. We then created a case study and promoted her business throughout the post…so, win-win!

Obviously, there are some things we will not publish, like content designed to promote affiliate links or hyped-up self-promotional stuff…basically we’ll apply the same editorial guidelines and criteria to whatever you submit that we ourselves use to ensure that we maintain our blog to the highest standards.

The Times, They Are A-Blog XChangin’ – How To Get Started

Contributing content to the Blog XChange is super easy. Any WPMU DEV member can do it.

As soon as you get an idea for a post, head on over to the Members section and click on the Blog XChange link (or click here to go there now.)

WPMU DEV Members Blog XChange
Click this button as soon as inspiration hits!

Click ‘Start Discussion’.

WPMU DEV Members Blog XChange - Start Discussion
Almost there…

Enter the title of your post in the ‘Subject’ field (it doesn’t have to be a snazzy title or an SEO-optimized headline…just tell us what it’s about!)

Under ‘Topic’ select ‘Blog XChange’.

Type or paste in your content in the ‘Discussion’ field. Feel free to use the formatting, quotation, and hyperlink tools too!)

If you’d like to keep track of any discussions on your thread, check the ‘Notify me by Email’ box.

Click the Post button to submit your contribution.

Blog XChange - Content submission form.
Type, select, paste in content, check, and click the button and you’re all done…too easy!

Your contribution is now added to the Blog XChange. If you need to make any adjustments to your post, just click on the Edit link.

Example of Blog XChange submission.
You’re a blog writer now…congrats!

That’s it! you’re all done.

Thank you! Hero points coming right up…check your sidebar!

We’ll get in touch with you if we use your content on our blog (e.g. to confirm the URL we’ll be linking to) and to discuss things further if we have any questions.

WPMU DEV - Blog XChange section with content added.
Hero points and links…thank you WPMU DEV!

To XChange is to Grow

As web developers and WordPress service providers, you know the challenges that you and your clients face every day. Better still, you know how good it feels to solve these challenges and come up with better, faster, more efficient ways to get things done.

By sharing your knowledge and experiences with us, you’ll be helping us write the exact content you’d like to see on our blog, helping other members, and helping yourself too!

As Winston Churchill famously never stated…

“To improve is to XChange; to be perfect is to XChange often.”

We look forward to seeing your contributions and to working more closely with you to benefit our valued members and help improve your businesses.

See you at the Blog XChange!

Build a Full WordPress Site via Block Patterns With the Hansen Theme

Category Image 091
Front page output of the Hansen WordPress theme.

Earlier today, the WordPress theme directory welcomed its fourth block-based theme. Built by UXL Themes, Hansen is one of the more stylish projects capable of working with the site editor in the Gutenberg plugin. The theme author also stepped it up a notch and included several block patterns.

I have written about how patterns will be a game-changer. I have talked about the need for a UI overhaul to better expose them to users. And I have proposed that theme authors use the pattern system instead of templates, allowing users to build out full sections of their sites at the click of a button.

UXL Themes has done just that. Most patterns that we have seen thus far have been built primarily for post or page content. The Hansen theme takes that idea a step further and creates patterns for different site sections.

Want to try a different look for the header? Just remove the old one and swap in another header pattern.

Header patterns included with the Hansen WordPress theme: dark and light.
Inserting the dark header pattern.

How about changing the look of your blog posts page? The theme comes with two and three-column patterns for outputting the latest posts.

Blog posts patterns included in the Hansen WordPress theme.
Inserting a two-column blog posts pattern.

It also packages a Content and Sidebar pattern that is more suitable for single posts and pages.

I am still undecided on whether the patterns or template parts system is the ideal solution for this. Right now, patterns have a cleaner UI overall and can be categorized. Template parts might be easier to switch, but there is no way to group them (e.g., header templates, footer templates, etc.). Regardless of what becomes the de facto standard in the long term, we need more theme authors like UXL Themes experimenting with these concepts, seeing what works, and gathering user feedback.

The theme does not add much in the way of content patterns. However, it does include one named “2 Columns of Text and a Full-Width Cover.” While it is a bit of a mouthful, the name does fully describe what it does. This is also the pattern in use for the homepage in the theme’s demo. However, the demo has a slight modification, adding a custom latest posts section.

A custom block pattern with two columns and a cover/hero section.
Hansen content-related pattern.

Hansen is more than just its patterns. The theme generally looks pretty good too. It has a bit more pizazz than we have seen from some other block-based experiments. Like the recently-released Phoenix theme, developers are becoming more comfortable moving beyond the bare-bones block-based designs from previous months.

These themes are obviously not on par with what one could build on more mature systems. However, Gutenberg’s FSE system is inching forward. The theme authors who are experimenting now are paving the way for the next generation of themes, which I am excited to see.

The Hansen theme also includes several block styles. Most are geared toward blocks that users would typically use in the site editor. I have not seen such an approach in previous block-based themes.

Two of the styles are for mobile navigation. The Mobile Friendly style displays a horizontal nav menu on desktop while switching to a hamburger-flydown on mobile devices. The Mobile Style alternative retains the mobile layout on all screen sizes.

There is a Box Shadow style for the Query Loop block, which adds a shadow to each post. In the future, I hope to see WordPress provide box-shadow options for this instead of themes relying on block styles. Nevertheless, it is a welcome addition for the moment.

Selecting the Box Shadow style in the block editor for the Query Loop block.
Box Shadow style for the Query Loop block.

The No Bottom Margin style allows users to remove bottom margin from Columns. I assume the theme author used this to address the common issue of nested blocks and their bottom margins adding on top of each other. I do not like this as a style because it gives the user the responsibility of fixing a design issue that should be taken care of under the hood. Generally, the problem stems from tackling spacing in design using a bottom margin instead of a top margin. It can be corrected in either case, but going with a top-margin approach is easier.

Outside of that one stylistic issue, the other downside to the theme is that it is not well-suited to long-form content out of the box. The content area stretches too wide for the default font size, making for uncomfortable reading. The theme includes a Narrow Width style for the Group block that corrects this. However, it would ideally be the reverse, with the content defaulting to a narrower width. Whenever a user wants to write a long-form blog post, they would need to wrap it in a Group block and apply the Narrow Width style. The more common use case should be the default.

Overall, I love the experimentation. Hansen is one of the best themes for playing around with the site editor in Gutenberg right now.

The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)

Category Image 052
For some time, many CSS developers had been holding off on incorporating the CSS Grid Layout specification in real projects. This was due to either volatility of the spec, lack of browser support, or possibly not having the time to invest in learning a new layout technique. We're now at the stage that Grid Layout is safe to use in most projects, so I hope this CSS Grid Layout tutorial will help if you haven't yet fully examined this CSS feature.