September 18, 2023

Rebuild in WordPress without any Extra Plugins

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

If you’ve ever admired the design of TechCrunch and thought about recreating something similar on your own WordPress site, you’re in the right place. Let’s discover how you can rebuild without any extra plugins in under 30 minutes.

Setting the Stage

  1. Choose a Theme
    Start with a fresh WordPress site using the 2023 theme. This theme provides a clean slate, making it easier to customize.
  2. Pre-Added Posts
    Before diving into the design, add some posts to your site. These will serve as placeholders, helping you visualize the final look.

Creating the Layout

  1. Column Layout
    Navigate to the WordPress editor. Choose a two-column layout with a 20-80 split. The 20% will be for navigation, and the 80% for content.
  2. Use List View
    In the WordPress editor, switch to the list view. This view gives a clearer structure, especially when working with multiple blocks.

Making the Navigation Sticky

  1. Group Content
    In the column meant for navigation, group all the content blocks together.
  2. Apply Stickiness
    In the block settings on the right, find the ‘Position’ option. From the dropdown, select ‘Sticky’. This ensures your navigation remains visible even when users scroll down.

Incorporating the Query Loop Block

  1. Add the Block
    In the WordPress editor, click on the ‘+’ icon to add a new block. Search for ‘Query Loop’ and add it to your content column.
  2. Choose a Layout
    The Query Loop block offers various layouts. Pick one that aligns with TechCrunch’s post structure.
  3. Adjust Columns
    Within the block, adjust the featured image and post title columns to mirror TechCrunch’s layout.
  4. Aspect Ratio
    With WordPress 6.3, you can set a fixed aspect ratio for your featured images. This ensures consistency in image presentation.

Fine-Tuning the Design

  1. Padding
    Navigate to block settings and adjust the padding to give your content some breathing space.
  2. Fonts
    Customize the font sizes for post titles, content, and other text elements. Ensure readability while keeping it stylish.
  3. Post Categories
  4. Add a ‘Categories’ block above your post titles. Customize its color to give it a distinct look, similar to TechCrunch.

Finalizing the Navigation

  1. Edit Navigation Block
    Click on your navigation block and select ‘Edit’. This allows you to modify menu items.
  2. Rearrange Items
    Drag and drop menu items to match the order on TechCrunch.
  3. Styling
    Adjust the appearance, font size, and spacing of the navigation items to make them user-friendly and visually appealing.

Mobile Responsiveness

  1. Test on Different Devices
    Preview your site on mobile, tablet, and desktop views. Ensure the layout adjusts seamlessly.
  2. Navigation on Mobile
    Ensure that the sticky navigation collapses into a user-friendly mobile menu on smaller screens.

Rebuild – Conclusion

By following these detailed steps, you’ve successfully captured the essence of TechCrunch on your WordPress site. It’s a testament to the flexibility and power of WordPress.

Remember: While this tutorial took inspiration from, try to bring in your own twist and make your site unique.

Credit to Jamie Marsland
Join the WordPress journey with the expert guidance of Jamie Marsland, founder of Pootlepress. With a decade-long legacy of assisting individuals and businesses, Jamie shares practical WordPress knowledge derived from real-world experience. You'll find a wealth of WordPress tutorials, specialized advice for customizing WooCommerce with the Gutenberg Block Editor, and much more.
Rebuild in WordPress without any Extra Plugins
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.