If you've been making HTML templates and you want to up your game, one of the simplest ways to do this is to connect your HTML and CSS to WordPress.
Let's say you're going to build a marketing website. Here's how you get started (even if you know nothing about WP).
(THREAD)
Let's say you're going to build a marketing website. Here's how you get started (even if you know nothing about WP).
(THREAD)
First why?
You can use page builders like Elementor, but they can be bloaty and you are throwing away your HTML and CSS knowledge.
Building an HTML-based theme is leaner, it offers the most design and layout flexibility, and businesses value your total design dominance.
You can use page builders like Elementor, but they can be bloaty and you are throwing away your HTML and CSS knowledge.
Building an HTML-based theme is leaner, it offers the most design and layout flexibility, and businesses value your total design dominance.
1) Design a single-page template for the landing page, as you normally would in just HTML, CSS, and maybe a pinch of JS if needed. Make it responsive too.
2) Install @devkinsta (free) for local WordPress development, even if you're not a @Kinsta customer.
2) Install @devkinsta (free) for local WordPress development, even if you're not a @Kinsta customer.
The only tricky thing about DevKinsta is that it requires Docker and Docker (which is dope) requires Hardware Virtualization enabled in your BIOS (PC).
If you're on an AMD, it's called SVM.
If you're on an Intel, it's called VT-X.
I wrote a guide:
agentartifact.notion.site
If you're on an AMD, it's called SVM.
If you're on an Intel, it's called VT-X.
I wrote a guide:
agentartifact.notion.site
No idea how easy or difficult it is on a MAC.
Once DevKinsta is installed, you can literally spin up WordPress websites by clicking a button.
3) Spin one up. DevKinsta tells you its local URL, where the website files are located on your drive, and the WordPress login info.
Once DevKinsta is installed, you can literally spin up WordPress websites by clicking a button.
3) Spin one up. DevKinsta tells you its local URL, where the website files are located on your drive, and the WordPress login info.
Now that you have a WP site, the way you customize it is to make your own theme, which is a folder in a special location with a bunch of files.
"Theme" is an understatement because you can do a TON more than just change it's look, but that's the WordPress term of art.
"Theme" is an understatement because you can do a TON more than just change it's look, but that's the WordPress term of art.
You can copy an existing theme folder and edit it, you can download a new theme, or you can build one from scratch.
Start with a copy or a boilerplate. Here's mine: agentartifact.com
It has CSS resets, a few field designs, wrappers, and suggested media queries—that's it.
Start with a copy or a boilerplate. Here's mine: agentartifact.com
It has CSS resets, a few field designs, wrappers, and suggested media queries—that's it.
4) Inside the zip is a folder. Place this inside if your themes folder of your WP installation:
\DevKinsta Site Paths\public\your-website-name\wp-content\themes\
Feel free to rename the folder from artifactbasic to whatever you want.
\DevKinsta Site Paths\public\your-website-name\wp-content\themes\
Feel free to rename the folder from artifactbasic to whatever you want.
Work with one section at a time, starting with header.php.
5) Open header.php in a code editor
This file will house the HTML for the header and menu of your website and will repeat itself on every page. If you don't know php, don't worry about it for now.
5) Open header.php in a code editor
This file will house the HTML for the header and menu of your website and will repeat itself on every page. If you don't know php, don't worry about it for now.
You will notice this file has two opening <div> tags (wrappers).
Their closing </div> tags are in footer.php. Make sense?
Roughly speaking, each "page" on the WordPress website is stitched together with "3 files" (kind of):
header.php
actual-page-name.php
footer.php
Their closing </div> tags are in footer.php. Make sense?
Roughly speaking, each "page" on the WordPress website is stitched together with "3 files" (kind of):
header.php
actual-page-name.php
footer.php
6) Copy your CSS that's related to the wrappers you use (or use mine) as well as the CSS related to just your header and menu—from the template you made into style.css of the WordPress theme.
7) Copy your HTML related to the header and menu from your template to header.php
7) Copy your HTML related to the header and menu from your template to header.php
Ignore your probably static menu. Your goal at this point is to get the header and menu to *look* exactly like your template, but inside of WordPress.
8) Login to WordPress, go to Appearance, go to Menus. Create a new menu called "primary" and then drag a page or 2 into it—save.
8) Login to WordPress, go to Appearance, go to Menus. Create a new menu called "primary" and then drag a page or 2 into it—save.
9) Remove your menu items from header.php and replace with:
<?php wp_nav_menu('menu=primary'); ?>
I know it's some php! This php will generate some HTML for the menu.
10) Rewrite your CSS to apply to the new HTML and make it match your original menu design.
<?php wp_nav_menu('menu=primary'); ?>
I know it's some php! This php will generate some HTML for the menu.
10) Rewrite your CSS to apply to the new HTML and make it match your original menu design.
Now I've sent you down a journey.
In essence, this is the process by which you can write an HTML-based theme for WordPress, one piece, one section at a time.
There's a lot to learn, but you don't have to know all of them to deliver a final site. I still don't know all of WP.
In essence, this is the process by which you can write an HTML-based theme for WordPress, one piece, one section at a time.
There's a lot to learn, but you don't have to know all of them to deliver a final site. I still don't know all of WP.
Loading suggestions...