Tutorial 5

Block Editor, Navigation Menu, Header, Footer

1. Block Editor

The WordPress editor is a new experience of publishing. We can use the

WordPress editor to create posts and media-rich pages and easily handle their
layout. Instead of thinking about aligning and arranging text, photos, and quotes,
all the elements on a website or post have their own blocks. Each block can be
moved, edited, and customized, and then the editor will show the visual elements
as they look at the actual site. We can confirm this by clicking the Preview button
before click on the "Publish" button.

The Editor's Workspace

Whenever we click on a post or page menu option on WordPress, the WordPress

editor's workspace appears with its latest version, similar to the below screenshot:

How to Access the Admin Menu?

We can access the Admin Menu by clicking on the WordPress logo that appears
on the top of the screen.
Note: It will allow us to leave the page or post.

How to switch-off Fullscreen mode in WordPress?

If we want to switch off the Fullscreen mode on WordPress, we can use the 3-dot
menu at the top right corner of the screen and uncheck the Fullscreen mode.

Hello Java Program for Beginners

When we choose an option to store entries in the browser's local storage, and in
the future, if we want to switch the browser, it does not provide the show option.
In that case, we have to set our preference again. It's the same thing when we
switch computers.

Users of Safari browsers experience a default reset setting once at a time because
the safari browser configured itself from time to time to delete local storage
entries.

WordPress's leading developers explore the ideal way to manage the user
interface and take care of these inconsistencies in future updates. Currently, we
can use the Block Fullscreen Mode Control Plugin to adjust the default behavior
and keep the Fullscreen option consistent between devices.

Working with Block Editor

There are various features available that can be used to work with the Block
editor.

Blocks

The blocks are used to convert the method for creating the content. It converts a
single document into a set with the explicit, easy-to-tweak structure of discrete
elements. The Block editor provides us post-building and effortless page
experience. We can easily add and optimize several visual and media elements
that need embeds, custom HTML code, and shortcodes.

Adding a block

We have a wide variety of blocks to choose from the Add block option, which we
manage by category and current usage. Each block can be edited or moved
independently of other blocks and provides better control over layout and
function. Generally, blocks come with their own configuration. We can add a
block by using the Plus (+) sign button.
Configuring a block

Each editor block has its own configuration. To find a block configuration, we
need to select a block that will immediately show the toolbar at the top of the
block editor. Usually, the settings seen at the top of the block editor provide the
Add option for configuration and adjust the block type. We can switch between
settings for the current block and setting for the complete document in the Block
editor sidebar.

The Document Settings allow us to add tags and categories, pick an image
featured, view and change our post status, etc. These are the features that we
apply to the entire page or article.

Removing a block

If we want to remove a block from the block editor, choose the block and click on
the three dots menu button. In the below image, we can see the option in the red
rectangular box to remove the block among the settings.
 2. Navigation Menu
A navigation menu is a list of a links pointing to important areas of a website.
They are usually presented as a horizontal bar of links at the top of every page on
a website.
Navigation menus give your site structure and help visitors find what they’re
looking for.

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you may want to add your blog
categories as a drop-down in your WordPress menu.
You can easily add categories to your menu by clicking the Categories tab on the
left side of the Menus screen. You may also need to click the ‘View All’ tab to see
all your categories.
Simply select the categories you want to add to the menu, and then click the
‘Add to Menu’ button.

The categories will appear as regular menu items at the bottom of your menu.
You can drag and drop them into position. We’re going to put all of these
categories under the Blog menu item.

Adding Custom Links to Your WordPress Navigation Menus

Aside from categories and pages, WordPress also makes it super easy to add
custom links to your menu. You can use it to link to your social media profiles,
your online store, and / or other websites that you own.
You will need to use the ‘Custom Links’ tab on the Menu screen. Simply add the
link along with the text you want to use in your menu.

You can even get creative and add social media icons in your menu.

Adding Social Media Icons to WordPress Menus

First thing you need to do is to install and activate the Menu Image plugin. For
more details, see our step by step guide on how to install a WordPress plugin.
After that, you can configure the image sizes that will show up in your menu. You
can leave the sizes to the default settings or adjust them according to your
needs. Don’t forget to click the ‘Save Changes’ button.
Once that’s done, you will need to go to Appearance » Menus from your
WordPress admin area.
Then, click the ‘create a new menu’ option.

Next, you can give a name for your menu and click the ‘Create Menu’ button.
Once your menu is created, go ahead and click on the ‘Custom Links’ menu item
on your left. Then enter the URL of your social media page, add a link text, and
click the ‘Add to Menu’ button.
When that’s done, click the ‘Save Menu’ button.
Now, if you hover over your newly created menu, you’ll see an option that says
‘Menu Image’. Simply click on the Menu Image option.

After that, a popup window will appear with all the settings for your social media
icon. You can choose whether to use an image or an icon for your social media
channel.
If you select the Image option, then you can upload an image of the social media
platform by clicking the ‘Set image’ option. Similarly, you can also upload an
image that will appear on hover and set the image size.
On the other hand, you can choose the Icon option and select the social media
icon from the given list.

Next, you need to select a position to display the name of each social channel
with your icon.
If you only want to display the social icon without any label, then you need to
select the ‘Hide’ option under the Title position setting.
Once you’re done, you can click the ‘Save’ button. Simply repeat the same to add
as many social icons as you need.
Now, you can visit your website to see the social media icons in your WordPress
menu.

You can also add the social icon menu in your WordPress sidebar.
Simply go to Appearance » Widgets page and drag the ‘Navigation Menu’ widget
in the sidebar widget area.
In the Select Menu dropdown, you should select the social menu that you created
above and click on the ‘Save’ button.

Editing or Removing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress
uses the page title or category name as the link text. You can change this if you
want. Any menu item can be edited by clicking on the downward arrow next to it.
You can change the name of the menu item here. This is also where you can click
‘Remove’ to take the link off your menu altogether. If you’re struggling with the
drag and drop interface, then you can also move the menu item around by
clicking the appropriate ‘Move’ link.
Adding WordPress Menus in Sidebars and Footers

You don’t have to just stick to the display locations for your theme. You can add
navigation menus in any area that uses widgets, like your sidebar or footer.
Simply go to Appearance » Widgets and add the ‘Navigation Menu’ widget to
your sidebar. Next, add a title for the widget and choose the correct menu from
the ‘Select Menu’ drop down list.
Here’s an example of a custom WordPress footer menu built on Syed Balkhi’s
website.

1. Header Customization
a. Choose a theme that has a header image, for example Creativ Campus. To
install a custom header graphic, follow these steps:
b. On the WordPress Dashboard, click the Header link on the Appearance
menu.

c. On the Custom Header page, the settings for the header image feature
appear.
d. Click the Add new image button in the Select Image section. Select your
chosen photo in the dialog box.
d. Click the Upload file tab, Select button.

This step transfers the image from your computer’s hard drive to your
WordPress installation directory and loads the Crop Header page.
e. Crop the image to your liking.
To resize and crop your image, drag one of the eight boxes located at the
corners and the middle of each side of the image. You can also click within the
image and move the entire image up or down to get the optimal placement
and cropping effect that you want.
f. Click the Crop and Publish button if you cropped your header.
Or click the Skip Cropping, Publish Image as Is button.
2. Footer Customization
The ‘footer’ in WordPress is the bottom part of your website that appears after
the content area. It normally appears on all pages on your website.

This part of the website is located far down below and is often ignored by
most beginners for a long time. However, there are several ways you can
utilize this area by making it more helpful for your users, WordPress SEO, and
your business.
All top WordPress themes come with footer widget area that’s easy to edit.
You can also carefully edit the footer.php template file in your theme to
remove unwanted links from this area.
Many popular WordPress themes have widget areas in the footer.
You can use these widget areas to add text, images, or links to your privacy
policy and legal disclaimers in the footer area.
Adding text and images is quite straight forward. You can simply go to
the Appearance » Widgets page and add a Text, Image, or Gallery widget to
your footer widget area.

To add a widget, simply drag and drop it into a footer area. If you need more
help, then see our article on how to add and use widgets in WordPress.
Note that many themes will have multiple footer areas, and they may use
them differently. You can preview your website after adding widgets to make
sure that they appear where you want them to be.
Adding Links in Footer Widget Area
You may also want to add links to different pages, categories, or to the legal
pages of your website in the footer area.
WordPress comes with an easy to to manage those links using the navigation
menus. Simply head over to the Appearance » Menus page and click on the
‘create new menu’ link.

WordPress will ask you to provide a name for your new menu. Enter a name
that helps you easily identify this menu and then click on the ‘Create Menu’
button.

Your menu is now ready and you can start adding links to it. Simply select the
pages, posts, categories from the left column to add them to your menu.
Once you are finished, click on the Save Menu button to store your changes.
Your menu is now ready to be added to the WordPress footer widget area.
Simply visit the Appearance » Widgets >> Add Navigation Menu page in your
WordPress admin and then add the Navigation Menu widget to your footer
area.
In the widget settings, select the footer navigation menu you created earlier
from the dropdown menu and click on the Save button.
You can now visit your website to see your footer links in action.

You can create multiple navigation menus in WordPress and add as many
navigation menu widgets to your sidebar as you need. If you need another set
of links simply repeat the same steps again.
Removing the ‘Powered by WordPress’ Text from Your Footer

When you first install WordPress, your site may have a ‘Powered by
WordPress’ link in a footer bar at the bottom. This isn’t a widget, so it’s often
not clear how to change it.

Some themes will alter this to their own text and link. If so, you can normally
change this text using the live theme customizer. Simply go to Themes »
Customizer in your WordPress admin. Look for an option to edit your site
footer:
We’re using the Astra theme for this example. With Astra, you need to go
to Footer » Footer Bar in the customizer. You will then have the option to
change the text of your footer bar:
Once you’ve finished editing the text, don’t forget to click the Publish button
at the top of the screen to put your changes live.
Go ahead and view your site to see your new footer:

Exercises:
Create a website for selling products
 Create 3 pages: About us, History. Add to Main menu
 Create 3 categories: TV, Mobilephones, Appliances
 Add these categories to Main menu in Header.
 Write some posts that belong to TV, Mobilephones, Appliances and
News.
 Add a custom link to Amazon.com to main menu
 Create an social icon to facebook link and add to Menu.
 Add a social icon to Sidebar (facebook, twitter)
 Change theme to Creativ Campus
 Do not display Page title
 Change image for Header
 Add Navigation Menu to Footer
 Add a social icon to Footer
 Remove copyright icon from Footer.