If you read my post about failing before you succeed, you know that I built this website from scratch. As with most fields, there is infinite information on this subject, and I am only scratching the surface. I am still building this website and fine tuning things, and therefore will be adding to this post and changing things around as I go along. This post is meant to give a shallow overview of what went into building this website from start to finish, in case you wanted to start your own or were curious about the process.
Creating the website
Before logging into WordPress and adding all the features, the site has to be hosted and a domain name has to be chosen.
1. Buy a domain name (namecheap.com)
2. Set up hosting (geekstorage.com)
3. Connect domain to hosting
- Go to namecheap account. Click ‘manage domain’.
- Name servers → custom DNS.
- Type nameserver 1 and 2 from geekstorage:
- primary: ns1.geekstorage.com/ secondary: ns2.geekstorage.com
- Should take effect in 24 – 48 hours.
4. Add domain
- Go to cPanel → Login → Domains
- Create a new domain
- Uncheck ‘Share document root’
5. Install WordPress on website
- Go to cPanel on Geekstorage.
- Type WordPress in search bar, and click WordPress Softalicious installer.
- Complete form.
5. Change http:// to https://
- In cPanel: add define(‘FORCE_SSL_ADMIN’, true); to cPanel → file manager → wp-config.php somewhere above “/* That’s all, stop editing! Happy publishing. */”.
- On WordPress, go to general settings and change from http:// to https:// for WordPress address (URL) and Site address (URL).
WordPress
Below are some tips that have come in handy when using WordPress to build my website:
Headings
Not all headings are created equal, and they’re best used in the right way. This is the categorization I have learned is the best way to think of which heading to use when:
- h1-title
- h2-chapter
- h3-subheadings
- h4-sub-subheadings
Troubleshooting
I have come across several problems that I figure out a solution then forget it. Here is where I will document said problems so I don’t have to stress myself:
- If the logo is missing from the front page:
- Go to edit.
- Scroll down to bottom settings, click header.
- Add a logo and retina logo image.
Plugins
Once the website has been built and WordPress is active, plugins can be installed. Plugins add different features to create the user experience of the website once it has been hosted on a domain name. These are the ones I am using or have found useful in the past:
| Plugin | Function |
|---|---|
| iThemes Security | Secure website |
| UpdraftPlus | Backup website (Tutorial) |
| Yoast SEO | SEO ranking and optimization |
| Loginizer | Protect against brute force attacks on website |
| Akismet Anti-Spam | Anti-spam |
| Legal Pages | Creates templates for necessary legal pages |
| Create by Mediavine | Recipe/how-to cards |
| WPForms Lite | Simple contact forms (rather than mailto:) |
| Display Posts | Uses shortcode to display posts differently (website) |
| Secondary Title | Adds option for second title for posts |
| Ocean extra (if using OceanWP theme) | Adds extra features |
| Smash Balloon Instagram Feed | Add Instagram feed to site |
| Insert Headers and Footers | Domain verify if need to copy shortcode (ex. From Smash Balloon Instagram Feed plugin) |
HTML
HTML code that has come in handy when formatting pages and posts. More in depth information on HTML and CSS can be found here. Never heard of HTML? Read this. (Thanks Sophia!)
| Function | Beginning code | End code / Notes |
|---|---|---|
| Highlight | <span style=”background-color:#2a9600; color:white> | </span> |
| Highlighted (marked) | <mark> | </mark> |
| Crossed out | <del> | </del> |
| Strikethrough | <s> | </s> |
| Space | | — |
| Tab (5 spaces) | | — |
| Line break | <br> | — |
| Horizontal line | <hr> | — |
| Subscript | <sub> | </sub> |
| Superscript | <sup> | </sup> |
| Underline | <u> | </u> |
| Bold | <b> | </b> |
| Strong | <strong> | </strong> |
| Italicized | <i> | </i> |
| Emphasized | <em> | </em> |
| Center | <center> | </center> |
| Inline | <span> | </span> |
| Ordered list | <ol> | </ol> |
| Unordered list | <ul> | </ul> |
| List point | <li> | </li> |
| Hover (tooltip) | <span title=”text here”> | </span> |
| Font size | <p style=”font-size:30px”> | </p> |
| Text color | <p style=”color:gray”> / <p style=”color:#60a500″> | </p> |
| Font family | <p style=”font-family:verdana”> | </p> |
| Text align horizontal | <p style=”text-align:right”> | </p> |
| Text indent | <p style=”text-indent:50px”> | </p> |
| Border | <h2 style=”border:3px; border-style:solid; border-color:#FF0000; padding: 0.35em> | </h2> |
| Scroll from | <a href=#id”>text | </a> |
| Scroll to | <h2> <a id=”id”>text | </a></h2> |
| Scroll to menu | <ul><li> <a href= “#id”> text</a></li> | </ul> |
| Horizontal menu | <p class=”has-text-align-center”><a href=”#id”>text</a> | | </p> |
| Line spacing | <p style= “line-height:20px”> | </p> |
| Button | <center><button type=”button” style=”border-radius:3px; border:1px><a style=”color:white” href=”link”>Button text → | </a></button></center> |
Shortcode
| For use with: | Shortcode | Purpose |
|---|---|---|
| <a data-pin-do=”embedUser” data-pin-board-width=”150″ data-pin-scale-height=”800″ data-pin-scale-width=”60″ href=”https://www.pinterest.com/jenaelawson/”></a> | Sidebar | |
| <center><a data-pin-do=”embedUser” data-pin-board-width=”1285″ data-pin-scale-height=”600″ data-pin-scale-width=”80″ href=”https://www.pinterest.com/jenaelawson/”></a></center> | ||
| <script async defer src=”//assets.pinterest.com/js/pinit.js”></script> | In ‘Insert Headers and Footers’ plugin | |
| Display posts | https://wordpress.org/plugins/display-posts-shortcode/ | To customize how posts are display |
Colors
Colors I use repeatedly around the website. A color code picker can be found here.
| Color | Color code | Use |
|---|---|---|
| Green | #60a500 | Headings |
| Dark gray | #444444 | Body text |
| Light gray | #797D7F | Secondary title |
Alt codes
Here are my most frequently used alt codes. More can be found here.
| Name | Symbol | Alt+__ |
|---|---|---|
| Degree | ° | 0176 |
| Dash | — | 0151 |
| Approximately | ~ | 126 |
| Right arrow | → | 26 |
| One quarter | ¼ | 0188 |
| One half | ½ | 0189 |
| Three quarters | ¾ | 0190 |
| Vertical line separator | | | 124 |
Connect social media accounts
Add script to header section in ‘Insert Headers and Footers’ plugin
Use ‘Smash Balloon Instagram Feed’ plugin
Add script to header and body sections in ‘Insert Headers and Footers’ plugin
Adding them to the top bar
Appearance > Customize > Top bar > Social
Instagram—use https://instagram.com/yourinstagramname
Pinterest—your specific ‘https://pin.it/4GVOb9d’ code found when sharing the account and copying the link
Conclusion
Although this may not all seem relevant to you, these components are what build JenaeLawson.com, and is the makeup for the webpage you are using right now. There is endless amounts of information out there, so if you want to create your own website, do more research and you’ll be able to find what you’re looking for.
I hope this was informative in some way (or at least entertaining!) Have you ever built a website or used HTML? How did you learn it? Let me know in the comments!
Leave a Reply