WordPress Docs
Version 9.0
WordPress Theme
The SmartAcre theme uses Advanced Custom Fields PRO to create a modular CMS that is easy to use and tailored for the design of your site by utilizing the ACF Flexible Content field to create an interface where you can add and arrange modules to create different layouts. The SmartAcre theme is built using the most popular and well supported frontend frameworks available. These frameworks are linked below for your reference.
| Framework | Description |
|---|---|
| Bootstrap 5.3 | Bootstrap powers the frontend UI of the SmartAcre Theme. Bootstrap components are used to create navigation drop downs, search modal popups and an off canvas collapsable mobile menu. Using Bootstrap components ensures that the site is accessible and compatible with all current devices. |
| Font Awesome 6 | Use any icon from the Font Awesome 6 Pro library. Included with a SmartAcre dedicated hosting plan. |
| Google Fonts | Google Fonts provides a free catalog of open-source fonts to choose from. The SmartAcre Theme uses the Inter font by default but can be customized to use any Google Font. |
| Google Maps API | The Maps JavaScript API is used for all map integrations. For example the flexible template Google Map module. |
| Google Custom Search JSON API | The SmartAcre Theme uses the Custom Search JSON API to allow your site to search multiple web properties using a Google Programmable Search Engine. See instructions for creating a Google Custom Search engine. |
Plugins
The SmartAcre Theme prioritizes security and only uses the most secure and trusted WordPress plugins. Each plugin is listed below with a description of why each is used.
| Plugins | Instructions |
|---|---|
| ACF Content Analysis for Yoast SEO | This plugin ensures that Yoast SEO analyzes all ACF content including Flexible Content. This allows Yoast to calculate seo scores and readability scores correctly. |
| Advanced Custom Fields PRO | Advanced Custom Fields PRO is a premium plugin for WordPress. The ACF Flexible Template uses ACF PRO to create a modular CMS interface that is easy to use. Included with a SmartAcre dedicated hosting plan. |
| Classic Editor | Use Classic Editor to hide the Gutenberg interface while using the ACF Flexible Template. |
| Nested Pages | This plugin styles the page listing which is useful for managing a large number of pages. |
| Redirection | Redirection is used for redirecting old urls to prevent 404 errors. Redirection is the most popular redirect plugin for WordPress. |
| TinyPNG – JPEG, PNG & WebP image compression | TinyPNG will automatically apply lossless compression to all jpgs and pngs that are uploaded into the media library. The first 500 compressions each month are free. |
| WP Mail SMTP | By default the SmartAcre Theme will send emails from wordpress@www.smartacretheme.com. WP Mail SMTP can be used to customize which email WordPress sends email from which can help with email deliverability. To use Google Workspace or Gmail as your SMTP service follow these instructions. |
| WP Rocket | WP Rocket is a premium cache plugin for WordPress and the only cache plugin that is compatible with WP Engine. Included with a SmartAcre dedicated hosting plan. |
| Yoast Duplicate Post | Yoast Duplicate Post can be used to quickly copy a page or post. This is especially usefull for copying pages created with the ACF Flexible Template. |
| Yoast SEO | Yoast SEO improves the SEO of your site. Yoast SEO is the most popular SEO plugin for WordPress. |
Theme Settings
In the customizer you can modify settings for the theme.
Admin > Appearance > Customize
| Settting | Description |
|---|---|
| Site Title | Under site identity edit the title and tagline for the site. |
| Site Icon | Under site identity upload a site icon that is shown in the browser tab or anywhere the website is bookmarked. |
| Header Logo | Under site identity upload a custom logo to be used in the header. |
| Header CTA | Under header add text and a link to enable the call to action button in the header. |
| Footer Logo | Under footer upload a custom logo to be used in the footer. |
| Footer Description | Under footer add a description to show under the footer logo. |
| Social Links | Under footer add links to your social profiles. |
Navigation Menus
Menus are located under Appearance. Modify existing menus or create a new menu and assign it to a location. The SmartAcre Theme has multiple menu locations listed below.
Admin > Appearance > Menus
| Location | Description |
|---|---|
| Main Menu | The main menu is the main navigation of the site. Supports drop downs and mega drop downs. To activate a mega dropdown add the class mega-menu-dropdown to a top level menu item with children. Then add class mega-menu-dropdown-columns or mega-menu-dropdown-tabs to define the style of mega menu. |
| Utility Menu | The utility menu is a smaller set of links above the main navigation. Supports drop downs. |
| Footer Menus | There are multiple footer menu locations. One for each column of links in the footer. |
| Privacy Menu | The menu at the bottom of the footer along side the copyright. |
Search
Search can be enabled / disabled in the customizer. The SmartAcre Theme will use WordPress search by default but also has the capability for Google Custom Search built in.
Admin > Appearance > Customizer > Search
| Search | Description |
|---|---|
| WordPress Search | The default search method for WordPress. If using WordPress search it is recommended to use the Relevanssi plugin to enable WordPress to search all custom fields. |
| Google Custom Search | Google Custom Search enables your site to search multiple web properties using a Google Programmable Search Engine. To enable Google search you need to create a Custom Search JSON API key and create a Programmable Search Engine. |
Flexible Template
The Flexible page template is the main template used for creating pages. The Flexible template uses Advanced Custom Fields PRO to create a modular CMS that is easy to use and tailored for the design of your site by utilizing the ACF Flexible Content field to create an interface where you can add and arrange modules to create different layouts.
Flexible Aspot
The Aspot field has the Flexible Aspot option which is the most versitile layout for creating aspots for your pages. The Flexible Aspot is designed to allow you to easily create different aspots while making sure you stay consistent with the entire site.
The Options dropdown contains settings that allow you to customize the aspot.
| Option | Description |
|---|---|
| Background Image | Add a background image. |
| Background Video | Add a background video that will auto play. |
| Background | Add a background style. |
| Overlay | Overlay styles add a layer over top of the background. |
| Content Inverse | Toggle content inverse on if the color of the background is dark. |
| Aspot Height | Set the minimum height of the aspot. |
| Content Width | Adjust the width of the aspot message. |
| Content Align | Adjust the alignment of the aspot message. |
| Full Screen Height | Makes the aspot the same height as the browser window to fill the entire screen. |
| Parallax Background | Add a parallax effect to the background. |
| Parallax Overay | Add a parallax effect to the overlay. |
Flexible Layout
The flexible layout is the most versatile layout. Within each flexible layout you can add multiple modules. Setting the width of each module creates a column structure. Mix and match different modules to create your own design.
The Options dropdown contains settings that allow you to customize the layout.
| Option | Description |
|---|---|
| Background Image | Add a background image. |
| Background | Add a background style. |
| Content Inverse | Toggle content inverse on if the color of the background is dark. |
| Padding Top | The top padding of the layout container. |
| Padding Bottom | The bottom padding of the layout container. |
| Gutter Width | The width of the gutters between each column (module). |
| Label | The label of the layout section. This text is used to create an html ID that can be used as an anchor link for the section. |
| Vertical Align | The vertical alignment of the columns (modules). |
| Horizontal Align | The horizontal alignment of the columns (modules). |
| Full Screen Width | Toggle full screen width on to make the layout section expand outside the container to the full width of the screen. |
Modules
Below is a list of the default modules that are included with the SmartAcre Theme. In addition to default modules, custom modules can be created and tailored for each site.
| Module | Description |
|---|---|
| Content | The content module adds a rich text field that has all of the functionality of a classic TinyMCE WordPress editor with the addition of a few custom shortcode buttons. The shortcode buttons allow you to easily add CTAs, forms and videos into any content module. Each rich text editor will also come pre-loaded with brand colors for styling text. |
| Image | The image module adds a singular image upload field. The field is design to allow you to add an image that will be styled to match the design of your website. Image fields also take priority in two column layouts on mobile. When the site responds to a mobile layout the image field will be ordered first in any layouts with two columns. |
| Video | Embeds a video. YouTube and Vidyard videos are lazy loaded automatically. |
| HTML | For adding unfiltered raw HTML code. |
| Recent Post | Shows the recent post of a selected post type or a selected post. Adding multiple recent post modules for the same post type will not show duplicate posts. |
| Google Map | Add a Google map with one or more location pins. A Google Maps API Key must be added under theme settings in order for the Google Maps module to work. Add API key here: Admin > Appearance > Customize > Google Maps |
Shortcodes
The SmartAcre Theme comes with several shortcodes that can be used within any rich text editor. Shortcode buttons are added to the editor toolbar to give you a simple interface that generates the shortcodes automatically.
Button Shortcode
The button shortcode can be used to add call to actions to any rich text editor. It can also be used to add arrows to text links. Insert the code below into any content editor to create a button.
[button text="Lean More" url="https://www.smartacretheme.com/" style="btn btn-primary"]
| Attribute | Description |
|---|---|
| Text | The text of the button. Default is “Learn More” |
| URL | The url the button should link to. Default is the homepage. |
| Target | The target value of the link. If set to “_blank” the link will open in a new browser tab. Default is none. |
| Style | The style of the button. Default is “btn btn-primary”. Possible values: ‘btn btn-primary’ ‘btn btn-primary-outline’ ‘btn btn-secondary’ ‘btn btn-secondary-outline’ ‘btn btn-white’ ‘btn btn-white-outline’ ‘arrow-link arrow-right’ ‘arrow-link arrow-left’ |
Form Shortcode
The SmartAcre Theme has form embed shortcodes for HubSpot, Marketo and Pardot. In order for the HubSpot and Marketo shortcodes to work, you must add your account ID under the forms section of the customizer.
Admin > Appearance > Customize > Forms
Forms can be embedded into any rich text editor. Below is an example HubSpot form shortcode. The SmartAcre Theme includes css that applies a modern floating label style to all HubSpot form embeds. Insert the code below into any content editor to embed a form.
[hubspot_form id="HUBSPOT_FORM_ID"]
| Attribute | Description |
|---|---|
| Form ID | The ID of the form to embed. (Required) |
Video Shortcode
There are video shortcodes for YouTube, Vidyard and Wistia. These shortcodes can be used to embed these videos into any rich text editor. Insert the code below into any content editor to embed a video. YouTube and Vidyard videos are lazy loaded automatically.
[youtube_video url="YOUTUBE_URL"]
[vidyard_video url="VIDYARD_URL"]
[wistia_video id="WISTIA_VIDEO_ID"]
| Attribute | Description |
|---|---|
| Video URL/ID | For YouTube and Vidyard add the url of the video. For Wistia add the ID of the video. (Required) |
Style Guide
The style guide is a reference for all content styles that can be used in each rich text editor. Below are examples of CSS classes and code that can be used to create the style for each element.
Typography
A set of harmonious typography scale.
| Code | Example |
|---|---|
<h1> |
Heading H1 |
<h2> |
Heading H2 |
<h3> |
Heading H3 |
<h4> |
Heading H4 |
<h5> |
Heading H5 |
<h6> |
Heading H6 |
.text-lg-overline |
Large Overline Heading |
.text-md-overline |
Medium Overline Heading |
.text-sm-overline |
Small Overline Heading |
.text-xs-overline |
Extra Small Overline Heading |
Add class .text-lg to create paragraph large text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Add class .text-md to create paragraph medium text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Add class .text-sm to create paragraph small text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Add class .text-xs to create paragraph extra small text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae congue nullam consectetur ornare sed in leo.
Example blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Unordered list
- Unordered list bullet
- Unordered list bullet
- Unordered list bullet
- Unordered list bullet
Ordered list
- Ordered list bullet
- Ordered list bullet
- Ordered list bullet
- Ordered list bullet
Buttons
A button is used to trigger actions based on a user’s interaction.
| Code | Example |
|---|---|
class="btn arrow-right" |
Learn More |
class="btn arrow-left" |
Learn More |
class="btn btn-primary arrow-right" |
Learn More |
class="btn btn-primary-outline arrow-right" |
Learn More |
class="btn btn-secondary arrow-right" |
Learn More |
class="btn btn-secondary-outline arrow-right" |
Learn More |
class="btn btn-white arrow-right" |
Learn More |
class="btn btn-white-outline arrow-right" |
Learn More |
Links
A link is used to trigger actions based on a user’s interaction.
| Code | Example |
|---|---|
| Stand Alone Link | |
class="arrow-right" |
Link with arrow right |
class="arrow-left" |
Link with arrow left |
class="link-external" |
External link |