New Location : 1523 S Bell Ave, Suite 101, Ames, IA 50010 - Starting February 24th, 2025

WordPress Tutorials

Welcome to our WordPress tutorial! Below you will find all of the information need to make basic content changes to your website. Feel free to contact our team for any assistance that you need, or if you’d like to make any larger changes to your website. We’re always happy to help.

01 Getting Started

WordPress is a publishing software that is used to create websites. Since it was established in 2003, WordPress has become one of the most popular website platforms, powering 35% of the internet! WordPress powers websites for a wide range of businesses from small hobby blogs to large companies like Microsoft, Best Buy and Walt Disney.

One of the primary benefits of using WordPress for your company’s website is that it is easy to learn and use – no coding knowledge is required to make basic content updates to your website. WordPress is also extremely customizable and has virtually endless functionalities that we can implement on your website.

 

WordPress login page

  1. To login to your website: Add /wp-admin to the end of your website domain. Ex: https://yourwebsite.com/wp-admin
  2. You’ll reach a page with a login screen, that should look similar to the image above.
  3. Enter your username and password that our team has provided you.
    Login Security Notice: We use a security plugin on your website to prevent suspicious activity, and to protect your data. If your login is not working, please contact our team for login credentials. This helps to prevent being blocked from logging in to your website.

 

Screenshot of WordPress dashboard

  1. To navigate to the front end of your website: Hover over the site title in the upper left corner of the screen > click “Visit Site”. To navigate back to the dashboard, follow the same steps, except click “Dashboard”.
    WordPress dashboard - how to view front end and dashboard
  2. Google Analytics Quick View: From the dashboard you can see some quick data about traffic to your website. Interested in learning how to increase traffic? Contact our team to learn more about our SEO and digital marketing services.
  3. Other Links: Make note of all the links along the left side of the dashboard, the tabs you will probably use the most will be “ Posts”, “ Media” and “ Pages”. You may utilize some other tabs here depending on the functionalities of your website.
  4. To log out of your account: Hover over your name in the top right corner of the dashboard, click log out.

02 Two-Factor Authentication

  1. Download Your Preferred Authenticator App. Visit the Google Play Store or Apple App Store on your smartphone and download one of the authenticator apps from the list below. If you already have an authenticator app installed, proceed to the next step. In this guide we’ll use the Google Authenticator app as an example.
    List of Authentication Apps
    • Google Authenticator 
    • Sophos Mobile Security
    • FreeOTP Authenticator
    • 1Password (mobile & desktop version)
    • LastPass Authenticator
    • Microsoft Authenticator
    • Authy 2-Factor Authentication
    • Any other authenticator app that supports Time-Based One-Time Passwords (TOTP)
  2. Login to your website by visiting: “yourdomain.com/wp-admin” in a browser. This will take you to the WordPress login page where you can enter your username and password to get signed in to your site.
    Screenshot showing WordPress login screen and where to enter username, password, and click log in.

    Trouble logging in? Email us at cs@saltech.com!
  3. Go to WordFence Login Security Page.
    Screenshot of the WordPress dashboard showing the location of 'Login Security' link.
  4. Save your Recovery codes by copying and pasting your recovery codes into a file and save it in a safe place that you can easily access. Alternatively, you can download your recovery codes and save the file in a safe place.
    Screenshot showing the location of the Download Recovery Codes.
  5. Open Your Authenticator App you downloaded in a previous step. We’re using Google Authenticator in this example. Next, tap the Add (+) icon. Then, tap the Scan a QR code button.
    Screenshots of Authenticator app. Click Add a code, click the plus, click 'Scan a QR code'.
  6. Scan the Wordfence QR Code on your computer screen. A six digit code will be added to your authenticator app with your domain name and username. A new code will appear automatically every 30 seconds. Enter the six digit code in the Wordfence box. Then click Activate.
    Screenshots showing the QR code in Wordfence, the code from Google Authenticator and pasting it into Wordfence.

    *Note: If an error occurs after clicking Activate, your code may have expired. Try entering the six digit code from your authenticator app again.
  7. Successful 2FA Activation. When you have successfully activated 2FA, a confirmation popup will appear and ask you to download your Recovery Codes. If you saved your recovery codes before the activation, skip to the next step. If you didn’t save your recovery codes, click Download and save the file in a safe place.
    Download Recovery Codes popup. Click Download if you need to download them.
  8. Test your 2FA Activation by logging out of your site. Login to your website again by visiting: “yourdomain.com/wp-admin” in a browser. Enter your username and password and click Log In. Enter the six digit 2FA code from your authenticator app and click Log In. Make sure you enter the code corresponding to your domain name and username. If an error occurs, your code most likely expired. Try entering a new code from your authenticator again. Once you login with 2FA successfully, you’re all done!
    Screenshots showing WordPress login screen.

    Trouble logging in? Email us at cs@saltech.com!
  9. Using a Recovery Code. In the event you lose access to your authenticator device, you may use one of the five recovery codes that you saved when you activated your 2FA. Recovery codes are 16 characters long and contain letters and numbers. They look like this: 5199 5c24 77dc 0ed7 These are one time use codes, once it’s used, it can not be used to login again. Enter your recovery code in the Wordfence 2FA Code box and click Log In to gain access to your website.
    Screenshot showing Wordfence 2FA code box. Enter your code and click Log in.

    If you ever need more recovery codes, you can generate more in the Wordfence Login Security screen.
    Screenshot showing where to click 'Generate New Codes'

Download Your Preferred Password Manager. Sign up for one of the password managers from the list below. If you already use a password manager, make sure it supports Time-Based One-Time Passwords (TOTP). In this guide we’ll use 1Password as an example.
List of Password Managers:

  • 1Password
  • Bitwarden
  • Keeper 
  • NordPass
  • Any other Password Manager that supports Time-Based One-Time Passwords (TOTP)

Using a Browser Extension to activate 2FA:

  1. Add Password Manager as a Browser Extension. If your password manager doesn’t support browser extensions, skip to the next section. Go to your browser’s extension store. We’re using Google Chrome for this example Search for your password manager. We’re using 1Password as an example. Add the extension to your browser.
    Chrome Webstore screenshot showing process of searching for password manager extension and adding it to Chrome.
  2. Login to your website by visiting: “yourdomain.com/wp-admin” in a browser. This will take you to the WordPress login page where you can enter your username and password to get signed in to your site. Next, click on Save in “Your Password Manager” and create an entry to save these login details for future use.
    Screenshot showing WordPress login screen and where to click Save in 1Password.

    Trouble logging in? Email us at cs@saltech.com!
  3. Go to WordFence Login Security Page.
    Screenshot of the WordPress dashboard showing the location of 'Login Security' link.
  4. Save your Recovery codes by copying and pasting your recovery codes into a file and save it in a safe place that you can easily access.
    Screenshot showing the location of the Download Recovery Codes.

    With 1Password, you can add a note to your site details and paste these codes there. Click save in the top right corner.
    Screenshots showing how to add notes to a password manager.
    Alternatively, you can download your recovery codes and save the file in a safe place.

  5. Activate 2FA in the Password Manager Extension. In your browser extension bar, click on your password manager icon to open it. Make sure your website is selected in the list. Click the three dots to open up more options. Click on Scan QR Code to add the One-Time Password feature to your password manager.
    Screenshots of password manager browser extension showing where to find 'Scan QR Code'.
    A six digit code will be added to your password manager with your site login details. A new code will appear automatically every 30 seconds. Copy the one-time password and paste the six digit code in the Wordfence box. Then click Activate.
    Screenshot showing where to find the one-time password to Copy.
    Screenshot showing where to paste the 2FA in Wordfence.

    *Note: If an error occurs after clicking Activate, your code may have expired. Try entering the six digit code from your authenticator app again. 

Using your Password Manager without a Browser Extension:

  1. Save your Login Details in your Password Manager. Log in to your password manager. Create a new entry. Enter your username and password in the fields. Click Save.
    Screenshots in a password manager showing how to create a new item, add details, and save.
  2. Use the Extension to save your Login Details. Visit: “yourdomain.com/wp-admin” in a browser to login. This will take you to the WordPress login page where you can enter your username and password to get signed in to your site. 
    Screenshot showing WordPress login screen and where to enter username, password, and click log in.

    Trouble logging in? Email us at cs@saltech.com!
  3. Go to WordFence Login Security Page.
    Screenshot of the WordPress dashboard showing the location of 'Login Security' link.
  4. Save your Recovery codes by copying and pasting your recovery codes into a file and save it in a safe place that you can easily access.
    Screenshot showing the location of the Download Recovery Codes.

    With 1Password, you can add a note to your site details and paste these codes there. Click save in the top right corner.

    Screenshots showing how to add notes to a password manager.
    Alternatively, you can download your recovery codes and save the file in a safe place.

  5. Activate 2FA in the Password Manager. In 1Password, click Edit. Then click +add more. Then click One-Time Password from the popup menu.
    Screenshots of password manager showing how to add a One-Time Password.
    Go back to Wordfence and copy the text under the QR Code. Paste the text in the one time password field and click Save in the top right corner.
    Screenshots showing how to copy code below QR code, and paste it into the password manager.

     

  6. Add 2FA Code to Wordfence. Click on the OTP to copy the One-Time Password. Paste the six digit code in the Wordfence box. Then click Activate.
    Screenshots of a password manager and Wordfence showing how to copy the one-time password and input it into Wordfence.

    *Note: If an error occurs after clicking Activate, your code may have expired. Try entering the six digit code from your authenticator app again. 

Successful 2FA Activation & Testing 2FA. 

  1. When you have successfully activated 2FA, a confirmation popup will appear and ask you to download your Recovery Codes. If you saved your recovery codes before the activation, skip to the next step. If you didn’t save your recovery codes, click Download and save the file in a safe place.
    Download Recovery Codes popup. Click Download if you need to download them.

     

  2. Test your 2FA Activation by logging out of your site. Login to your website again by visiting: “yourdomain.com/wp-admin” in a browser. Enter your username and password and click Log In. Enter the six digit 2FA code from your authenticator app and click Log In. Make sure you enter the code corresponding to your domain name and username. If an error occurs, your code most likely expired. Try entering a new code from your authenticator again. Once you login with 2FA successfully, you’re all done!
    Screenshots showing WordPress login screen.

    Trouble logging in? Email us at cs@saltech.com!

     

  3. Using a Recovery Code. In the event you lose access to your authenticator device, you may use one of the five recovery codes that you saved when you activated your 2FA. Recovery codes are 16 characters long and contain letters and numbers. They look like this: 5199 5c24 77dc 0ed7 These are one time use codes, once it’s used, it can not be used to login again. Enter your recovery code in the Wordfence 2FA Code box and click Log In to gain access to your website.
    Screenshot showing Wordfence 2FA code box. Enter your code and click Log in.

    If you ever need more recovery codes, you can generate more in the Wordfence Login Security screen.
    Screenshot showing where to click 'Generate New Codes'

If you are running into issues using your 2FA code, you can try some of the troubleshooting steps below. 

  1. Make sure your authentication app or computer are in the correct date and time in your time zone.
  2. Install any device operating system updates and ensure your authentication app is using the latest version.
  3. Turn your phone or tablet fully off and back on again.
  4. If you are still having troubles, email us at cs@saltech.com!

03 Blog Posts

Your website might include blog posts to display news, announcements and other informational resources on your website. Blog posts are a great way to continuously produce new content on your website, which can be useful for current & prospective customers, as well as improve your ranking in Google and other search engines.

  1. To view your blog posts: Head to the WordPress dashboard (/wp-admin). Click the “ Posts” tab on the left side of the screen. You will see a table with all of the posts that are published on your website.
  2. To edit or delete an existing post: Find the title in the lists of posts, hover over the title > click “Edit” or “Trash“.
  3. To create a new post: Click the Add New button near the top of the screen. View the next section in this tutorial to learn how to edit your blog post.
  1. Enter Title: It’s best to keep your title short, yet descriptive.
  2. Enter Post Content: Use the “Visual” editor to add/edit content. Using the visual editor is similar to editing content in a Word document. For more information on how to use this visit this tutorial from WordPress.org
  3. Post Categories & Tags: If your website utilizes categories or tags, select the one’s you’d like to assign to your post. These make it easy for users to filter posts and may also affect where the post is displayed on your website.
  4. Set Featured Image: Select “Set Featured Image” to open the media library to select an image to use. This image is the large image that appears across the top of your website and it may be used in other parts of your website to link to your blog post. It is best to use a large, quality image for this.
  5. Publishing your post:
    1. Publish Now: Click the blue Publish button.
    2. Save & Edit later: Click the Save Draft button.
    3. Schedule: Click the “Edit” link next to “ Publish Immediately” > select desired publish time > click Schedule

04 Media Library

Image optimizing is about reducing the file size of your image so that it does not slow down your website.

  • Resize Your Photos: Slider images, and other full-width background images can be about 1920px wide. Most other images on your website shouldn’t need to be any wider than 500-1000px, of course this can vary a little bit depending on where the image is placed on your website. Easily resize images using this website: https://bulkresizephotos.com/en
  • Compressing Images: Compressing images helps to reduce the file size even further, this is done by reducing the file size of an image, while still maintaining the highest level of quality required. Check out this website to easily compress images: https://imagecompressor.com/
  1. From the dashboard of your website, click the Media tab in the left sidebar.
  2. To upload new items, click “Add New”
  3. It’s best to name images using plain text, that is somewhat descriptive of the image, without being too wordy – this helps with SEO
  4. You can either drag & drop files to the upload area, or click “Select files” to select files from your computer.

Alt tags are important for SEO and website accessibility purposes. Screen readers, and search engine crawlers can’t actually see the images on your website. Alt tags help to provide a description of the image. When entering alt tags for an image, it is best to keep it short, yet descriptive.

  1. From the media library, click on the image you’d like to add an alt tag to.
  2. This will open up the Attachment Details. On the right side enter your Alternative Text to create an alt tag for your image.

Media Links allows you to give your users access to view/download files (like PDF’s, Images, and other various file types). These are often used on websites to create an archive of PDF files, etc.

  1. From the media library, select the desired file
  2. This will open up the attachment detail page
  3. Copy the “Copy Link”
  4. On the front end of your site, paste this link into the URL – see the next section for more information on how to add links to text.

05 Page Editor Basics X-Pro

  1. Navigate to the page you’d like to edit on the front end of your website
  2. In the top black bar hover over “Pro” > click “Edit Page”
  3. This will open up the page builder, where you can visually adjust the content on your website.
  4. On the left side of the screen is the main editing area. The right side of the screen is the live preview area.
  1. For most text edits, simple double click directly on the text you’d like to edit
  2. Type your changes directly within the page
  1. When editing text, highlight the text you’d like to add a link to
  2. Click on the link icon 
  3. Paste your desired URL in the URL field.
  4. To open the link in a new tab, Select “New Window” from the “Target” drop down – it is best to open external and PDF links in a new window
  5. Click “Okay” to attach the link to the selected text
  1. Select the image within the page you want to change.
  2. In the left side bar, hover over the small preview of the selected image.
  3. Click the to delete the image.
  4. Click the  to open the media library.
  5. Select your new image.

The easiest way to add new content to your page is to duplicate content that already exists. You can duplicate anything on the page from a single section of text, to an entire section.

  1. Hover over the content you’d like to duplicate until you see a blue or green outline.
  2. In the left side bar, click the “Duplicate” button near the top. – Click the “Delete” button to delete selection.
  3. To delete/duplicate an entire section: Click “Layout” in the top left, select the section from the side bar, click the or icon.
  4. You can drag and drop individual elements to the desired location on your page.
  5. See the next section to learn how to rearrange sections & columns on the page.
  1. At the very top of the left side bar click “Layout”.
  2. This will show you all of the sections on your page.
  3. Click the caret  icons to expand the section and see the rows/columns/elements that are inside of each section.
  4. As you hover over the items in the left side bar, you’ll see the items outlined in the right side of the screen.
  5. Drag and drop items to change the order
  1. Each time you open your page builder you will be able to “undo” changes that you make to your page.
  2. Note: that you cannot undo changes from past sessions of editing.
  3. Once you undo changes and start making edits again, you cannot get previous changes back
  4. Select the  icon on the very left edge of the page editor.
  5. This will open up the history of changes you have made in your current editing section.
  6. Click through the items until you reach your desired version

You can also just refresh the page without saving your changes to revert to the original version of the page

  1. When you’re done making changes, click SAVE in the bottom left corner of the screen.
  2. Click to exit the page editor and view your updated page.

06 Page Editor Basics - Elementor

  1. Navigate to the page you’d like to edit on the front end of your website
  2. In the top black bar click ‘Edit with Elementor’
  3. This will open up the page builder, where you can visually adjust the content on your website.
  4. On the left side of the screen is the main editing area. The right side of the screen is the live preview area.
  1. For most text edits, simply click directly on the text you’d like to edit.
  2. Type your changes directly within the page. A visual editor also will show on the left side of the page, and you can type your changes here as well.
  1. In the text editor on the left side of the page, highlight the text you want to turn into a link.
  2. Click on the link icon .
  3. Paste your desired URL in the field.
  4. If you need more options, click on the gear icon to open the options popup. Otherwise, click on the blue arrow button to apply the link.
  5. In the options popup, you can add the URL  and update the link text. If you want the link to open in a new tab, click the ‘Open link in a new tab’ checkbox. Note – it is best to open external and PDF links in a new window.
  6. Click ‘Add Link’ to attach the link to the text.
  1. Select the image within the page you want to change.
  2. In the left side bar, hover over the small preview of the selected image.
  3. Click ‘Choose Image’ to open the media library.
  4. Select your new image.

The easiest way to add new content to your page is to duplicate content that already exists. You can duplicate anything on the page from a single section of text, to an entire section.

  1. Hover over the content you’d like to duplicate until you see a blue or grey outline.
  2. Right click on the content, and select ‘Duplicate’ near the top of the menu. – Click “Delete” at the bottom of the menu to delete the content.
  3. To delete/duplicate an entire section: Hover over the section until you see the blue tab at the top of the section. Right click within the section and select ‘Duplicate’. To delete the section, click on the “x” on the blue tab, or right click in the section > select “Delete”.
  4. You can drag and drop individual elements to the desired location on your page.
  5. See the next section to learn how to rearrange sections & columns on the page.
  1. At the bottom of the left side bar in the dark grey bar, click on the icon with stacked squares . When you hover over it, it will say ‘Navigator’.
  2. This popup will show you all of the sections on your page.
  3. Click the caret icons to expand the section and see the columns/elements that are inside of each section.
  4. Clicking on the items in the Navigator will outline them on the page and scroll you to that element.
  5. Drag and drop the items to change the order.
  1. Each time you open your page builder you will be able to “undo” changes that you make to your page.
  2. Once you undo changes and start making edits again, you cannot get previous changes back.
  3. At the bottom of the left sidebar in the dark grey bar, click on the clock icon . It will say ‘History’ when you hover over it.
  4. This will open up the history of changes you have made in your current editing section.
  5. Click through the items until you reach your desired version. If you want to revert to the original version of the page, you can scroll to the bottom where it says ‘Editing Started’, or refresh the page without saving.
  6. Elementor also lets you revert to past revisions of the page. To view them, click on the ‘REVISIONS’ tab at the top of the left sidebar.
  7. Clicking on the revisions will update the preview to show you what it looked like. When you’ve found the one you want, click the ‘Apply’ button at the top of the left sidebar.
  8. Note: Revisions may be periodically deleted.
  1. When you are done making changes, click the green ‘Update’ button in the bottom left corner of the screen.
  2. Click the eye symbol next to the update button to open a new tab and view your changes.

07 Common Plugin Editing

Launch The Slider Revolution Editor —

  1. From the homepage of your website hover over “Slider Revolution” > Click the title of your slider
  2. Select the slide you want to edit: Hover over “ Slides” in the top left bar > Click on the slide you’d like to edit

To edit text —

  1. Click on the text box in the preview area
  2. In the right side bar, you will be able to edit the text within the text box

To edit button links —

  1. Click on the button in the preview area
  2. In the right side bar, click “ Actions
  3. This will launch a pop-up screen, Click on the existing link on the left. It will normally be “Simple Link”
  4. Paste your new “Link URL” on the right side.

To change the background image —

*Dimensions for slider photos are typically about 1920px X 750px. Using different dimensions can cause the image to be cut off, stretched, and/or blurred. It’s important to use high quality images for slider images, since this is the first impression a user has when they see your website.

  1. In the top right corner click on the images icon that looks similar to this: 
  2. This will open up the “Slide Options” panel, Make sure “Background” is selected.
  3. Under “Source” click the “Media Library” button
  4. This will open up the media library where you can select/upload a new background photo.

Saving Changes —

  1. In the bottom right corner click “ Save

Launch The Essential Grid Editor —

  1. From the WordPress dashboard find the “Ess. Grid” tab in the left sidebar (normally towards the bottom)
  2. Select the the green “ Settings” button next to the grid you’d like to edit

Adding a new Image/Grid Item —

  1. Click the blue “ Image(s)”
  2. Select “Bulk”
  3. Upload/Select image(s) from the media library (you can select a single image, or multiple images by holding down the [shift] key to click multiple images) > Click “Choose Images” button in the bottom right to add image(s) to the grid

Editing Grid Items  —

  1. Find the image in the grid you’d like to edit, click the green “” button to edit the element.
  2. In the pop-up screen you can upload a new image, Edit the Title/Excerpt, Add a link, etc. It’s easiest to view the edit screen of an existing element to see what fields need to be filled in, as there is often a lot of extra fields in the element editor.
  3. Click the “Save Changes” button to save, or “Close” to cancel you changes.

Saving the Grid  —

  1. Once you are done with updating your grid, click the green “” button on the right side of the screen

08 Troubleshooting & FAQs

We optimize your website to perform well in search results by following SEO best practices when building your website. We optimize technical things such as:

  • Page title tags & meta descriptions
  • Image alt tags
  • Proper header tag hierarchy
  • Page speed
  • SSL certificates
  • Creating & submitting site maps
  • Responsive design & user experience
  • Among a list of other things that can help with SEO

However, these technical things are only a very small part of ranking well in search engines. The most important thing is to have really good, relevant content. Building your page ranking takes time, among other efforts! Contact our team, our marketing experts offer advanced SEO & digital marketing services to help your website traffic grow!

We use caching software on your website which helps to speed up the load time of your website. This helps retain users and improve your SEO rankings. Due to caching, some changes may not immediately appear on the front-end of your website.

Clearing your website cache fixes this issue about 90% of the time! To clear your cache:
Clear Cache - WP Rocket or Clear Cache - WP fastest cache

  1. Hover over “WP Rocket” or “Clear Cache” in the top black bar of your website
  2. Click “Clear Cache”

If you still aren’t seeing changes, try clearing your browsers cache by pressing [Ctrl], [Shift] and [Del] on your keyboard. You can also try viewing the website in a different browser, or in a private browser. If you still aren’t seeing changes feel free to contact our team!

Our team would be happy to help add new content and features to your website. Whether you want to simply add a new page, or do something more advanced like a custom form, online store, membership features, or any other ideas that you have, just contact our team to get started!

cs@saltechsystems.com
(515) 520-8200