Here is a collection of tips for WordPress, as I have had to research and use these to create this and other sites.
Problem
Trick or Tip
"How do I evenly space out my layout?"
The easiest way that I am doing my layouts for both pages and posts is using the Page Builder plug by SiteOrigin. This plugin allows for a "page builder" editing option, which allows you to add a structure, row by row. I found it a little difficult to get used to at first, but quickly found that my sites looked jumbled without it.
I put down rows divided into columns, opting for 1 column rows for title and some precursor content, then 2-4 column rows for steps. Each row seamlessly connects to the rows around it, so the content does look smooth. I then fill each row's section with widgets, usually sticking to 3 of them:
- SiteOrigin Editor - Allows you to provide text and other content into this section, I use this heavily.
- SiteOrigin Headline - These are what I use for Titles and to break sections up in How To's.
- SiteOrigin Image - This is just for pictures.
"How do I zoom in on an image when clicking it?"
I am using the Easy Fancybox plugin for WordPress. It is easy to use, automatic in fact, but it took me a while to usnderstand how to actually use it.
- Choose Media as you normally would.
- Image Size: Smaller image (it's actually the same image you'll use for the larger image)
- Title Text: I usually put "Click to Enlarge" here, so it displays when hovered.
- Destination URL: This is the link to the same picture in your Media Library. I usually copy this link when I upload images, then paste it here.
"How do I make a floating (sticky) Nav Bar?"
Go to your Additional CSS area, mine is in Appearance / Customize / Additional CSS and add the following:
/*Floating Header*/
.navbar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
right: 0;
opacity: 1;
visibility: visible;
}
#main .page-header {
margin-top: 70px;
}
The #main .page-header part fixes the content, pushing it down under the header.
"How do I make code breakouts to display my code?"
Go to your Additional CSS area, mine is in Appearance / Customize / Additional CSS and add the following:
/*Commands*/
.command {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
border-radius: 4px;
line-height: 1.1em;
font-family: Courier New,Courier,mono;
font-size: 12px;
font-style: italic;
margin-bottom: 10px;
margin-top: 10px;
}
Now go into your content and choose text editor and surround the text you want to break out with:
<p class="command"> your text here </p>
It will show up just like above.
"How do I hide my page or post titles?"
Go to your Additional CSS area, mine is in Appearance / Customize / Additional CSS and add the following:
For just pages:
/*Hide Page Title*/
.page .entry-title {
display:none;
}
For just posts:
/*Hide Page Title*/
.post .entry-title {
display:none;
}
For just one page or post:
/*Hide Page Title*/
.post-100 .entry-title {
display:none;
}
For all pages and posts:
/*Hide Page Title*/
.entry-title {
display:none;
}