How to make this Hayden Theme

~ The Hayden Theme in WordPress Recipe ~


Squarespace Hayden 

How to replicate in WordPress:

  1. Create a new WordPress environment
  2. In WordPress admin: Create (Publish) a few pages with some titles like, Home, About us, Our portfolio and Contact us (worry about content later)
  3. Open Appearance > Menus and create a “main menu” out of those new pages > Save
  4. Install the Twenty Seventeen WordPress theme (may already be installed by default)
    • Get a moody, elegant, dark image from PEXELS.  Pexel images are free.  (Ideally and ultimately you would replace this with a photo of your own.)  Download a large horizontal photo at 2000px wide. You can darken the photo further and even monochrome it in PhotoShop or some free alternative like Gimp.
    • In WordPress admin:
      • Appearance > Customize > Site Identity > set your Title and Tagline
      • (Arrow back) > Customize > Header Media > Add new image and upload your photo (it might be fun to make a dark, moody or elegant video short, upload to YouTube and use that instead.)
      • (Arrow back) > Customize > Menus > Main menu > Under Menu Locations check ‘Top Menu’ then uncheck all others (for now, you can use these later if you like)
      • (Arrow back) > Customize > Homepage Settings > Check ‘A static page’ and select your homepage from the drop down menu, and ‘-select-’ for Posts page (for now, you can use this later if you want)
      • (Arrow back) > Customize > Theme Options > Check ‘One Column’ then deselect (or select ‘-select-’) in the four dropdown menus (for now, you can use these later if you like)
      • Publish > now close the customizer
  5. Install the Beaver Builder plugin
  6. Install the Easy Code Manager plugin


Note that getting the professional versions of both of the above plugins are truly worth it.  These pro versions are good for unlimited websites, that’s the way all pro WP plugins should be! (**cough** WPBakery, you listening, just saying…)


  1. Open Easy Code Manager and create three new Code Blocks and label them something like this (make sure they are in this order, you may have to drag them around after making them):
    • Global CSS
    • Global JQuery
    • Not-home CSS
  2. Open the PDF files and copy the scripts (including the opening and closing script and style tags) into their corresponding Code Blocks (that you just made in the previous step) and do the following:
    • Global CSS PDF: In Easy Code Manager click Panel > Assignments > Aux and check “Entire Website” > Save
    • Global JQuery PDF: In Easy Code Manager click Panel > Assignments > Aux and check “Entire Website” > Save
    • Not-home CSS PDF (this may not be intuitive at first, but it works):
      1. In Easy Code Manager click Panel > Assignments > Options and check “Pages” > Close panel
      2. In Easy Code Manager click Panel > Assignments > Page and check “Home” (Or whatever you labeled your homepage) > Save


All done!  Yes, I know you could and possibly should do this by making a Child Theme, but I am much faster in jQuery than in PHP and I only had the weekend to figure this out.

Leave a Reply

Your email address will not be published. Required fields are marked *