Below are some common code reference you will find when we develop websites. Many we hope you will find useful. Please bookmark this page for future use.
Posts/Page Management
Creating Posts/Pages
First, you want to go to the Page or Post menu on the left sidebar (depending on whether you want to create a post or a page) of the administrative area. Click “Add New”.
You will then see a blank page/post with the title field in focus for you to fill out first. When you start typing, the permalink (link of the page in your site) will be automatically generated, but you can change it later.
You can then start populating the page with content.
We use content style tags as a best practice. When using WordPress, you can see them in the WYSIWYG text editor. Depending on your version of WordPress, the visual editor area may look different, but it should be here:
You can select the text you wish to format and then use the dropdown to change the formatting to one of the following:
- Paragraph
- Address (used to encase contact information)
- Pre (used for code highlighting)
- Headings 1-6
Your site will be customized to utilize the majority of these styles. These styles are used elsewhere within your site and are ordered by use (also it is a best practice to reserve Heading 1 for the page title). You can also use HTML formatting in text view (see http://www.w3schools.com/tags/tag_hn.asp). You can encapsulate paragraphs with an opening and closing tag like so, </p>paragraph here</p>. The same can be done for Headings (<h1>Heading 1</h1>, <h2>Heading 2</h2>, etc.) and address and pre.
Inserting Copy
When inserting copy from an outside source (not typed directly in the text editor window) it is recommended you choose the eraser icon after inserting, or use the paste as plain text tool.
This will remove styles that certain word processors use that can muddy up your website and remove any custom style overrides we have implemented.
Using Excerpts
When you want to limit exposure to copy, such as in a blog archive, you will want to use the “Read More tag”. This will made all content under the tag be hidden and a link will be visible to users to click to view all content.
We do not always use this as it is determined on a case basis if your needs do warrant it.
Using the Bootstrap Shortcodes
We utilize a plugin to create Boostrap-compatible shortcodes if your site utilized a Bootstrap framework. You can see the “B” icon at the top of your editor window next to “Add Media”.
When you click it, you can see a full range of shortcodes. The most common shortcodes in your site will be the grid utilities, buttons, and collapsibles (accordions). There is a small guide with the shortcodes that provides an explanation of how they work and samples. To give you a brief overview of how the grid utilities work, we’ll go through the basics. Your site should already have these utilize to a degree that you could work with as examples.
The shortcodes would be based on 12 columns (generally unless your site warrants otherwise). You would define how many columns are taken up with the shortcode. This also needs to apply for mobile too, because you’ll have to use the shortcodes to apply both. There is definitely going to be a learning curve with it.
For example:
The sm defines tablet and above. The xs defines mobile. It spits out the code to interpret this as “if it’s mobile, take up the width of 12 columns (100% width), if it’s tablet and above, take up the width of 6 columns (50% width).
In mobile it will look like this:
Text
Text
In tablet and up it will look like this:
Text Text
You can also use “md” (medium) and “lg” (large – such as over 1200px wide browser windows) for further refinement. For a more visual explanation of how Bootstrap grids work, check out the Bootstrap 3 grid system explained.
For collapsibles you can use the following protocol:
The example above outputs this:
[collapsibles]
[collapse title=”Collapse 1″ active=”true”]
Content for Collapse 1
[/collapse]
[collapse title=”Collapse 2″]
Content for Collapse 2
[/collapse]
[collapse title=”Collapse 3″]
Content for Collapse 3
[/collapse]
[/collapsibles]
If you would like the specific accordion to be open, you would include the active=”true” method.
For buttons, the process is very simple.
Will output:
[button type=”success” size=”lg” link=”#”]Button Link[/button]
Obviously the styles will be customized to your site, especially when it comes to colors. Bootstrap uses default colors for stylizing we cutomize. They are:
- Default
- Primary
- Success
- Info
- Warning
- Danger
There are also varying sizes for buttons, from extra small to large.
Media
Inserting Media
Click “Add Media” at the top of the page or post you are editing.
You can add media by selecting files (through your computer explorer). All selections will then begin to upload.
You can view existing media items to add (Click Media Library, select an image, then insert into post at the bottom right).
As you can see, there are fields for media. Whatever you edit in the media field (Title, Caption, Atl, Description) will save and apply to the image wherever it is inserted.
Title – This is used for SEO purposes and is highly recommended you fill this out. By default, WordPress will use the name of the file in this field.
Caption – Used in Google Image Search results
Alt Text – This is used for SEO purposes and is highly recommended you fill this out. If you hover over an image, the Alt information is what is rendered.
Description – Can be disregarded unless specifically indicated to be used by you for your particular website. This is used for WordPress for the attachment page which is not utilized in all website build.
When uploading, make sure you choose None in “Link to”. Make sure your images are optimized as large images increase load time on the website. You can choose a smaller size when inserting into your post. Under 800 pixels wide is generally recommended (shown is Width x Height).
Updating Media
Updating Media can be done easily in the editor window. If you click on an image you will see a pen icon and an “X”. Clicking on the “X” will remove the image.
Choosing the pen will open an editor window.
You will notice you can change the caption and ALT tag here, the alignment, the title, and also adjust the link and class for the link and image. When working with responsive sites, we generally use the Bootstrap framework. If the Bootstrap framework is used, and you would like your image to scale proportionately in layout, use the “img-responsive” class. If you would like a border to appear around the image, use “img-thumbnail”. You can also combine classes like “img-responsive img-thumbnail”.
You can also edit the image and re-crop from this area, or replace the image with another in your library quickly. If your screen doesn’t look like the one above, you are operating under an older version of WordPress. Contact us for a maintenance quote on getting you up to speed!
Links
Create Links
When you wish to link text to a website, document, or internal page, you will need to select the text and then click the link icon 
.
The icon will only be visible when text is selected. A dialog box will open allowing you to insert the link you would like.
It is recommended to check “Open link in a new window/tab” when you are directing your visitors away from your website. This allows your website to still be on their screen if they close the page they went to.
You will see there are also pages and articles visible that you can link to just by clicking on one. It will auto-populate the URL and Title fields.
Remove/Edit Links
If you at any time would need to unlink an item, you would click on the linked item and then the Break Link icon 
which should show up as being selected. You can also click on the Link icon to edit any links that have been created.
Editing Posts/Pages
First, you want to go to the Page or Post menu on the left sidebar (depending on whether you want to create a post or a page) of the administrative area. In this example we will look at Pages. Click “All Pages”.
You will then see a list of all the pages in the site. This is also applicable to posts. If you hover over an item you will see editing functions. You can click “edit” or click on the item directly to edit it.
Publishing Posts/Pages
[row]
[column sm=”6″]
[/column]
[column sm=”6″]
[/column]
[/row]
- Status – You will have the ability to change your status (draft if you need to continue working on it later).
- Visibility – (Public is visible to all, Private posts are automatically published but not visible to anyone but those with the appropriate permission levels (Editor or Administrator). For Password, a visitor to your site must enter the password in the box in order to see the content.
- Publishing – For Publish date, you can choose to publish immediately or schedule a post/page for a future date. This is also beneficial in ordering old posts if you want to start populating based on pre-written articles of content.
SEO
We use the Yoast plugin for SEO which allows for per-page/post customization of information beneficial to SEO.
General Tab
The snippet preview shows the information currently for the particular post/page. You can click on the question mark icon to get further assistance on what fields mean.
- Focus Keyword – If you enter a focus keyword, the Page Analysis functionality will use that as input for its analysis of your post. It can only do this for one focus keyword at a time. You can have more than one word, but this should be one topic.
- Seo Title – Default is the page title, this is what is shown at the top of the snippet in a search query (such as Google results).
- Meta Description – This is what is shown in the snippet under the URL. This is very important for showing users on a search result page what is on the page. If you do not have text on the page, you can populate what would render on a result here.
Page Analysis
This is information generated by the focus keyword. It can help highlight problem areas that you can work on to boost your SEO. We can assist in a consulting capacity on how to better improve your SEO.
Advanced
In general, you should leave this default. If you do not want this page to appear in search engine results, choose “Nofollow” in the bulleted selection area. You can also choose to exclude in the sitemap (used with Google Webmaster Tools to index your site – not publicly visible on the website).
Social
Here you can override what Facebook and Google+ pulls in when you or others share your post/page. As you can see, you can also override the Facebook image that is pulled. This is especially good when you don’t have images on the page you want to share, but do have an image you want to associate with the page for sharing.
User Controls
User Roles
Administrator – somebody who has access to all the administration features within a single site.
Editor – somebody who can publish and manage posts including the posts of other users.
Author – somebody who can publish and manage their own posts.
Contributor – somebody who can write and manage their own posts but cannot publish them.
Subscriber – somebody who can only manage their profile.
Some sites we build do not utilize blogs which is used for Editors and below, or they serve a different function. If you wanted to allow a user to post blog entries, you would make them an Author. If you wanted them to administer all blog entries (such as adding, editing, and deleting) you would make them an Editor. They can also change the post author (such as whoever wrote the post to another user, as we typically have done after making posts with our author name and changing them to yours).
Adding a User
Go to Users>Add New and fill out the following information for a new user:
We advise against making a user called “admin” because it’s the default name and unauthorized users may attempt to use it to gain access. Once you create a username, it can’t be changed.
It is recommended you also make the password strong. This will make it more difficult for unauthorized users to gain access to the website. We do have security measures in place to block users who have several unsuccessful attempts(5) at entering the back-end.
At the bottom you will see a Role selection field. This is where you would assign one of the roles mentioned previously.
Editing a User
You can change the First and Last Name fields and edit the Nickname (Users > All Users > Edit (selected user). Whatever is set as “Display name publicly as” is what will appear as the author of a post. We will generally set up a color scheme for you that matches your brand and apply that in the Admin Color Scheme area, but you are free to choose another.
Some of the fields in the profile editor won’t be visible on your website. It depends on the design and functionality needed in your site.
Plugins
Gravity Forms
We use Gravity Forms if your site needs require it. We currently use Gravity Forms on this site. If you require a form with payment processing, or a poll/survey, then Gravity Forms would work better than Contact Form 7 (explained later).
If you look at the left side of your administrative sidebar, you will see a “Forms” link. This allows for global settings (settings menu) and per-form settings, to which you would need to explore individual forms for. By default, we have enabled some basic spam control procedures. We have also styled the form to match your site, which is why if you were to look under global settings, you would see the CSS set to no.
Contact Form 7 + Really Simple Captcha
Contact Form 7 actually has a quite extensive site for documentation. It’s not always the best from a user-friendly standpoint and we’ve often customized the forms to match the style of your site and to work with a framework we’re using (like Bootstrap) so it’s easier to style.
The first thing we usually do is remove the ability for Contact Form 7 to load in their stylesheet. We also remove the ability for it to automatically create paragraph tags around elements using the code in the wp-config file:
[code]define (‘WPCF7_LOAD_CSS’, false); // Added to disable CSS loading for CF7
define( ‘WPCF7_AUTOP’, false ); //disables CF7 auto-paragraphs[/code]
We can access the Contact Forms through the sidebar in the administrative area (Under “Contact” which should be above Appearance if you are an administrator).
You will see existing forms and the shortcode.
To embed the form in your page (or widget if you have the Shortcodes Everywhere plugin installed) you can select the shortcode to paste into your page. Notice the title is the name of your form. You can have multiple forms in your site. By default, the plugin creates a sample contact form. In most cases, this is enough information to collect (Name, email, subject, message).
To edit a form, click the form you want to edit.
Below this you will see the current form information as well as a tag generator. The tag generator makes shortcodes you can use for the left side (you can drag/drop).
There are many tags available. If you utilize a Constant Contact list, you might want to consider integrating it. There is a third-party plugin to allow Constant Contact to work with your form. Contact us for further integration.
The next and last step is to set the notification email that is sent to administrators. You can set this up for each form. You can also include CC (formatted Cc as shown) or BCC (Bcc).
To send an auto-reply to the person who filled out the form, you need to check “Use mail (2)”. You can add to the message such as a guideline of when you will respond back, or to include a special download link. In the file attachment area you can also include the link to the attachment. It is relative to the wp-content directory unless you list an absolute path (http://filepath).
Site Backups
We currently use BackupBuddy for backing up the site. Typically we have a schedule set up so backups will be created automatically and sent to your location of choice if indicated, or directly on the server otherwise. To initiate a backup in any interim period, you can go to BackupBuddy > Backup and then choose whether to run a Database Only or Complete Backup. You can also download previously made backups that have been saved locally (to the server).
Site Security
As a standard practice with all of our site installations, we use the Pro version of our security plugin. A few things we will do to protect your site besides scheduled backups are the following:
- Have no admin user
- Running a safe version of jQuery
- Remove user id 1 (change to another value)
- Hide WordPress from bots
- Hide the backend area (masked URL)
- Enforcing strong passwords for site administrators and editors.
- Brute force protection
- Blacklisted known offenders