Michael

Most people starting a website tend to lump everything together: buy the domain, set up hosting, and leave DNS wherever it landed by default. And honestly, that works. Until it doesn’t.

When something breaks. Or when you want to switch hosting. Or when you need to make a DNS change and you realize you have no idea where the DNS is even managed.

That’s when the drawbacks of an all-in-one setup become obvious.

This article dives into why splitting your domain registration, DNS, and hosting across different providers can save you time, give you flexibility, and maybe even make your website a little faster and more secure. Then we’ll look at how to set it up step by step, without the headache.

---

Why You Should Keep Domain, DNS, and Hosting Separate

1. Switching Hosts Becomes Easy

Imagine you’re unhappy with your hosting provider. Maybe your site is slow, support is unresponsive, or prices just went up.

If your domain and DNS are tied up with your host, switching becomes a multi-step dance. You have to transfer DNS zones, wait for propagation, and hope nothing breaks in the meantime.

But if your DNS is separate, all you need to do is point your records to the new host’s IP. No downtime. No panic.

2. Avoid a Single Point of Failure

Let’s say your hosting provider goes offline—not just your site, but their control panel, support, everything.

If your DNS is managed elsewhere, you can still reroute traffic. Still access your domain. Still pivot.

If everything’s locked in one provider? You’re stuck.

3. Use Best-in-Class Tools

Most registrars are good at one thing: registering domains. Hosting companies are good at serving sites. DNS? That’s a different beast.

Services like Cloudflare specialize in DNS management, performance optimization, and security. And it’s free. You can benefit from advanced features like global CDN, DDoS protection, analytics, and blazing-fast DNS response times.

When each part of your web stack is handled by a specialist, you end up with a better overall setup.

4. More Control, Less Lock-In

Ever felt like your provider is holding your website hostage? When you use all-in-one services, it can feel like you’re trapped.

Splitting things up means you’re in charge. You can move pieces around without breaking the whole system.

---

How to Set It All Up

Here’s a straightforward, modular setup that works well:

• Domain registrar: Porkbun
• DNS provider: Cloudflare
• Web host: Hostinger

Step 1: Register Your Domain (e.g. at Porkbun)

Head over to Porkbun.com and register your domain. They’re affordable, honest, and have a clean interface. Once that’s done, hold off on DNS changes for now.

Step 2: Create a Free Cloudflare Account

1. Go to Cloudflare.com
2. Sign up and click “Add a site”
3. Enter your domain name
4. Cloudflare will scan and import existing DNS records automatically

Cloudflare will give you two nameservers (e.g., bob.ns.cloudflare.com and sue.ns.cloudflare.com).

Step 3: Change Nameservers in Porkbun

1. Log in to Porkbun
2. Click on “Details” next to your domain
3. Go to the Nameservers section
4. Replace whatever’s there with Cloudflare’s nameservers
5. Save your changes

Now your DNS is officially managed through Cloudflare.

Step 4: Point DNS Records to Hostinger

Back in your Cloudflare dashboard, you’ll want to add the records that connect your site to your hosting provider.

Typically, you’ll need:

• An A record pointing to your Hostinger IP address
• A CNAME for www pointing to your root domain
• MX records if you use email (you can get these from your email provider)

Hostinger will provide your IP in the hPanel under Hosting > Details.

With these records in place, your traffic flows through Cloudflare and lands at your Hostinger-hosted site.

Step 5: Install Your Website (on Hostinger)

Use Hostinger’s Auto Installer to install WordPress or another site builder. During the install process, be sure to match your domain name correctly.

Step 6: Bonus Points

• Enable SSL in Cloudflare
• Turn on Auto Minify and Brotli compression for faster load times
• Use Cloudflare’s Page Rules to redirect non-www to www (or vice versa)
• Set up DNSSEC for extra security

---

But Wait… Isn’t This Overkill?

You might be wondering if this is all a bit too much. Isn’t it easier to just let Hostinger or Porkbun handle everything?

Sure. That approach works—until something goes wrong. Or you want to upgrade. Or optimize. Or move on.

Taking a little extra time now means avoiding stress later.

---

What If You Need to Make a Change Later?

This setup makes that super simple.

Want to switch from Hostinger to another host? Just update your A record in Cloudflare.

Want to move your domain to another registrar? Transfer it—doesn’t affect DNS or hosting.

Need to change your email provider? Just update your MX records.

Each part is independent. No domino effect.

---

Final Thoughts

Keeping your domain, DNS, and hosting with different providers isn’t just for tech pros. It’s a solid move for anyone who wants control, flexibility, and better performance.

You avoid lock-in. You gain options. And when something changes, you’re already set up to adapt.

So if you’re registering a new domain or building a fresh site, consider the trifecta: Porkbun for domains, Cloudflare for DNS, and Hostinger for hosting. You’ll thank yourself later.

If you’re building a big site and your regular navigation bar is already gasping for air… it’s time to bring in the big guns: a mega menu.

This is the guide I wish I had when I first started messing around with WordPress menus. No jargon. No code. Just a straight-up, step-by-step walkthrough.

Whether you’re building a resource directory, an educational hub, or anything with lots of pages—this post is for you.

---

🤔 What Is a Mega Menu?

You’ve probably seen them before. Hover over a “Courses” or “Shop” tab on a big site, and instead of one long dropdown, you see a wide panel with multiple columns and headings.

That’s a mega menu.

They’re perfect for organizing a ton of links in a clean, scannable way. Less chaos, more structure.

---

💡 Can You Build a Mega Menu in WordPress?

Short answer: yes. But the default WordPress setup won’t get you there on its own.

Here’s what you’ll need:

• A theme that supports custom menus (we’ll get to my picks)
• A plugin to add mega menu functionality

Don’t worry—it’s easier than it sounds.

---

🧰 Tools You’ll Need

1. A Good, Flexible Theme

Here are three themes I’ve personally used that work great with mega menu plugins:

• Astra
• Blocksy
• Kadence

They’re lightweight, clean, and free (with premium upgrades if you ever need them).

2. A Mega Menu Plugin

Use Max Mega Menu. The free version is powerful enough for most needs.

It lets you:

• Enable mega menus for specific nav items
• Build layouts using drag-and-drop
• Customize the design without writing a single line of code

---

🚧 Step-by-Step: Creating Your First Mega Menu

Let’s say you’re building an educational resource site. You’ve got tons of content on math, science, literature, history—you name it.

Here’s how you’d set up a mega menu for that.

---

Step 1: Pick and Install a Theme

1. Go to Appearance > Themes
2. Click “Add New”
3. Search for Astra, Blocksy, or Kadence
4. Install and activate

These all support custom menus and work well with Max Mega Menu.

---

Step 2: Install Max Mega Menu

1. Go to Plugins > Add New
2. Search for “Max Mega Menu”
3. Install and activate

---

Step 3: Create Your Menu Structure

Go to Appearance > Menus and build your menu like this:
Subjects
├── STEM
│ ├── Math
│ ├── Science
├── Humanities
│ ├── History
│ ├── Literature

Group links under categories to keep things clean.

---

Step 4: Enable Mega Menu

1. Click the Mega Menu button next to “Subjects”
2. Check the box for Enable Mega Menu
3. Use the drag-and-drop builder to organize links into columns

Boom—you now have a working mega menu.

---

Step 5: Customize the Look

Go to Appearance > Max Mega Menu > Menu Themes to tweak:

• Fonts
• Colors
• Hover effects
• Mobile behavior

Make it match your site’s vibe.

---

⚠️ What If You Have 50+ Links?

Good question. Here’s how to deal with it:

✅ Group by Category

Instead of dumping all 50 links under one menu item, break them into 4–6 logical groups.

Example:
Subjects
├── STEM (10 links)
├── Humanities (12 links)
├── Arts (8 links)
├── Life Skills (6 links)

✅ Use Category Pages

If you’re using posts or articles, assign each to a category like “Biology” or “Algebra.” Then link to those category pages, not individual posts.

✅ Keep It Mobile-Friendly

Test your menu on mobile. Mega menus usually collapse into regular menus on phones, so make sure it’s still easy to navigate.

---

🤷 Should You Use the Twenty Twenty-Five Theme?

If you’re using the default WordPress theme (Twenty Twenty-Five), you’ll hit a wall.

• It supports basic menus, but not mega menus
• You can’t easily plug in drag-and-drop column builders
• Styling and customization is limited

TL;DR: Don’t waste time wrestling with it—use Astra, Blocksy, or Kadence instead.

---

🧠 SEO Tips for Mega Menus

Yes, mega menus can help SEO if done right:

• Use descriptive link names (not “Page 1,” “Page 2”)
• Link to helpful category pages
• Keep your URL structure clean

Avoid linking to everything from the home page—Google may not love that.

---

⚡ Bonus Tips

🔥 Don’t Overload It

Your visitors should be able to scan the menu in 3–5 seconds. If not, trim it down.

🔥 Keep Plugins Light

Max Mega Menu + a good theme is all you need. Don’t bloat your site with 20 extras.

🔥 Use It as a Table of Contents

Think of your menu like the book index. If it’s cluttered, people get lost.

---

📝 TL;DR

To create a mega menu in WordPress:

1. Use a lightweight theme (Astra, Blocksy, or Kadence)
2. Install Max Mega Menu
3. Build your menu using drag-and-drop
4. Group links into sections
5. Style it and test it on mobile

Easy, right?

---

🙋 FAQs

Q: Do I need to pay for Max Mega Menu Pro?
Nope. The free version is enough unless you want advanced animations or icons.

Q: How many links is too many?
If people get overwhelmed or confused, it’s too many. Group them better.

Q: Can I do this without a plugin?
Yes—but it requires custom coding. For most people, plugins are faster and safer.

---

🧩 Final Thoughts

You don’t need to be a developer to make your WordPress site look sharp and organized. If you’ve got a lot of content, mega menus help people find what they’re looking for without rage-clicking.

Just pick the right theme, install one plugin, and you’re good to go.

If you’re building your first real site—this one little upgrade makes a big difference.

Got questions? I’ll help where I can. Leave a comment or hit me up on X (@themichaelshoe).

If you’ve ever scratched your head wondering how to update your site’s header once and have it magically reflect across every single page and post, you’re in good company. I’ve been down that rabbit hole too, wrestling with WordPress’s Block Editor, Site Editor, templates, and template parts. In this guide, I’ll walk you through everything—from the basics of Block vs. Site Editor to the nitty-gritty steps of creating a brand new header template part and applying it across your entire site. Plus, I’ll spill why simply creating a template part doesn’t auto-magically roll out everywhere (spoiler: it’s for flexibility!).

What you’ll get:

1. A clear understanding of Block Editor vs. Site Editor
2. Confirmation of when to use each editor
3. The difference between global structure (styles) and templates
4. A detailed, step-by-step walkthrough for changing or creating a header template part
5. Answers to common questions, like why template parts aren’t automatically applied
6. SEO-optimized headings and keywords to help search engines find this post

Let’s dive in!

---

1. Block Editor vs. Site Editor: Two Different Worlds

When I first started with Gutenberg, I thought, “This block thing is cool,” but I didn’t fully grasp the bigger picture. The magic of WordPress 5.8+ introduced not just the Block Editor but the Site Editor—and they serve different masters:

• Block Editor (a.k.a. Gutenberg)
  • Scope: Individual posts and pages
  • Use it for: Creating and editing content blocks like text, images, galleries, and embeds
  • Example: Publishing a new blog post with rich media, formatting, and custom layouts
• Site Editor (Full Site Editing / FSE)
  • Scope: Your entire website
  • Use it for: Designing templates, template parts (header, footer), and global styles (fonts, colors)
  • Example: Tweaking your header layout, changing the blog archive design, or customizing the footer across all pages

Why this matters: If you try to edit your header in the Block Editor, you’re only touching one page at a time. To change your site’s global header, you’ll need the Site Editor. Simple as that!

---

2. When to Use Block Editor vs. Site Editor

You asked: “If I want to change templates/patterns, use Site Editor; for changing individual posts/pages, use Block Editor. Correct?”

✅ Yes—that’s exactly right.

• Block Editor = Individual Content
  • Think: I want to update my About page text, add an image gallery to this page.
• Site Editor = Global Structure + Templates
  • Think: I want a new header, update my footer, change how all blog posts look.

Tip: Ask yourself, “Do I want this change on just this one page, or everywhere?”

---

3. Templates vs. Global Structure (Styles): Not the Same Thing

This one tripped me up more than once. Templates and global styles are siblings, but they play different roles:

Feature	Templates	Global Structure (Styles)
Definition	Layout blueprints for page types	Site-wide design settings (fonts, colors, spacing)
Scope	Specific page types (single post, archive, page)	Entire site (all templates)
Edited in	Site Editor → Templates	Site Editor → Styles panel
Examples	Single Post layout, Archive layout	Button styles, Link colors, Typography

• Templates: Imagine blueprints for each room in a house—kitchen blueprint, bedroom blueprint. If you renovate the kitchen blueprint, all kitchens look new.
• Global Structure: This is your interior design style—wall paint, baseboard trim, tile choices—applied everywhere.

Bottom line: When you edit a template, all pages using that template update. When you tweak a global style, fonts, colors, and spacing shift site-wide.

---

4. Step-by-Step: Changing the Header Site-Wide

Ready to create or change your header and have it show up on every page? Here’s the straightforward way:

1. Open the Site Editor
   • Go to Appearance → Editor in your WordPress dashboard.
2. Create or Select a Header Template Part
   • Click the WordPress logo (top-left) → Template Parts → Header.
   • To create: Click Add New, name it (e.g., “Custom Header”), choose type Header, and click Create.
   • To use existing: Select the header part you want.
3. Design Your Header
   • Use blocks: Site Logo, Navigation Menu, Buttons, Social Icons, Search.
   • Adjust spacing, colors, typography in the block settings or Styles panel.
4. Save Your Header Template Part
   • Click Save. Your header part now exists, but it’s not yet applied to any templates.
5. Apply the Header to Templates
   • Still in the Site Editor, navigate to Templates (Single Post, Page, Archive, 404, Search, etc.).
   • For each one:
     • Click the template → select the old Header part → delete it.
     • Add a block: Template Part, choose your new header.
     • Click Save.

Pro Tip: If your theme uses the same header for all templates by default, you might only need to replace it once, and the change ripples across.

---

5. Why a New Template Part Doesn’t Auto-Apply

You might wonder: “Why doesn’t WordPress just swap in my new header everywhere?”

Here’s the thing:

• Flexibility Over Automation: WordPress lets each template decide which header it uses. That means you can have different headers: a minimal one for landing pages and a full one for blog posts.
• Manual Control: By creating template parts and assigning them manually, you get precise control over which templates use which parts.

It’s a bit more work up front, but it saves you from unintended changes down the road. Imagine if you updated your header for your blog but then accidentally lost the custom header on your sales page—that would be chaos!

---

Conclusion

Changing your WordPress header site-wide doesn’t have to feel like a treasure hunt. With the Site Editor, template parts, and a bit of manual swapping, you can design a beautiful header once and have it show up everywhere. Remember:

1. Block Editor = posts & pages content.
2. Site Editor = templates & global styles.
3. Templates control layout.
4. Global styles control appearance.
5. Template parts are reusable blocks—but must be assigned to templates manually.

Stanford offers this really cool free learning platform called Code in Place. I’m currently enrolled in the 2024 class and have finished my week 2.

There is this Optional problem called Checkerboard Karel, and this is my solution to it. I’m sure there are other ways to solve the problem, and feel free to let me know by commenting down below, or connect with me on Twitter/X.

The Problem

This problem asks us to get Karel to create a checkerboard pattern of beepers from an empty world to a world like this:

Karel starts and finishes from the same position. We don’t really know how big the world is, or whether there are odd or even numbers of columns or rows, which means that Karel could be working in a world like this:

Or this:

The algorithm

Step 1: tag all rows in the first column

One of the most important things to solve here is to let Karel know whether she is on an odd or even row, so that she can correctly lay down the beepers according to the pattern rules. There is no rule on where Karel can go, i.e. east, west, north, south, as long as she doesn’t bang her head against the wall. So my first step is to tag all rows in the first column, like this (we will use the 6×6 world as an example):

In this way Karel can rely on the “if” function to know whether she is on an odd or even row, therefore know how to proceed. 

A remainder: Karel should return to her original corner after tagging all rows.

Step 2: tag one row correctly, regardless of odd or even

This is the core of the solution for Checkerboard Karel. 

Since we’ve already tagged all rows, an “if/else” function would do the trick:

If Karel is on an odd row, she simply follows a “move – move – put_beeper” pattern until she stops in front of a wall. If she is on an even row, she follows a “move – put_beeper – move” pattern. Simple as that. 

Yet since we don’t know how big or small the world is, Karel needs to check whether her front_is_clear every time she tries to make a move:

We should also remember to get Karel return to the first corner once she finishes tagging a single row. In this way, Karel will be in the same condition every time, i.e. standing on the first corner, facing east.

Step 3: Karel should tag every row in her world, and return to the original corner afterwards

Because we make Karel return to the first corner on each row after tagging that row, the next step is quite easy:

1. Turn left
2. Move one step
3. Turn right

Then Karel will be on the next row, standing on the first corner, facing east, ready for action. 

Except on the last row. 

After tagging the last row, Karel must return to the original corner by turning right, moving to the wall, and turning left.

The problem is to find a condition that applies to all rows except the last one, a difference that can help Karel understand when to stop and move to the original corner.

In this world, the power lies with Karel’s left hand.

Imagine Karel can reach out with his left hand and touch if there is a wall. For all rows except the last, Karel’s left_is_clear.

This is the condition we need.

The code

This is my version of the solution, and I’m pretty sure there are other and better ways to solve.

from karel.stanfordkarel import *

"""
Karel should fill the whole world with beepers.
"""

def main():
    """
    You should write your code to make Karel do its task in
    this function. Make sure to delete the 'pass' line before
    starting to write your own code. You should also delete this
    comment and replace it with a better, more descriptive one.
    """
    tag_all_rows() # this refers to Step 1
    tag_row() # this refers to Step 2
    while left_is_clear(): #the rest of this section refers to Step 3
        turn_left()
        move()
        turn_right()
        tag_row()
    turn_right()
    move_to_wall()
    turn_left()

def tag_all_rows():
    turn_left()
    put_beeper()
    while front_is_clear():
        move()
        if front_is_clear():
            move()
            put_beeper()
    turn_around()
    move_to_wall()
    turn_left()

def tag_row():
    if beepers_present():
        while front_is_clear():
            move()
            if front_is_clear():
                move()
                put_beeper()
    else:
        while front_is_clear():
            move()
            put_beeper()
            if front_is_clear():
                move()
    turn_around()
    move_to_wall()
    turn_around()

def turn_around():
    turn_left()
    turn_left()

def turn_right():
    for i in range(3):
        turn_left()

def move_to_wall():
    while front_is_clear():
        move()

# There is no need to edit code beyond this point
if __name__ == '__main__':
    main()

Ta-Da!

The Baby Vocab Problem is essentially asking this:

We have a list of words, among which some are repetitive. We want to find out the unique words from the list and count the number of each unique word. After that, we will print out the histograms for the words to visualize which words are spoken the most!

The Code in Place staff has generously provided us with two really useful functions. One is to help us load all the words into a list, and the other is to help us print out histogram bars from two inputs, which are 1) the word, and 2) the word count.

This problem has provided us with an almost perfect situation to use dictionaries as solution. If we can construct a dictionary where each pair of key and value is a combination of unique words and their respective word counts, we can use the print_histogram_bar(word, count) function to return histograms. 

First, let’s create an empty dictionary.

    vocab = {}

Next, let’s go over the whole list of words. For the first time we encounter a word, we will first set the count (or value) of the word (or key) to 1. If the word is already in the vocab (dictionary), we then add 1 to the count. An “if” loop might come in handy here:

 for i in range(len(words)):
        if words[i] not in vocab: # if the word is not in the vocab
            vocab[words[i]] = 1 # set the count for the word to 1
        else:
            vocab[words[i]] += 1 # if the word is already in the vocab, add 1 to the count for this word

After that we’ve successfully created a dictionary called vocab containing pairs of unique words and their respective word counts. To test it out, I decided to print out the dictionary to see if it works by adding a print(vocab) line here. The result didn’t disappoint:

{‘mama’: 30, ‘dada’: 26, ‘baba’: 15, ‘bye-bye’: 20, ‘hi’: 29, ‘no’: 15, ‘juice’: 10, ‘please’: 7, ‘apple’: 5}

Last but not least, the only thing left is to print out the histograms! 

for word,count in vocab.items():
        print_histogram_bar(word, count)

Because the print_histogram_bar(word, count) function requires both the word and the word count, I chose to use vocab.items here as it helps skip the definition of word or count.

This is the full code, including the pre-programed:

def main():
    words = load_words_from_file("words.txt")
    vocab = {}
    for i in range(len(words)):
        if words[i] not in vocab: # if the word is not in the vocab
            vocab[words[i]] = 1 # set the count for the word to 1
        else:
            vocab[words[i]] += 1 # if the word is already in the vocab, add 1 to the count for this word
    # print(vocab)
    for word,count in vocab.items():
        print_histogram_bar(word, count)
    

def print_histogram_bar(word, count):
    """
    Prints one bar in the histogram.
    
    Uses formatted strings to do so. The 
        {word : <8}
    adds white space after a string to make
    the string take up 8 total characters of space.
    This makes all of our words on the left of the 
    histogram line up nicely. On the other end,
        {'x' * count}
    takes the 'x' string and duplicates it by 'count'
    number of times. So 'x' * 5 would be 'xxxxx'.
    
    Calling print_histogram_bar("mom", 7) would print:
        mom     : xxxxxxx
    """
    print(f"{word : <8}: {'x' * count}")

def load_words_from_file(filepath):
    """
    Loads words from a file into a list and returns it.
    We assume the file to have one word per line.
    Returns a list of strings. You should not modify this
    function.
    """
    words = []
    with open(filepath, 'r') as file_reader:
        for line in file_reader.readlines():
            cleaned_line = line.strip()
            if cleaned_line != '':
                words.append(cleaned_line)
    
    return words


if __name__ == '__main__':
    main()

There you have it!