Code Editor in Gutenberg Editor

The Gutenberg editor gives you a visual interface that makes it easy for you to compose a page or post. However, many people still edit their content using the code editor. Fortunately, the code editor is still present within the Gutenberg editor. You can edit the entire post or page as code, or you can edit individual blocks as code. We will show you how to use the code editor in the Gutenberg editor using a sample post.

If you want to learn how to use the code editor on the classic editor, you can learn how to do so here.

USING THE CODE EDITOR TO EDIT AN INDIVIDUAL BLOCK

In order to access the code for an individual block you will need to be logged into the WordPress Administrator Dashboard. Open the page or post that you wish to edit using the Gutenberg editor.
Click on the block that you wish to edit with the code editor.
To the the right of the block you will see 3 vertical dots. Click on the dots.
A pop-up menu will appear. Click on the option labeled Edit as HTML.
You will then see the block displayed in code. Make your changes or additions to the block.
Once you are finished, you will need to click on the Update or Publish options in the top right corner of the editor in order to save your changes. Note that if you wish to see the block in the visual editor after the changes, simply click on the 3 vertical dots again and then click on option labeled Edit Visually.

Classic editor – Edit page by HTML

WordPress authors have the option to create pages and posts in a Visual Editor or a Text Editor. While the Visual Editor does a reasonably good job with its toolbar options and easy editing environment, the use of the Text Editor allows maximum flexibility on how to organize content.

Let me explain not just why you’d want to use the Text Editor (in place of the Visual Editor), but how easy it can be to use.

How To Use WordPress HTML Editor image

Why might you prefer the Text Editor?

Your content will make more sense for your readers and search engines.
You only need to know a few HTML tags to make the Text Editor very useful.
You can apply CSS style properties directly to your HTML code.

What Happens When You Use The Visual Editor?

When you add copy, media or links to your Visual Editor you’re really adding HTML to your page or post. It all takes place under the hood.

Not sure what I mean? Try this.

Add some content by copying and pasting something in the Visual Editor. Then select the Text tab. What you’ll be looking at is HTML. Just like with the Visual Editor, you can edit your HTML code directly with the Text Editor.

In fact, you can do a lot more with the Text Editor than you can with the Visual Editor. This makes working in text mode not just more productive but more satisfying too. You’ll be able to more accurately markup your content which will benefit your readers and boost your SEO efforts.

HTML is about as straightforward as it gets. Every web page, including those generated by WordPress, use it.

Creating menus

Creating Your First Custom Navigation Menu

You can create menus in WordPress by visiting Appearance » Menus in your WordPress admin area.

This will bring you to the Edit Menus screen which is divided into two columns. The column on your left has your pages, categories, and custom links tab. The column on the right is where you add and adjust menu items.

Let’s create your first custom navigation menu.

Provide a name for your menu, e.g. ‘My First Menu’ and then click on the create menu button. This will expand the menu area, and it will look like this:

As you can see in the screenshot, our demo site has three theme locations labeled primary, secondary, and social. The location names and placements vary from theme to theme.

Next, you need to select the pages you want to add to the menu. You can do this by selecting the pages listed on the left hand side and clicking on Add to Menu button.

After adding pages to the menu, select the theme location where you want to display the menu and click on the ‘Save Menu’ button.

Selecting a theme location for the menu

Don’t worry if you’re unsure where each menu location is on your site. You can visit the website to see the menu in action. If you don’t like it, then you can always change the menu location.

Arranging Items in a Custom Navigation Menu

You probably noticed that each menu item you added is arranged in the order you added them. For example, your about link appears at the end, while the contact page link appears first. Don’t worry you can easily rearrange your WordPress menu items in any order you want.

Simply drag and drop a menu item to adjust its position in the menu.

Repeat the process to create new menus for other theme locations.

Creating Nested Drop-Down Menus in WordPress

Nested menus, also known as drop-down menus, are navigational menus with parent and child menu items. These menus are usually styled by WordPress themes in such a way that when a user takes their mouse to a parent item, all their sub-menus are displayed.

Creating nested menus allow you to add a properly structured navigation system to your site. Here is how you can add a menu item as a sub-menu in WordPress.

In your menu structure, drag the menu item just below the parent item. Next, slightly drag the menu item to the right. You will notice that it will automatically become a sub-menu item.

Creating nested menus with sub-menu items

You can add multiple layers of sub-items to create deeply nested navigation menus. However, it’s important to note that not all themes support multi-layer nested menus. Most do up to 2-layers.

Sub-menus with their own child menu items

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you can add your blog categories as a drop-down in your WordPress menu.

By default, WordPress provides an easier way to add pages and categories from the left-hand column on the menu editor screen.

Start by clicking on the Categories tab to expand it. You will see your blog categories listed there. Simply select the categories you want to add to the menu, and then click on add to menu button.

Adding categories to custom navigation menu in WordPress

You will notice that categories will appear as menu items under menu structure column. Just like pages, you can simply drag and drop them to arrange their position on the menu. In this example, we have dragged all categories to appear as sub-menu items under the Blog.

Adding categories to navigation menu

Adding Custom Links to Your WordPress Navigation Menus

While adding categories and pages is easy, what if you want to add a link to your social media profile or another location? This is when you can use the custom link option.

Simply click on the custom link tab in the left-hand column to expand it. You will notice that it only has two fields. The first one is for URL where you will need to add the actual link you want to add. The second field is labeled link text where you will add the anchor text for the link.

Adding custom links to WordPress navigation menus

Note: It’s important that you must start all links with http:// or https://. If you don’t, then the links will be broken.

Editing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress automatically uses the page title or category name as the link text. This does not mean that you cannot change it.

All menu items can be edited by simply clicking on the downward arrow next to a menu item.

Expand a menu item to edit or even remove it

Here you can change the menu’s navigational title or link text. You can also add a title attribute to the link. Don’t forget to click on the save menu button to store your changes before previewing your website.

Removing a Link From Navigation Menus in WordPress

You can remove a link in the same way you edit them. Just click on the downward arrow icon next to a menu item, and you will notice a red Remove link. When you clicking on it, the link will be removed from your navigation menus.

Removing a link from navigation menu in WordPress

Understanding Theme Locations For Your Navigation Menus

Navigation Menus are a theme feature in WordPress. Their appearance and display is controlled entirely by your WordPress theme. The admin area only provides a user interface to add and manage those menus. The theme we were using Only had two menu settings available, Primary Menu, and Social Menu. We can change our theme to “TwentyFourteen” to show an example of two menu bars. If you would like to learn how to change your theme, please check out the following article.

WordPress themes usually have at least one theme location for navigation menus. However, some themes may have more than one theme locations such as the theme TwenyFourteen which has two theme locations primary, secondary menus.

Also it’s important to note that the names of these menu locations would also vary from theme to theme. While some may call it primary another may call it header. It’s entirely based on theme developer’s preference.

How To Delete your site

If you have accidentally created a site, or are done with a site that you have created, we ask that you please delete any unused sites.

Ho to delete your site

Note: To delete a site you must be an administrator of the site. Contributors and Editors will not be able to perform this task.

From your site’s Dashboard navigate to the Tools tab.
once in the tools tab, navigate to the ‘Delete Site’ option below.
check the checkbox saying “I’m sure I want to permanently disable my site, and I am aware I can never get it back or use sites.temple.edu/[SiteSlug] again.”
Click the blue “Delete My Site Permanatley” Button.

You will be prompted with the following message

After seeing this message, you will receive an email where you will need to click the link to confirm the deletion of your site.

Using CSS Ready Classes In Gravity Forms

How to Use Ready Classes

To add a Ready Class to a field, just edit your form in the Form Builder and then select the field you want to add the classes to. Under the “Appearance” tab, you’ll see an input called “CSS class name”. Add the Ready Class name or names you want to add to the field here and then save the form.

Please note that this feature does NOT update live in the Form Builder. After you specify your Ready Class names, just save the form and you’ll see the classes being applied to your form in the preview window and on the live site.

The Ready Class Names

Here are the Ready Classes that are built in the Gravity Forms default stylesheet that you can use right away without having to write any of your own CSS.

Halves (2 Columns)

Note: These only work with the “top label” form layout option and are intended to be used in left half/right half pairings to work properly.

gf_left_half
This places the field in the left column (left half) of a 2 column layout. This only works with the “top label” form layout option.
gf_right_half
This places the field in the left column (right half) of a 2 column layout. This only works with the “top label” form layout option.

To align two fields side by side (2 equal columns) you can add these classes. The two fields have to be adjacent to each other in the Form Builder. The gf_left_half class has to be added to the first field and the gf_right_half class to the second field.

Thirds (3 Columns)

Note: These only work with the “top label” form layout option and are intended to be used in left third/middle third/right third pairings to work properly.

gf_left_third
This places the field in the left column (left third) of a 3 column layout. This only works with the “top label” form layout option.
gf_middle_third
This places the field in the middle column (middle third) of a 3 column layout. This only works with the “top label” form layout option.
gf_right_third
This places the field in the right column (right third) of a 3 column layout. This only works with the “top label” form layout option.

To align three fields side by side (3 equal columns) you can add these classes. The three fields have to be adjacent to each other in the Form Builder. The gf_left_third class has to be added to the first field, the gf_middle_third class to the second field and the gf_right_third class to the third field.

Quarters (4 Columns)

Note: These only work with the “top label” form layout option and are intended to be used in left third/middle third/right third pairings to work properly.

gf_first_quarter
This places the field in the first quarter of 4 column layout. This only works with the “top label” form layout option.
gf_second_quarter
This places the field in the second quarter of 4 column layout. This only works with the “top label” form layout option.
gf_third_quarter
This places the field in the third quarter of 4 column layout. This only works with the “top label” form layout option.
gf_fourth_quarter
This places the field in the fourth quarter of 4 column layout. This only works with the “top label” form layout option.

To align four fields side by side (4 equal columns) you can add these classes. The four fields have to be adjacent to each other in the Form Builder. The gf_first_quarter class has to be added to the first field, the gf_second_quarter class to the second field, the gf_third_quarter class to the third field, and the gf_fourth_quarter to the fourth field.

Inline (Fluid One Line)

gf_inline
This places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.

List Classes

gf_list_2col
This turns a multiple choice/checkbox list into an equally-spaced 2 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_3col
This turns a multiple choice/checkbox list into an equally-spaced 3 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_4col
This turns a multiple choice/checkbox list into an equally-spaced 4 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_5col
This turns a multiple choice/checkbox list into an equally-spaced 5 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_inline
This turns a multiple choice/checkbox list into an inline horizontal list (not evenly spaced columns). This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_25
This applies a 25px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_height_50
This applies a 50px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_height_75
This applies a 75px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_height_100
This applies a 100px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_height_125
This applies a 125px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.
gf_list_height_150
This applies a 150px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Horizontal Form Layout

gf_simple_horizontal
Note: This only works with the “top label” form layout option. When added to “CSS Class Name” in your form settings will create a very simple horizontal form layout (think simple email address field and inline form button). The field label is hidden so using the placeholder option for the field is recommended. Please note that this works best on very simple, single input field types. Also, it works best if you set the input size to “large” in the field settings.

Other Classes

gf_scroll_text
This converts a section break field into a box with a fixed height that will automatically show a scroll bar if there’s a large amount of text. This is useful if you’re wanting to show large amounts of content to the user, but don’t want to have to link to it or make the form very long to show it (Terms of Service Agreements, etc). This class only works on section breaks and works with any of the form label position settings.

gf_hide_ampm
This hides the am/pm selector in the time field- this only hides the field on the form, not in the form entry table. This works with any of the form label position settings.
gf_hide_charleft
This hides the characters left counter beneath paragraph text fields when using the maximum characters option. This works with any of the form label position settings.
gf_section_right
when applied to the section break fields will align the section break right with the form fields if the left/right label form setting is selected.

Elementor – How To Add Video Backgrounds

Section Background Video Options

You can set a video as the background of a Section, enabling you to create interesting hero headers and other engaging areas on your page. The background video options can be found within the section’s Style tab.

Style

Background

Background Type: Click the video icon
Video Link: Enter a YouTube or .mp4 link to the video
Start Time: Specify start time in seconds
End Time: Specify end time in seconds
Background Fallback: Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining.

FeedWordPress

FeedWordPress is an open-source Atom/RSS aggregator for the WordPress blog publishing platform. You set up feeds that you choose, and FeedWordPress syndicates posts from those sources into your WordPress posts table, where they can be displayed by your WordPress templates like any other post — but with additional meta-data, so that your templates can properly attribute the post to the source it came from.

FeedWordPress was originally developed because I needed a more flexible replacement for Planet to use at some aggregator sites that I administered. You can use FeedWordPress to create aggregator sites that bring together posts from many different sources, using the WordPress templating engine to display posts from all around the web. Or you can use it to bring together activity from your blogs, social networks and other online services, into a Lifestream with all your online activity in one place.

Creating a Static Front Page

By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site. Many WordPress users want a static front page or splash page as the front page instead. This “static front page” look is common for users desiring static or welcoming information on the front page of the site.

The look and feel of the front page of the site is based upon the choices of the user combined with the features and options of the WordPress Theme.

To create the static front page, go to the WordPress Administration Panels.

Under the Dashboard select ‘Appearance‘ –> ‘Customize‘

2. Select ‘Homepage Settings‘

3. Change the radio box to ‘A static page‘

4. select the page that you want to be your new home page.

you can also set up a page that will allow you to populate all the posts you have under ‘Posts page‘

5. After you are done hit the blue ‘Publish’ button at the top left of the screen.