WP-Rocket is a WordPress plugin that is a powerful caching, used to improve your WordPress site’s loading speed, SEO rankings, and it requires no coding to be made. More information about this plugin can be found here. This Document will cover setting up the WP-Rocket plugin after installing it.
Before doing anything, the most obvious thing that you need is to install the WP-Rocket plugin itself. The plugin comes with a price, but it would be worth every buck that you used to make this plugin work. More information about installing the plugin and its prices can be found here.
After installing and activating the plugin, we can start going to the plugin’s dashboard, which is located on the WordPress site settings>WP-Rocket
WP- Rocket Dashboard
Then follow to continue to copy the settings that you see on the pictures below. Be sure to save the changes before moving into the next section.
Cache
Cache
File Optimization
Activate Minify CSS files
Activate JavaScript files
Load JavaScript deferred
Delay JavaScript execution
Files Optimization
Media
Enable for Images
Enable for themes and videos This would be site-dependent (changes may occur)
Media
PreLoad
Activate Preloading
Preload
Advance Rules
Advance Rules
Database
Revision
Trashed Posts
Expired Transients
All transients
Optimize tables
Database
CDN
I didn’t get this
-Ok we can fix documentation later.
Heartbeat
Control Heartbeat
Heartbeat
Addons
Google Analytics
Facebook Pixel
Varnish
Cloudflare
Google analytics should mostly be open, and turning the Varnish on may depend.
Addons
After turning on the Cloudfare remember to modify the options.
Optimal Settings
Relative Protocol
The keys, emails, and IDs would be provided by the admin.
This would indicate that the settings were completed. A check this WP Rocket Settings – YouTube for a video tutorial
Jira is software that was designed to manage the work of teams. It is a work management tool that can be used for any kinds of teams, like requirements and test cases, agile, project management, software development, product management, task management, bug trafficking features, etc. Jira Software is a work management tool for software teams that need to organize and track their work. Jira is incredibly flexible and can be customized to work with your team’s unique workflow, not against it, meaning teams of all kinds can enjoy increased productivity and visibility as they march toward releasing amazing software and products. Additional Information can be found at this link.
Managing all projects
On the projects tab, you can view the projects that you’ve starred, recently opened projects, and also the option to view all the projects made and creating a new project.
Projects tab
Upon viewing all the projects, it shows all projects made by your team, and it also shows the Key project, the type of project, the lead, and the category of the project. It gives you the option to sort it by project type or categories, and it even gives you a search button if you’re still having a hard time looking for a specific project. You can still create projects using the top right button.
Viewing all projects
Managing a specific project
Upon opening a specific project, you’ll be able to see certain types of menu like the roadmap, backlog, board, reports, code, add an item, and project settings.
Roadmap
Roadmaps are one of JIRA’s features built to illustrate the team’s strategic vision and to show the teams what they should be working on. Jira roadmaps give you the ability to connect tasks into a broader product strategy and to order tasks and priorities based on consumer feedback. Everyone on the team can access the information, and the leader can also change the roadmap when needed.
Roadmap
Backlog
The backlog is the next step after figuring out and setting up your project, and it could also be for anything like a product or a service. It is the section wherein you set-up the things “to-do”(which is called issues). Still, normally it isn’t listed in the form of a detailed summary, more like in the form of a story, like “As a user, I want to do this and that,” but in the end, it’s really all up to you on how would you set it up to makes things understandable for your team.
Backlog Section
A small section would open in the write by Clicking the issue, showing you additional details that you can add or edit, like a description bar, assignee, labels, sprint, etc.
Editing Issues
Board
A board is a section where it shows you the issues created of a certain project that you are currently on. It is possible to have multiple boards on a single project if you are working and segments. In this section, you could also sort the issues by epics, types, or even group them to have them organized. Creating an issue would automatically put it on the “TO DO” column by default, but it also gives you the ability to add or edit columns depending on your system.
WordPress has a powerful new editor that has been out for almost a year now. As they have been making changes we have been using it more often for new WordPress posts and quicker and easier blogging. Jump in with me as we look at the many ways you can use Gutenburg editor for your next post!
To get started there are a few things you should know about our typical setup.
We use Divi Builder by Elegant Themes
We use Easy Affiliate Links even when the links are not affiliate links
This document is an effort by several people
Asley Arviola
Nathan Johns
Bryan Arandia
Spencer Heckathorn
Table of Contents
Basics
How to Make Paragraphs
If your setup is similar to ours you will want to make sure you are in the default editor. At the top it will say either “Use The Divi Builder” or “Return to Default Editor.” You are going to select “Return to Default Editor. Before we get started thought I’m going to breakdown some of the basics of the Gutenberg editor.
However, if you are working on a WordPress site that is not using Divi Theme or Divi Builder your should see this once you get to the new post screen.
[pic of new post on site without Divi]
Follow along in this guide and I will show you the basics of Gutenberg and give you a preview (see button 11 on the next screen) after we make each set of changes.
1. Basics of Gutenberg
I’m going to start by showing you the most basic elements of Gutenberg on WordPress. You will need to know these so you can navigate the post and work with all the other things I’m about to teach you. Come back to this section as a reference when needed.
WordPress Logo: Takes you back to the Posts area to view your site’s complete post list. Basically this is how you exit the Gutenberg editor but before you do you might want to check out numbers 11-13.
‘Add block’ button. This is going to insert the block of your choice wherever the cursor is located. This can be useful if you are trying to put a block in between 2 other blocks or are otherwise not having an easy time getting the block you want.
Undo button, this works as ctrl+Z works inside word does. If you are not familiar with this shortcut it will undo the last action you have done giving you an easy way to “back up”.
Redo button, sometimes you might use undo to look at how something looks or to make sure you did what you were intending to do. If this is the case you may now wish to redo what you have now undone (say that three times fast). If this is the case this button will allow you to go back to your original state.
Information button aka ‘Content Structure’, this button is very useful if you are trying to hit a word count or need to navigate a large document. The resulting popup from clicking the ‘i’ will give you this information along with a document outline that allows you to quickly and easily click to different points in the post to help during the creation phase of making your post.
‘Block Navigation’ is just like it sounds. Quick and easy way to click between the current block you are on and the next block in the pages list.
‘Tools’ to be completely honest I have not had a need for this one as of yet. But it allows you to select several blocks as elements to move around on the page by grouping them together. What I do is left-click drag my mouse to select several elements then select the block option “group” and then move them around. Click here to read about this in detail.
Post Title. This is where you put the title for your post. It will automatically be H1 item on the page and be used for the ‘URL Slug’
Main page block area. This is a single block and the default ‘Paragraph’ block which you can read about below.
‘Document’ settings area. I have intentionally left this with little detail as it is covered in detail later on, but the basics of the settings you will change before publishing are found here.
Preview, click this button to preview the post, and see what it will look like before you make it public.
Publish, make your post public to the world!
‘Save Draft’, this is missing in my picture because there needs to be some content before it will show up, and the option here can change and sometimes will say ‘Save as Pending’, or if you have already published the post then it will say ‘Switch to Draft’. I will cover this in more detail, but it is important to know before you click on #1 from this list (WordPress logo), close the tab, close the browser, or click the back button. Make sure you click on the “Save Draft” and keep doing it often. This will save you literal hours of work and likely add years to your life as you will have less frustration in your WordPress experience.
2. How to Make Paragraphs: Most Basic Element
Start by selecting the a paragraph block to insert it.
You can also simply start typing and the paragraph block will automatically be selected.
Type or paste the content you need into the block. Once you have a few lines we can start with the next part on formatting. Which will allow you to make your post look good and simpler to read.
3. How to Format Your Post: Look and Layout Options
Once you have typed in some content you can start to change the layout, look, and feel of the text to match your needs. Here we start with the alignment just like in a word document you can select to align left (default), align center (your text will be aligned to the center of the block on the page), align right (your text will align to the right of the block on the page).
Now that you know a little about the alignment options we can look at how to Bold and Italicize the selected text. Start by selecting the text you wish to change and then for BOLD text select bold shown in the picture as #1 and also indicated in Gutenberg by the letter ‘B’.
In the same fashion, ITALICS text is shown in the picture as #2 and indicated in Gutenberg by the letter ‘I’. Select the text you would like to change then click the ‘I’ to change that text to italics.
To find more controls click this button.1. Default unjustified paragraph. 2. Justified paragraph.This is how other options work.To change the text-size of the paragraph just go to the text settings from the left, then choose between this two options: 1. You can choose between small, normal, medium, large, and huge. 2. Input a custom text-size.
3. Adding Links in Text
You can also add links, and like mentioned before I use Easy Affiliate Links because it allows for easy click tracking, and can help me understand when a resource is helpful or not.
Mark the text you want to be a link.
Click the link button.
Input the link address (enable the “Open the new tab” if you want to redirect it into other tab when clicked.
To add a hyperlink with tracking
Select the text you want to be a link
Click the blue “link” button it looks like a chain that “links” 😉
Choose the link you want to attach to the selected text and click the blue link box as seen in the picture
Done, the text will turn into different color and look like it is underlined indicating the linking worked
Sometimes the linking doesn’t work the first time if your text didn’t change colors make sure you have the right text selected and repeat the steps to try the linking again.
To insert an in-line image, click this button.You can choose either to upload a image file or pick an already uploaded file on Media Library.An in-line image will look like this.
How to Make Titles
To insert a title just click the “Heading” button.Then input your title.To change the size of the title, just go to the Heading settings then choose from the six options. Text size descends from left to right. This is how your Title will looks like with different header sizes.
How to Make Tables
Insert a table block.1.Input the desired the number of column. 2. Insert the desired number of rows. 3. Then click this button.Your tables will look like this with different alignmentTo change the table-style, just click this button then choose between the two options.The default-style table and the stripe-style table looks like this.You can align elements inside table cells with this threee options showed above.You can add or delete either a row or a column in a table.At default, table width expanses as the elements inside it becames larger/longer. You can change this by enabling “Fixed width table cells” option at the table settings, in this way the width will always be equal.You can also enable/disable the header and footer section of the table by clicking the options above.You can change the table background using the Color settings. You can choose between four options; subtle light gray, subtle pale green, subtle pale blue and subtle pale pink. In the image above it is set to subtle light gray.
How to Use the Images Feature
Add an image block first.You can choose three options on how you like to add an image. You can choose to upload an image file from your computer, choose an already uploaded image on your Media Library or insert an url of an image.After uploading your image it will looks like this. You can change your image resolution using the “Image size” setting, where you can see three options; thumbnail, medium and full size. Take note that the images resolution can affect the page’s loading speed. Thumbnail has the smallest byte-size followed by medium then full size. Choosing “thumbnail” for images with short width and height like header logos is the best choice.You can change the image dimension by moving the blue circles beside the image or manually typing the desired width and height of the image on the red box as shown in the image above.There are two different image styles you can use, default style and rounded. You can also set the default style to “Default” or “Rounded” for new images to lessen your works. This is how “Default” and “Rounded” images will looks like.You can also add an alternative text for your image. Alternative text will show up when your image failed to load.Just like texts, you can also align images from left, center, and right.Your aligned images will look like these. 1. Align Left 2. Align Center 3. Align Right.If you want to replace the image with a new one, you just need to press this button and choose from the three choices; “Open Media Library” where you will look for replacement on the already uploaded images, “Upload” to upload new image from your computer or “Insert from URL” where you will input the link address of an image from the internet.You can also transform your images into different formats; Gallery, Slideshow, Tiled Gallery, File or into a Group.This is how a gallery will looks like.You can change the order of the pictures by clicking the arrows inside the green box of the image above.You can align galleries in three ways; Align left, Align center or Align right.This is how galleries will look like with different alignment.Adding a caption on each pictures in a gallery is also an option. It will also add a gradient effect at the bottom of the picture to make the caption more visible.Customizing the number of columns in your gallery can also add aesthetics. Here you can only make three column gallery. Enabling “Crop images” will fit your images to the boxes.When you trasform your images into a slideshow it will looks like this.You can change the transition effects of the slideshow into “Slide” or “Fade”. You can also maximize your page speed by changing your image-size from Full Size to Large, Medium or Thumbnail.Enabling the Autoplay option will automatically swipe your images from time to time. You can also adjust the time delay from 3 secs (slowest) to 2 secs (medium) or to 1 sec (fastest).You can always update and edit your slideshow using the button as shown above. You can add more picture or even delete some and add captions to each one of them.Tiled gallery in the other hand is another way to organize your images.You can transfrom your images inside a tiled gallery into rounded ones by typing your desired roundness in pixels. For example in the image above the tiled gallery is set to have the maximum roundness which is 20 pixels.You can style your tiled gallery with four options; Tiled mosaic, Circles, Square tiles, or Tiled columns.This is how Tiled mosaic style and Circles style will look like.This is how Square tiles style and Tiled columns style will look like
How to Embed PDF
A plugin was needed to make this doable since WP and DIVI both are not great at it. For now the plugin is called PDF Embedder. I will update if we find a better solution.
From default editor, add PDF Embedder block.“Click here to Open Media Library to select PDF”Select or Upload the PDFAdd a download link by selecting a new File block.Select the same PDF.Align the block to the center.Delete the filename so that only Download button shows.
Each new WordPress install will come with some sample content even when the site is imported from an existing WordPress or other supported platform. This describes the way to check for and remove the “sample content”.
Posts: “Hello World!”
First start by looking in the Posts section of your menu:
The easiest way to look for the sample content is to search for the word “Hello” as the Posts section sample content is “Hello World”:
If nothing is found you can look on the first and last page by using the double arrows “>>” or “<<“:
When you find sample content you can simply move it to the trash:
Once you have moved it to the trash you can delete it permanently by clicking on the trash link then clicking “Delete Permanently”:
Pages: Sample Page
Pages like posts have some sample content and the process is much the same with only the name changing. This time around we are going to be getting rid of “Sample Page” get started by clicking on Pages on your menu:
Most sites are going to have a small enough number of pages that you could see directly if the Sample Page exists:
Just as before click the Trash option that appears when you hover over the page:
Just as before a “Trash” option will appear at the top of the Page list and you can click on it to find the Delete Permanently option:
With that done all sample content should be removed!
