Embed Size (px)
Citation preview
BCA Sem-3 WORDPRESS unit-3
Page 1 of 101 Vasavda Rohit
What is a Theme? A WordPress theme changes the design of your website, often including its
layout. Changing your theme changes how your site looks on the front-end, i.e. what a visitor sees when they browse to your site on the web. There are thousands of free WordPress themes in the WordPress.org Theme Directory, though many WordPress sites use custom themes. A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software.
How to install and active theme in wordpress?
1. The first thing you need to do when you want to install a new WordPress theme is to login to your site admin page. Once there, go to Appearance -> Themes.
2. Here, you will see all the themes you have currently installed in your application.
To add another one, simply click on the Install Themes tab. -> On this page there are two ways to add a new theme. You can either use the search field which will return results from the WordPress.org theme directory or you can upload a theme from your local hard drive. In this tutorial we will show you how to add themes in both ways.
BCA Sem-3 WORDPRESS unit-3
Page 2 of 101 Vasavda Rohit
3.Choose and Install a theme from the official WordPress theme directory
The easiest way to install themes to your WordPress site is if they are listed in the official themes directory. This allows you to search for the theme you need directly from your site admin page. Each theme in the official directory has to have Tags that describe its functionality allowing you to easily search for the right theme.If you know the theme's name, you can simply search for it.
BCA Sem-3 WORDPRESS unit-3
Page 3 of 101 Vasavda Rohit
However, usually that's not the case. This is why, you can use the Feature Filter. For example, you can search for a Black and White, Two columns theme that has Flexible Width. Simply check those tags and press the Apply Filters button.
3. You will now see all themes that meet your search. Hover over any of them and you will see two options - to see a demo of the theme or to install it. Once you choose which theme you want to use for your site, press the blue Install button.
BCA Sem-3 WORDPRESS unit-3
Page 4 of 101 Vasavda Rohit
4. Your WordPress application will download and install the theme for you. Simply click the Acticate link on the next page you will be redirected to.
That's all - you can go to the front page of your site to see its new looks.
To activate the downloaded theme 1.If you have a theme that's not listed in the WordPress.org directory, you can
simply upload it from the Themes -> Install Themes section in WordPress. To do this click on the Upload link at the top of the page.
BCA Sem-3 WORDPRESS unit-3
Page 5 of 101 Vasavda Rohit
2.Now, click the Choose File button, select the archive of your theme from your local computer and press the Install Now button.
3.In few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.
BCA Sem-3 WORDPRESS unit-3
Page 6 of 101 Vasavda Rohit
Wordpress theme template files The term “template” is used in different ways when working with WordPress themes:
• Templates files exist within a theme and express how your site is displayed. • Page Templates are those that apply only to pages to change their look and feel.
A page template can be applied to a single page, a page section, or a class of pages.
• Template Tags are built-in WordPress functions you can use inside a template file to retrieve and display data (such as the_title() and the_content()).
• Template Hierarchy is the logic WordPress uses to decide which theme template file(s) to use, depending on the content being requested.
• WordPress themes are made up of template files. These are PHP files that contain a mixture of HTML, Template Tags, and PHP code.
• When you are building your theme, you will use template files to affect the layout and design of different parts of your website. For example, you would use the header.php template to create a header, or the comments.php template to include comments.
• When someone visits a page on your website, WordPress loads a template based on the request. The type of content that is displayed in by the template file is determined by the Post Type associated with the template file. The Template Hierarchy describes which template file WordPress will load based on the type of request and whether the template exists in the theme. The server then parses the PHP in the template and returns HTML to the visitor.
• The most critical template file is index.php, which is the catch-all template if a more-specific template can not be found in the template hierarchy. Although a theme only needs a index.php template, typically themes include numerous templates to display different content types and contexts.
Template partials # A template partial is a piece of a template that is included as a part of another template, such as a site header. Template partials can be embedded in multiple templates, simplifying theme creation. Common template partials include:
• header.php for generating the site’s header • footer.php for generating the footer • sidebar.php for generating the sidebar
While the above template files are special-case in WordPress and apply to just one portion of a page, you can create any number of template partials and include them in other template files.
BCA Sem-3 WORDPRESS unit-3
Page 7 of 101 Vasavda Rohit
Common WordPress template files #Common WordPress template files Below is a list of some basic theme templates and files recognized by WordPress.
index.php The main template file. It is required in all themes.
style.css The main stylesheet. It is required in all themes and contains the information header for your theme.
rtl.css The right-to-left stylesheet is included automatically if the website language’s text direction is right-to-left.
comments.php The comments template.
front-page.php The front page template is always used as the site front page if it exists, regardless of what settings on Admin > Settings > Reading.
home.php The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show latest posts.
header.php The header template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
singular.php The singular template is used for posts when single.php is not found, or for pages when page.php are not found. If singular.php is not found, index.php is used.
single.php The single post template is used when a visitor requests a single post.
single-{post-type}.php The single post template used when a visitor requests a single post from a custom post type. For example, single-book.php would be used for displaying single posts from a custom post type named book.
BCA Sem-3 WORDPRESS unit-3
Page 8 of 101 Vasavda Rohit
The index.php is used if a specific query template for the custom post type is not present.
archive-{post-type}.php The archive post type template is used when visitors request a custom post type archive. For example, archive-books.php would be used for displaying an archive of posts from the custom post type named books. The archive.php template file is used if the archive-{post-type}.php is not present.
page.php The page template is used when visitors request individual pages, which are a built-in template.
page-{slug}.php The page slug template is used when visitors request a specific page, for example one with the “about” slug (page-about.php).
category.php The category template is used when visitors request posts by category.
tag.php The tag template is used when visitors request posts by tag.
taxonomy.php The taxonomy term template is used when a visitor requests a term in a custom taxonomy.
author.php The author page template is used whenever a visitor loads an author page.
date.php The date/time template is used when posts are requested by date or time. For example, the pages generated with these slugs: http://example.com/blog/2014/ http://example.com/blog/2014/05/ http://example.com/blog/2014/05/26/
archive.php The archive template is used when visitors request posts by category, author, or date. Note: this template will be overridden if more specific templates are present like category.php, author.php, and date.php.
BCA Sem-3 WORDPRESS unit-3
Page 9 of 101 Vasavda Rohit
search.php
The search results template is used to display a visitor’s search results.
attachment.php
The attachment template is used when viewing a single attachment like an image, pdf, or other media file.
image.php The image attachment template is a more specific version of attachment.php and is used when viewing a single image attachment. If not present, WordPress will use attachment.phpinstead.
404.php The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.
BCA Sem-3 WORDPRESS unit-3
Page 10 of 101 Vasavda Rohit
What is widget & widget Areas ?
A WordPress Widget is a small block that performs a specific function. You can add
these widgets in sidebars also known as widget-ready areas on your web page.
WordPress widgets were originally created to provide a simple and easy-to-use way of
giving design and structure control of the WordPress theme to the user. Widgets can
be easily dragged and dropped into a specific widget area. You can find the list of
available widgets and widget areas by going to the Appearance » Widgets section in
your WordPress dashboard.
Widgets in WordPress allow you to add content and features in the widgetized areas of
your theme which is mostly the sidebar. However these widget-ready areas can be in
the header, footer, sidebar, below content, and basically any other area in your theme.
The available widget areas that you have in your theme will vary from theme to theme.
Most WordPress themes are widget ready and have multiple widget areas. However
themes are NOT required to have widget areas. If you do not see any widget areas,
then it means that your theme does not support widgets.
There are many different types of widgets. WordPress by default comes with several
widgets including categories, tag cloud, navigation menu, calendar, search, recent
posts etc. If you drag the recent posts widget in a widget area, then it will contain a list
of recent posts.
Widgets are mostly standalone areas of code that perform a certain function. Plugins
often add their own widgets to give users more control over the display of plugin
functions. An example of a plugin widget would be OIO Publisher which allows you to
add a specific banner ad zone in your widget areas by using the widget.
BCA Sem-3 WORDPRESS unit-3
Page 11 of 101 Vasavda Rohit
Widget Managements
We will study about Widget Management. Widgets are small blocks that perform specific functions. These give design and structure control to the WordPress theme. Some specific features of a widget are −
• They help you add content and features.
• They can be easily dragged and dropped in widget area.
• They vary from theme to theme. They are not same for every theme.
Step (1) − Click on Appearance → Widgets.
Step (2) − The following screen showing available widgets appear.
BCA Sem-3 WORDPRESS unit-3
Page 12 of 101 Vasavda Rohit
The following functions appear on the page −
• Available Widgets − You can use these to add into your sidebar main.
• Inactive Sidebar (not used) − These are not used and can be removed permanently
from the widget list.
• Inactive Widgets − Removes the widgets from sidebar but keep it in the settings.
• Sidebar Main − Any widget you add here will appear on your site.
• Manage in Customizer − Takes you back to customization page
BCA Sem-3 WORDPRESS unit-3
Page 13 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 14 of 101 Vasavda Rohit
Step (3) − Drag and drop in the Sidebar Main. Any widget you add here, shows up on your site.
BCA Sem-3 WORDPRESS unit-3
Page 15 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 16 of 101 Vasavda Rohit
What is Plugin ? he core of WordPress is designed to be lean and lightweight, to
maximize flexibility and minimize code bloat. Plugins then offer custom
functions and features so that each user can tailor their site to their
specific needs. A plugin is a piece of software containing a group of functions that can be added
to a WordPress website. They can extend functionality or add new features to your
WordPress websites. WordPress plugins are written in the PHP programming
language and integrate seamlessly with WordPress. In the WordPress community,
there is a saying that goes around: “there’s a plugin for that”. They makes it easy
for users to add features to their website without knowing a single line of code.
There are thousands available for free to download at the official WordPress plugin
directory. At WPBeginner, we write about all the best WordPress plugins. We have
even shared a list of all the plugins we use. Aside from free plugins, there are
tons of amazing commercial ones available from third-party companies and
developers.
BCA Sem-3 WORDPRESS unit-3
Page 17 of 101 Vasavda Rohit
As a site administrator, you can install/uninstall plugins from the admin area. You can also download and manually install them using an FTP client.
Because the vast majority of plugins are free, it is important to note that they usually do not come with tech support. For this reason it is important to be careful when choosing which ones you want to install on your site. Although there are plugins that can do virtually anything, some are much higher quality than others. In order to choose the right ones, you should ask yourself a couple questions. How long has it been since it was updated? Is it compatible with the latest version of WordPress? Are people getting answers to their support questions? What type of rating does it have?
how to Install a Plugin using WordPress Plugin Search
The easiest way of installing a WordPress plugin is to use the plugin search. The only downside of this option is that a plugin must be in the WordPress plugin directory which is limited to only free plugins. First thing you need to do is go to your WordPress admin area and click on Plugins » Add New.
BCA Sem-3 WORDPRESS unit-3
Page 18 of 101 Vasavda Rohit
You will see a screen like the one in the screenshot above. Find the plugin by typing the plugin name or the functionality you are looking for, like we did. After that, you will see a bunch of listings like the example below: typing the plugin name
or the functionality you are looking for, like we did. After that, you will see a bunch of listings like
the example below:
BCA Sem-3 WORDPRESS unit-3
Page 19 of 101 Vasavda Rohit
You can pick the plugin that is best for you. Since in our search, we were looking for Floating
Social Bar which happens to be the first plugin, we will click the ‘Install Now’ button.
How to Activate Plugin WordPress will now download and install the plugin for you. After this, you will see the success
message with a link to activate the plugin or return to plugin installer.
BCA Sem-3 WORDPRESS unit-3
Page 20 of 101 Vasavda Rohit
A WordPress plugin can be installed on your site, but it will not work unless you activate it. So
go ahead and click on the activate plugin link to activate the plugin on your WordPress site.
That’s all, you have successfully installed your first WordPress plugin.
The next step is to configure the plugin settings. These settings will vary for each plugin
therefore we will not be covering that in this post. Install a Plugin using the WordPress Admin Plugin Upload
Paid WordPress plugins are not listed in the WordPress plugin directory. These plugins cannot
be installed using the first method.
That’s why WordPress has the Upload method to install such plugins. We will show you how to
install WordPress plugin using the upload option in the admin area.
First, you need to download the plugin from the source (which will be a zip file). Next, you need
to go to WordPress admin area and visit Plugins » Add New page.
After that, click on the Upload Plugin button on top of the page.
This will bring you to the plugin upload page. Here you need to click on the choose file button
and select the plugin file you downloaded earlier to your computer.
BCA Sem-3 WORDPRESS unit-3
Page 21 of 101 Vasavda Rohit
After you have selected the file, you need to click on the install now button.
WordPress will now upload the plugin file from your computer and install it for you. You will see
a success message like this after installation is finished.
Once installed, you need to click on the Activate Plugin link to start using the plugin.
You would have to configure the settings to fit your needs. These settings will vary for each
plugin therefore we will not be covering that in this post.
By
BCA Sem-3 WORDPRESS unit-3
Page 22 of 101 Vasavda Rohit
Contact form 7
Contact form 7 is one of the most popular plugins for WordPress. It is easy to
integrate and equally easy to deploy. Contact Form 7 is even used with themes that
have integrated contact forms because the integrated forms do not offer
customization and high-level options.
In this blog, I will show you how you can integrate Contact Form 7 on your
WordPress websites. I will also discuss customization of the forms and emails as
well.
BCA Sem-3 WORDPRESS unit-3
Page 23 of 101 Vasavda Rohit
Given the number of options available for integrating custom contact forms in
WordPress, it is important to know the value offered by Contact Form 7 and why it
is a good fit for your website. Here are some of the outstanding benefits of the
plugin:
• Customization options to fit your unique needs
• Simple implementation and integration process
• Help is just a few clicks away
So let’s get started with the installation part.
Login to the Admin Dashboard. Go to Plugins>>Add New and search for Contact
Form 7 in the right panel.Install and activate the plugin.
BCA Sem-3 WORDPRESS unit-3
Page 24 of 101 Vasavda Rohit
Displaying a Form:
To display a form, open Contact >> Contact Form at your WordPress admin
panel. You can manage multiple forms from this location.
A contact form is already available for immediate use. Right next to the name
Contact form 1, you could see the shortcode [contact-form-7 id=”18″
title=”Contact form 1″]. Copy this shortcode and paste it in your contact page.
BCA Sem-3 WORDPRESS unit-3
Page 25 of 101 Vasavda Rohit
Once done, your contact page would look like:
Live view,
BCA Sem-3 WORDPRESS unit-3
Page 26 of 101 Vasavda Rohit
You could easily customize this “vanilla” form to suit your requirements. Next up is
the customization of the contact form.
BCA Sem-3 WORDPRESS unit-3
Page 27 of 101 Vasavda Rohit
WP Super Cache
Search engines consider site speed to be an important factor search rankings. This is why at
WPBeginner we try our best to improve site load speed to an optimal level. Doing that, we have
noticed that caching our website helped us improve site speed as well as balancing huge spikes
in traffic. We use W3 Total Cache to improve performance of our website. However, many of
our readers asked us about how to install and setup WP Super Cache. Therefore in this guide,
we will show you how to install and properly setup WP Super Cache.
Note: Both W3 Total Cache and WP Super Cache are great plugins. We highly recommend that
you use one or the other depending on your needs.
First thing you need to do is install and activate WP Super Cache plugin(tutorial: how to install a
WordPress plugin). Upon activation, WP Super Cache will notify you that caching is not enabled
on your website at the moment. Setting up WP Super Cache – The Easy Way
To enable cache, go to Settings » WP Super Cache. Under the Easy tab, turn Caching on and
hit update status button.
BCA Sem-3 WORDPRESS unit-3
Page 28 of 101 Vasavda Rohit
After turning on the cache, click on the test cache button to check if it is working. WP Super
Cache will fetch your WordPress site twice and will compare the time stamps of both pages. If
the both time stamps match then this means that caching is working on your site now. WP Super Cache Advanced Set up
WP super cache is a powerful plugin, and it comes with many advance options. These options
can further improve your site’s performance. To Set up WP Super Cache with advance options,
go to Settings » WP Super Cache and click on Advanced tab.
Enable Caching
First check the box that says Cache hits to this website for quick access. Below that you will see
three caching options. By default WP Super Cache uses PHP to serve cache files. However,
using PHP to serve cache files can be resource intensive particularly on shared hosting
environments. So we would like to recommend that you try using mod_rewrite to serve cache
files. After that scroll down and hit the update status button to save these settings.
WP Super Cache will now show you a notification that mod_rewrite rules must be updated and
possibly another notification about scheduling garbage collection. Scroll down the page, and
you will see mod_rewrite rules that needs to be added. Click on Update Mod_Rewrite Rules
button to update these rules. Once mod_rewrite rules are updated this section will turn green.
BCA Sem-3 WORDPRESS unit-3
Page 29 of 101 Vasavda Rohit
To resolve the notice about garbage collection, scroll down on the advance settings page to the
Expiry Time & Garbage Collection section and set up a time and frequency for garbage
collection of cached files on your server.
Enable Compression in WP Super Cache: Compression allows WP Super Cache to serve
cached files as compressed files. These files are downloaded by user browsers quickly due to
their smaller size. To enable compression, simply check the box that says Compress pages so they’re served more quickly to visitors. Setting up CDN with WP Super Cache
Most content websites serve a lot of static files with each page request. These files are
JavaScripts, images, stylesheets, etc. Unlike your WordPress posts which are dynamically
generated by PHP, these files can be served using a Content Delivery Network (CDN). If you
don’t know what is a CDN or why you need a CDN, then you should check out our infographic
“What the Heck is a CDN“.
At WPBeginner we use MaxCDN. You can read our blueprint on Why we use MaxCDN. If you
need help setting up MaxCDN, then we already have a tutorial for how to install and setup
MaxCDN for WordPress. The tutorial uses W3 Total cache, but the basic concept is the same.
BCA Sem-3 WORDPRESS unit-3
Page 30 of 101 Vasavda Rohit
To setup CDN with WP Super Cache, click on the CDN tab and check the box next to Enable CDN Support option. Enter your offsite URL, which will be the url of your pullzone. For
example, http://cdn.wpbeginner.com
In the additional CNAMEs field enter other CNAMEs you have created for your pullzone. For
example, http://cdn1.wpbeginner.com, http://cdn2.wpbeginner.com , http://cdn3.wpbeginner.com
Lastly, check the box that says Skip https URLs to avoid “mixed content” errorsand save
changes. Now your website is now ready to serve static content from a CDN. Serve a Static Site with WP Super Cache
The preload mode in WP Super Cache allows you to create super cache static files for all your
posts and pages and serve a static website. You may ask Why would anyone want to do that?
To conserve server resources.
To serve an old site that is not being updated anymore.
To improve site speed by serving static content only.
These were just a few reasons but there could be many more reasons and situations where you
might want to completely disable PHP processes. Don’t worry your WordPress will work
normally, and you will still be able to manage your content with WordPress.
BCA Sem-3 WORDPRESS unit-3
Page 31 of 101 Vasavda Rohit
Refresh preload cache files options will be set to zero by default, minimum required time is at
least 30 minutes. Pre-loading your entire WordPress site takes some time and consumes a lot
of resources on your server. You can leave it to 0 if you do not want your static files to expire
ever unless you manually refresh cache.
BCA Sem-3 WORDPRESS unit-3
Page 32 of 101 Vasavda Rohit
What Are WordPress Custom Fields? In short, custom fields are a form of meta data that can be used to extend posts and pages.
In that, they are very similar to stuff like publishing date, author, category, tag and other data that’s common for many WordPress content types.
While that sounds a bit underwhelming, custom fields are actually the single most powerful feature for extending WordPress posts and pages.
You will soon see why.
Examples Of Custom Fields
So, basically, custom fields allow you to include additional information of any kind to your content.
While not spectacular in the abstract, it gets more exciting when you look at concrete examples of custom fields in action.
I already mentioned some use cases in the introduction. Metadata from custom fields can, for example, take the form of
• A scoring system to a movie post type • Start and end times for events (like in the Event Organiser plugin) • Prices for products or color variations and sizes • Additional meta boxes in the WordPress editor like the content analysis tool in Yoast SEO
Yep, all of these are done with custom fields. Now do you start to see why this feature is so powerful?
Advantages Of WordPress Custom Fields
In theory, you can add a lot of this information to your content in other ways.
Movie scoring can, for example, be directly added to the post. If that is the case, what do you need custom fields for?
The advantage of using custom fields to add recurring data is that they make it easy to change things site wide.
BCA Sem-3 WORDPRESS unit-3
Page 33 of 101 Vasavda Rohit
For example, if you decided to move the movie scores to another location inside your posts, your can just do so for all reviews by changing one template.
If you saved the information inside the posts, you would have to edit every single one to implement the same change on your entire site.
Sounds a lot more complicated, doesn’t it?
Apart from that, using custom fields often makes for a much better user experience.
As you will see below, they allow you to metafields to the WordPress editor and other places from where the filled-in information is automatically added to your finished content in the right place.
This makes things much more comfortable and, if you are developing websites for other people, professional looking.
What sounds better: Giving your client a customized admin interface that does exactly what they want or telling them to write everything into the post and format it by hand?
I rest my case.
How To Add Custom Fields In WordPress
While this tutorial will teach you how to use Advanced Custom Fields, it should be said that you don’t necessarily need the plugin to take advantage of this WordPress feature.
That’s because the ability to add custom fields is natively built into WordPress (besides the possibility to code it manually that is).
As you will see later on, Advanced Custom Fields makes the process much easier, yet, for completion’s sake I will quickly show you the alternative way.
You might not be aware of it but there is actually a custom field metabox available in the WordPress editor. However, since version 3.1 it is hidden by default and you need to use the screen options at the top to see it.
BCA Sem-3 WORDPRESS unit-3
Page 34 of 101 Vasavda Rohit
After that, the box appears at the bottom of the editor screen.
Here, you can easily add any custom field you like. All you need to do is give it a name and a value.
For example, to let people know which music was in your headphones while writing your post, you can add a custom field called Currently Listening To: plus the tune that’s running at the moment.
BCA Sem-3 WORDPRESS unit-3
Page 35 of 101 Vasavda Rohit
(Is it Taylor Swift for you too? I don’t blame you.)
When you add this data, it will be saved in the database and can be output on your site.
The key (here: Currently Listening To:) will also be reusable in other posts in the future and can be picked from a drop-down menu.
Now all that’s left is adding some code to whichever template you want this field to show up in. We will dive into this topic in more detail below.
Why Should You Use Advanced Custom Fields? If this can be done by WordPress by default or by hand, why the need for a plugin?
I mean, a full five-star rating in the WordPress directory at more than a million active installs, means it has to have something going for it, right?
Well, it does. The plugin basically provides an advanced user interface for adding custom fields to WordPress.
Its main advantage is that Advanced Custom Fields has over 20 different presets for custom fields built in, which makes creating them much faster and easier.
BCA Sem-3 WORDPRESS unit-3
Page 36 of 101 Vasavda Rohit
The presets include:
• Text — Single-line text field with optional HTML support and character limit • Text Area — Same as Text but with multiple lines • Number — Number field that can have optional min/max values • Email — Custom field for email input including validation • Password — Password input with text masking • WYSIWYG Editor — WordPress editor input with options for media insertion and editor
buttons • Image — Upload an image or select one from the media library. Returns an object, URL or
ID. • File — Same as image but for files in general • Select — Drop-down menu with support for multiple selections • Checkbox — Checkbox field for single or multiple items • Radio Button — Pick a single item via radio button • True / False — Basic true or false selector • Page Link — Returns the URL of any post or page. Can be limited to specific post types. • Post Object — Returns a WordPress object of any post or page, post type or taxonomy • Relationship — Same as post object but with an advanced interface and reordering via
drag and drop • Taxonomy — Returns an object or ID for one or more taxonomies. Can be limited to tags,
categories or custom taxonomy terms. • User — Select one or more users. Option to limit choice by user role. • Google Map — Set a center, zoom level and width • Date Picker — Select a calendar date and return a formatted date string • Color Picker — Select a hexadecimal color • Message — Leave a message • Tab — Combine fields into a tabbed interface
Besides these handy presets, the plugin also lets you define rules to determine where they will show up inside the WordPress admin.
That way you can only show custom fields in certain post categories and otherwise keep the admin area free.
A number of available extensions add even more functionality. Some of them are free like:
• Advanced Custom Fields: Nav Menu Field — Adds a field for setting custom menus for posts and pages.
• ACF: Sidebar Selector — Allows the selection of a registered WordPress sidebar.
Others are premium solutions:
BCA Sem-3 WORDPRESS unit-3
Page 37 of 101 Vasavda Rohit
• Repeater Field — Allows users to create complex layouts with any number of fields. • Gallery Field — Provides an interface for managing a collection of images. • Options Page — Create a custom options page for the WordPress dashboard, good for
collecting site-wide data. • Flexible Content — Set up multiple layouts with several fields that can be used in any order
on the page.
In short, Advanced Custom Fields makes extending your content with custom meta data as easy as filling out a form and gives you complete control over how it is used in the WordPress admin area.
If the above has made you curious, you are in luck. We will now take an in-depth look at how to install and use the plugin to implement WordPress custom fields on your WordPress site.
How To Install Advanced Custom Fields Advanced Custom Fields is installed like any other plugin. Go to Plugins > Add New and search for Advanced Custom Fields, then press enter.
The plugin should show up on first place and you can get it onto your site viaInstall Now. When the installation is done, don’t forget to activate.
Alternatively, it’s also possible to download Advanced Custom Fields from the WordPress directory and then upload it to your site via FTP.
In any case, a new Custom Fields menu should now show up in your WordPress admin area.
How To Use The Plugin
BCA Sem-3 WORDPRESS unit-3
Page 38 of 101 Vasavda Rohit
Now the real work begins. However, as you will soon see, it’s no real work at all. Creating custom fields with this plugin is a piece of cake.
To make the process easier to understand, I have come up with a concrete use case for the demonstration.
For this tutorial, I will create a group of custom fields for a post type called books that I use for — drumroll — book reviews.
(By the way, if you are a bit hazy about what custom post types are and how to create and use them, head on over to our tutorial on that very topic.)
In particular, I want to add the following data:
• Release year of the book • The book’s author • Book rating (out of ten)
Let’s get started.
1. Create A New Field Group
A Field Group is exactly what it sounds like — a group of custom fields that topically belong together.
For example, all the information I want to add to my book reviews logically correlate and can therefore all go in one group.
Creating field groups is the main function of Advanced Custom Fields. Of course, a group can also only contain one field but that is the terminology they have chosen.
To create one, click Custom Fields in the WordPress admin area. The menu you are being taken to shows all the field groups you have created.
BCA Sem-3 WORDPRESS unit-3
Page 39 of 101 Vasavda Rohit
For now, it will be completely empty. To change that, find the Add New button at the top and click it. This will bring you to the following screen:
BCA Sem-3 WORDPRESS unit-3
Page 40 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 41 of 101 Vasavda Rohit
Don’t worry if it looks a little overwhelming, as soon as you have gone through the process once, you’ll understand everything on there.
For now, however, just enter a name for your field group at the top. Me, I am going with Book Metadata. After that, we can move on to adding fields to the group.
2. Add And Configure Fields
To start adding fields to your group, just click the big blue Add Field button at the bottom (who would have thought?). It will open this form:
BCA Sem-3 WORDPRESS unit-3
Page 42 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 43 of 101 Vasavda Rohit
Here’s what each of the fields in the form means and is used for:
• Field Label — The name that appears inside the advanced custom fields menu • Field Name — Name used inside templates and code. Should automatically be populated
with the label. No spaces allowed between words, only hyphens, and underscores. • Field Instructions — Leave instructions for using the field later • Required — Determine whether or not this field is mandatory to fill in. If yes, authors won’t
be able to save posts or pages associated with the custom field unless contains something. • Default Value — This value will automatically populate the field when creating a post • Placeholder Text — Appears within input fields on the editor screen • Prepend & Append — Defines what appears before and after the input text • Formatting — Check whether or not HTML input into a text field will be rendered on screen • Character Limit — Optionally put a limit on how many characters can be typed in • Conditional Logic — Rules for when fields are visible • Minimum & Maximum Value — Minimum and maximum number allowed inside a field • Step Size — Defines the step by which to reduce or increase a number when clicking on
the arrows • Close Field — Close the currently viewed field to configure others (field group,
remember?).
Be aware that not all of these options may show up. For example, minimum and maximum value as well as step size are only available for fields that contain numbers.
There are also additional options available for other field types but we won’t go into them at this point.
My own setup ends up looking like this:
• Field Label: Release Year • Field Name: release_year • Field Type: Number • Field Instructions: Input the year of the book’s release here. • Required: Yes
I make this field required because I definitely want authors to fill this in (and myself as well).
• Field Label: Author • Field Name: author • Field Type: Text
BCA Sem-3 WORDPRESS unit-3
Page 44 of 101 Vasavda Rohit
• Field Instructions: Please use the first and last name without any commas, e.g. “Stephen King, J.K. Rowling”.
• Required: Yes • Formatting: No Formatting
As you can see, I give clear instructions on how to use this field. The “no formatting” setting is to keep anyone from adding HTML here that would mess with my layout.
• Field Label: Book Rating • Field Name: book_rating • Field Type: Number • Field Instructions: Rate the quality of the book on a scale of one to ten. • Required: Yes • Minimum Value: 1 • Maximum Value: 10 • Step Size: 1
Since the rating scale is one to ten, it makes sense to limit the field to these numbers so nobody can input anything else.
One you are done, you can close the fields to see the entire group. This also allows you to change the order of the items via drag and drop.
For example, I decided I want to put the author to the top even though it’s not the first field I have created and I can easily do so.
BCA Sem-3 WORDPRESS unit-3
Page 45 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 46 of 101 Vasavda Rohit
3. Configure Field Location And Options
Before we are done here, we need to configure where and how the newly created fields will show up and we do so with the Location and Options panel.
Under Location, you can add rules that determine under which circumstances the fields will be displayed.
They can be included and excluded depending on:
• post type • user type • exact post • post category • post format • post status • post taxonomy • exact page • page type • page parent • page template • attachment • taxonomy term • user
In my case, I want to limit my field group to my book post type, so will choose Post type > is equal to > books.
After that, it’s on to Options. Here’s what each setting means:
• Order No — The order this field group will take if there are several on the same screen • Position
• Normal — Below content editor • High — Below title • Side — On the side of the editor
Style • Seamless — Without a WordPress metabox • Standard — Placed inside a metabox
Hide on screen — Checkboxes that allow you to hide other panels you are not going to need like tags, categories, comments and more
BCA Sem-3 WORDPRESS unit-3
Page 47 of 101 Vasavda Rohit
Pick whatever is right for your case. I go with:
• Position: Side • Style: Standard
I leave the rest as is for now. When done, hit Publish.
After that, you can head on over to your custom post type to see if the new meta fields show up. In my case, they do.
Alright, now all that’s left is to make your custom fields show up on your page. In order to do so, add a bit of test data and publish your post — it’s time to edit some theme files.
How To Display Custom Fields In Your WordPress Theme In order to display custom fields on your site, you need to call them in a template file.
Therefore, in most cases the first order of the day is to copy the template for single posts, which is usually single.php.
BCA Sem-3 WORDPRESS unit-3
Page 48 of 101 Vasavda Rohit
Check the WordPress template hierarchy if you are not sure which is the right one for you.
The hierarchy also tells me that in order to make a custom template for a single post type, I can rename the file to single-postname.php.
Therefore, I will copy the template file and save it as single-books.php in my child theme folder.
After that, it’s time to call our new post meta data, which can be done via get_post_meta() but it is recommended to use ACF’s own functions.
In this case, I will use the_field() which allows me to display custom fields for the current post.
When I wrap it in its own div and add some markup, the code comes out like this:
3
4
5
6
7
<div class="book-meta">
<ul>
<li><strong>Author:</strong> <?php the_field('author'); ?></li>
<li><strong>Release Year:</strong> <?php the_field('release_year'); ?></li>
<li><strong>Book Rating:</strong> <?php the_field('book_rating'); ?>/10</li>
</ul>
</div>
I only need to input it into my newly created post template where I want it to show up, add a little styling to my stylesheet, and voilá.
BCA Sem-3 WORDPRESS unit-3
Page 49 of 101 Vasavda Rohit
Not so hard now, was it? Told you it would be a piece of cake.
BCA Sem-3 WORDPRESS unit-3
Page 50 of 101 Vasavda Rohit
Regenerate Thumbnails
It all started when the user switched to a new theme, and the theme displayed thumbnails next
to the excerpt of the post. The problem was that all new images that were uploaded after
activating the theme were looking good, but all the old thumbnails looked ugly and distorted.
The user tried to adjust image sizes in Settings » Media, but it didn’t solve the problem. In this
article, we will show you how to regenerate thumbnails or new image sizes in WordPress.
By default when you upload an image to WordPress, it creates different sizes and saves them in
the uploads folder. Previously, we published a tutorial on how to create additional image sizes in
WordPress. Many WordPress themes take advantage of this feature and define new image
sizes, but the problem is that these new image sizes are only applied on the images you upload
after activating the theme.
To solve this problem you need to generate new sizes for all previously uploaded images. This
process is often referred to as regenerating thumbnails.
If you don’t like the video or need more instructions, then continue reading.
To generate images in newly defined image sizes, install and activate the Regenerate
Thumbnails plugin. After activating the plugin, go to Tools » Regen. Thumbnails.
BCA Sem-3 WORDPRESS unit-3
Page 51 of 101 Vasavda Rohit
Pressing the regenerate thumbnail button will start generating new image sizes defined by your
theme or in Settings » Media page. It may take a while, depending on how many images you
have on your website.
You can also regenerate image sizes for selected images in Media » Library.
Regenerating images sizes does not affect your original upload. It creates additional copies of
images in the newly defined sizes.
WooCommerce
BCA Sem-3 WORDPRESS unit-3
Page 52 of 101 Vasavda Rohit
With over 3+ million active installs, a 4.6 user rating on WordPress.org, and an army of happy, loyal digital store owners to back it, WooCommerce is the most popular free e-commerce solution for WordPress by a mile. According to BuiltWith, as of May 2017, WooCommerce powers over 41% of all online stores
WooCommerce Tutorial Index
! If you’re looking to open up virtual shop on your WP-powered website, going with WooCommerce is one of the best decisions you could make. Here’s an extensive WooCommerce tutorial and how to get it up and running on your website.
Installation Adding and Managing Products Managing WooCommerce
WooCommerce Installation Step 1 The first thing you will need to do is to install the WooCommerce plugin. You can download it for free from the WordPress repository or follow the steps below on how to do it from within your dashboard.
To install it from your dashboard navigate to WordPress Admin > Plugins > Add New, search for “woocommerce”, and click on “Install Now.” Ensures that the author shows up as WooThemes. 3+ is currently the latest version of WooCommerce.
BCA Sem-3 WORDPRESS unit-3
Page 53 of 101 Vasavda Rohit
Step 2 Then click on “Activate.”
Step 3 You are then met with a walkthrough to for WooCommerce setup. You can skip this but in our tutorial we will click on “Let’s Go.” (Note: We will go into more detail for each of these options further below in our WooCommerce tutorial)
BCA Sem-3 WORDPRESS unit-3
Page 54 of 101 Vasavda Rohit
Step 4 On the page setup screen WooCommerce is notifying you that it will create a few pages for you automatically that are needed to complete the setup. This includes a shop , cart, checkout, and my account pages. Click on “Continue” to let it create these for you.
BCA Sem-3 WORDPRESS unit-3
Page 55 of 101 Vasavda Rohit
Step 5 On the store locale setup screen WooCommerce allows you to quickly choose the country and or state you are based out of, the currency, and units for your products. Then click on “Continue.”
BCA Sem-3 WORDPRESS unit-3
Page 56 of 101 Vasavda Rohit
Step 6 On the shipping & tax setup screen you can choose whether or not you are shipping physical goods to customers. Remember, WooCommerce can also be used to sell digital products and downloads. And then you can enable sales tax if required. Then click on “Continue.”
BCA Sem-3 WORDPRESS unit-3
Page 57 of 101 Vasavda Rohit
Step 7 On the payments screen you can choose which 3rd party payment processor you want to integrate with. We are personally big fans of Stripe. And as of February 2016, the Stripe is free for WooCommerce (you will still pay the transaction fee). Then click on “Continue.”
BCA Sem-3 WORDPRESS unit-3
Page 58 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 59 of 101 Vasavda Rohit
And that’s it! Your WooCommerce store is now ready. You can click on the link at the bottom to return to your WordPress dashboard and start creating your products. Check out the rest of the WooCommerce tutorial below.
Adding & Managing New Products The first alteration you’ll notice is the addition of two new tabs to your dashboard’s side menu, named WooCommerce (your general settings area) and Products (your products settings area). To get started setting up your e-store, go to WordPress Admin > Products > Add Product to add your first product. Create a title and short description for the product. Here’s what just a title & description looks like in a live preview.
BCA Sem-3 WORDPRESS unit-3
Page 60 of 101 Vasavda Rohit
That done, scroll down below the post editor to reveal two new widgets on the post editing screen: product data and product short description.
Product Data WordPress Admin > Products > Add New In the product data screen widget, you can select whether or not the product is virtual (the former option removes the Shipping data tab) and if it is downloadable (digital). You can enter in the regular & sale price (sales can be time-sensitive) in the General tab.
BCA Sem-3 WORDPRESS unit-3
Page 61 of 101 Vasavda Rohit
If you’re selling digital products, then you also have to upload the file to be purchased, customize the download limit (leave it blank to mark it as unlimited), the download expiry (leave it blank to keep it available permanently), and the file type (standard/application/music). The file type you select affects the schema.org markup for the product.
Next, in the Inventory tab, you can customize options to manage your stock by entering in the quantity of the product, stock status (in/out of stock), and if you’d like to allow backorders. Additionally, you can mark the product as individually sold, meaning only one can be bought in a single order. This is also where you enter the SKU (identification number) if you have one. In the Linked Products tab, you can add upsells, cross-sells, and product grouping. Attributes allows you to enter in specific attributes of the product (e.g. reliable, never breaks down, etc.) that will be displayed under an Additional Information tab in the front end version of the product page. Finally, you can enter custom purchase notes, give the product a menu order, and enable/disable reviews in the Advanced tab. Product Short Description WordPress Admin > Products > Add New With the product short description screen widget, you can create a short tagline for the image that will be displayed under the product title.
After playing around with all of that, don’t forget to add tags, place it in a category, and include a product image/gallery. Here’s what some sample data looks like in a live preview.
BCA Sem-3 WORDPRESS unit-3
Page 62 of 101 Vasavda Rohit
Managing Products WordPress Admin > Products > [various tabs] In the other pages under WordPress Admin > Products, you can view your products, categories, tags, shipping classes, attributes, and calendar. Each of these pages look like the standard WordPress Admin > Posts > Categories page, except the product view (displayed below).
BCA Sem-3 WORDPRESS unit-3
Page 63 of 101 Vasavda Rohit
Managing WooCommerce In the WooCommerce tab, you can explore various things about your digital store: you can view orders, coupons, and reports. You can also customize settings and add new extensions. Orders WP Admin > WooCommerce > Orders This page displays a list of your current purchases and orders. If you sell digital products, there’s not much to do here other than see who bought what. But if you sell physical goods, here’s where you can organize what products you need to ship and what orders are being processed or put on hold.
Coupons WordPress Admin > WooCommerce > Coupons [> Add New] WooCommerce has several powerful options for adding new coupons to your e-store. In the coupon editing screen, the coupon data screen widget allows you to customize the coupon discount and restrictions.
BCA Sem-3 WORDPRESS unit-3
Page 64 of 101 Vasavda Rohit
The General tab allows you to edit the basic coupon information: the type of coupon (cart discount, cart percentage discount, product discount, and product percentage discount), its value, free shipping options, coupon taxation, and its expiry date. In Usage Restrictions you can set a minimum spend the customer has to make to validate the coupon. To restrict the use from use in conjunction with other coupons, check the box for Individual use only. If the coupon shouldn’t apply to items that are on sale, there’s an option for that, too. Here’s also where you select the products and product categories the coupon is applicable to. Lastly, you can even ban certain email addresses from coupon usage. The final tab, Usage Limits, sets the usage limit per coupon or per customer. The coupon management screen is below.
BCA Sem-3 WORDPRESS unit-3
Page 65 of 101 Vasavda Rohit
Reports WordPress Admin > WooCommerce > Reports WooCommerce also offers powerful built-in tracking. You can view charts and graphs of your sales, orders, and shipping costs over five different time periods. Each graph can be limited to the sales of a particular product, product category, or coupon. In the Customers tab, you can view your customer acquisition over the same five time periods. Lastly, you can also view your low in stock, out of stock, and most stocked products in the Stocks tab. All this data can be exported in a CSV sheet.
Settings WP Admin > WooCommerce > Settings
BCA Sem-3 WORDPRESS unit-3
Page 66 of 101 Vasavda Rohit
Here’s where WooCommerce gets really impressive: in the Settings screen, you can customize pretty much every single aspect of your e-store. Everything from your thousands separator to the check out process to email options can be tailored to your satisfaction. The General tab takes care of your basic information, including your currency, base & selling locations, and display options.
BCA Sem-3 WORDPRESS unit-3
Page 67 of 101 Vasavda Rohit
Your product data, including custom sorting, default displays, measuring systems, product thumbnail dimensions, download methods, and even Ajax/non-Ajax add to cart buttons is customized in the Products tab.
Taxation methods are modeled in the Taxes tab — if you wish, you can even disable taxation in your store.
BCA Sem-3 WORDPRESS unit-3
Page 68 of 101 Vasavda Rohit
Shipping takes care of your shipping methods and pricing models. You can also enable/disable shipping store-wide, and edit various display options. Restricting your store availability only to specific countries is also possible.
BCA Sem-3 WORDPRESS unit-3
Page 69 of 101 Vasavda Rohit
Checkout allows you to customize the checkout process: you can choose from five payment gateways, edit the pages, add a T&C page, and change URL appendages.
BCA Sem-3 WORDPRESS unit-3
Page 70 of 101 Vasavda Rohit
Account edits all front end account display and registration options.
BCA Sem-3 WORDPRESS unit-3
Page 71 of 101 Vasavda Rohit
BCA Sem-3 WORDPRESS unit-3
Page 72 of 101 Vasavda Rohit
In the Emails tab, you can customize all things customer support. Specifically, you can tailor all the sender options for WooCommerce-generated email, right down the email background color.
And lastly in the API tab you can enable the REST API, Keys/Apps, and Webhooks.
BCA Sem-3 WORDPRESS unit-3
Page 73 of 101 Vasavda Rohit
System Status WordPress Admin > WooCommerce > System Status All your back end information — your WooCommerce/PHP/MySQL/etc. version, size limits, logging, and more — is found here. In the Tools tab on the same page , you can clear your website caches for multiple variables, install new options, and reset settings to the default.
Add-ons WordPress Admin > WooCommerce > Add-ons
BCA Sem-3 WORDPRESS unit-3
Page 74 of 101 Vasavda Rohit
One of the attributes that makes WordPress the most popular CMS on the planet is the community behind it. Thousands of themes and tens of thousands of plugins; nearly 100% of them are user-contributed. It’s pretty much the same thing with WooCommerce, although on a smaller scale.
BCA Sem-3 WORDPRESS unit-3
Page 75 of 101 Vasavda Rohit
The plugin developers allow you to purchase native and third-party WooCommerce extensions from their Extensions store. Literally hundreds of various add-ons and WooCommerce-specific themes and styling options are available at the store.
Plugin:- SEO Yoast
BCA Sem-3 WORDPRESS unit-3
Page 76 of 101 Vasavda Rohit
Features
Yoast SEO is the most comprehensive WordPress SEO plugin with many built-in tools and
features. Here is a quick overview of some of those features. Change post’s SEO title and meta description on a per post basis.
Title and meta description support for taxonomies (e.g. category and tags).
Google search result snippet previews.
Focus keyword testing.
Meta Robots configuration:
Easily add noodp, noydir meta tags.
Easily noindex, or nofollow pages, taxonomies or entire archives.
Improved canonical support, adding canonical to taxonomy archives, single posts and pages and the front page.
RSS footer / header configuration.
Permalink clean ups, while still allowing for Google Custom Search.
Breadcrumbs support, with configurable breadcrumbs titles.
XML Sitemaps with:
Images
Configurable removal of post types and taxonomies
Pages or posts that have been noindexed will not show in XML sitemap (but can if you want them too).
XML News Sitemaps.
.htaccess and robots.txt editor.
Ability to verify Google Webmaster Tools, Yahoo Site Explorer, and Bing Webmaster Tools
Basic import functionality for HeadSpace2 and All in One SEO. (You can also use the SEO Data Transporter to transfer functionality from themes like Thesis, Headway, Genesis etc).
The premium version of the Yoast SEO comes with even more features. A redirect manager that allows you to easily set up redirects.
Video tutorials to help you understand each feature of the plugin.
BCA Sem-3 WORDPRESS unit-3
Page 77 of 101 Vasavda Rohit
Premium support provided by the folks at Yoast to help you make the most out of your site’s SEO.
For more features and details you may want to see our comparison of Yoast SEO vs All in One
SEO Pack. How to Install Yoast SEO Plugin
First, thing you need to do is install and activate the Yoast SEO plugin. For more details, see
our step by step guide on how to install a WordPress plugin.
Upon activation, you will notice a new menu item in WordPress admin bar labeled SEO with
Yoast SEO logo on it.
Now that you have installed and activated the plugin, let’s take a look at how to properly setup
this powerful plugin. How to Setup WordPress SEO Plugin by Yoast
You should remember, that the settings that we select are the ones that we recommend. Other
experts may have their own preferences and discretion, so advanced users can ignore anything
that they do not like.
BCA Sem-3 WORDPRESS unit-3
Page 78 of 101 Vasavda Rohit
If you are a beginner, and you want to use Yoast’s WordPress SEO plugin like we do, then
please follow along the steps carefully. Step 1. Data Transfer
Most of you probably have another WordPress plugin like All in One SEO pack, or a theme
framework like Genesis dealing with your SEO data.
If you want to successfully use this plugin, then you need to make sure that all of your previous
data has been transported to this plugin before you deactivate the other one.
To accomplish this, we recommend using SEO Data Transporter by StudioPress. If you’re
setting this up on a new blog, then skip this step. Step 2. General Settings
Clicking on the SEO icon takes you to settings page for the plugin. Click on ‘General’ tab and
you will notice a button to open configuration wizard. We want you to ignore this wizard,
because we will be taking you step by step through each option.
Step 3. Features
Let’s switch to the ‘Features’ tab and enable the advanced settings page.
BCA Sem-3 WORDPRESS unit-3
Page 79 of 101 Vasavda Rohit
Don’t forget to click on the save changes button to store your settings.
You will notice new items appear under the SEO option in your WordPress menu.
These items include Titles and Meta, XML Sitemaps, Social, Advanced, and tools. We will be
showing you how to setup each one later in this article.
BCA Sem-3 WORDPRESS unit-3
Page 80 of 101 Vasavda Rohit
Step 4. Your Info
Next, you need to switch to the ‘Your Info’ tab. This is where you will provide information about
your site and the person or company behind it.
First you need to provide a site name and an alternate name for search engines to consider.
Your site’s name could be your site’s title.
If you do not enter anything here, then Yoast SEO will automatically use your site’s title as your
website name. Search engines like Google can display this information in search results like
this:
BCA Sem-3 WORDPRESS unit-3
Page 81 of 101 Vasavda Rohit
The next option is to choose whether this website is run by a company or an individual person.
If you choose company, then you will be asked to provide a company name, and you can also
upload a company logo.
On the other hand, if you choose a person, then you can add the name of the person behind the
website. Step 5. Webmaster Tools
If you know a little bit about SEO, then you have probably heard that each of the popular search
engines, Google, Bing, Yandex, and Alexa allow site owners to add their sites using webmaster
tools area (see our guide on how to add your WordPress site to Google webmaster tools).
Webmaster tools let you see insights and other relevant data about your site from specific
search engines.
In order to verify your site and see those exclusive data, you have to add a meta tag to your
site, or upload a file. Most beginners are afraid to add meta tags, so Yoast put this option in to
ease the process. Simply add the meta code that you received from the search engines in the
respective fields.
BCA Sem-3 WORDPRESS unit-3
Page 82 of 101 Vasavda Rohit
Step 6. Security
The last tab in general settings is labeled Security. This has only one option which disables
advanced part of the WordPress SEO meta box. We recommend that you leave it disabled.
Disabling advanced metabox will prevent your authors from making advanced changes like
noindex and canonical settings (which is good).
BCA Sem-3 WORDPRESS unit-3
Page 83 of 101 Vasavda Rohit
Step 7. Titles & Metas
Titles & Metas section under Yoast SEO has several tabs in it. We will cover each one of them.
1. General
Here you can choose the symbol you want to use a separator between titles. Default option is
dash, you can use it if you are unsure which symbol to choose.
On this page, you can also disable readability and keyword analysis tab which appear under the
Yoast SEO metabox when you are writing post. We recommend that you leave them enabled.
2. Homepage Title
Next, we will work on defining the title for our homepage. By default you will see these fields
pre-filled with title-template. So what is the difference between a title and a title template, you
may ask.
In instances like your homepage, you may want to create a static title, description, and
keywords. But for posts, the title will vary from one post to another.
Title templates allow you to define a way that the title and other meta information is pulled and
organized.
BCA Sem-3 WORDPRESS unit-3
Page 84 of 101 Vasavda Rohit
Let’s take a look at the image below for the home page settings. By default the template
variables in the title field work fine for most website however you’re welcome to change it. The
next option is to enter your site’s description. Once you are done, click on save settings button.
Note: If you are using a static homepage, then you will see links to edit your homepage and
blog page to add title and meta descriptions.
3. Post Types Titles & Metas
By default WordPress comes with several post types such as post, page, revisions, attachment,
and navigation menus. Users can also define their own custom post types.
Yoast SEO allows you to set titles and meta for posts, pages, media, and other custom post
types. This site-wide title and meta description will be used if you forgot to add title and meta
description for individual post.
We recommend leaving the description fields blank for all post types here. We also recommend
using only the post title as the title template.
BCA Sem-3 WORDPRESS unit-3
Page 85 of 101 Vasavda Rohit
Remember Yoast SEO plugin also adds an SEO meta box in your post edit area. For maximum
SEO benefits, we highly recommend you to manually enter title and descriptions for each post,
page, and custom post type on your site. Otherwise Yoast SEO will use the title as defined here
and will automatically add description for your posts and pages.
Read our WordPress SEO Tip for Beginners on optimizing blog posts.
4. Taxonomies
On the taxonomies tab, you can configure titles and meta for categories, tags, custom
taxonomies, and post format archives.
Default template variables should work for most sites. As for descriptions, please remember that
Yoast SEO picks up descriptions from your categories and tags.
BCA Sem-3 WORDPRESS unit-3
Page 86 of 101 Vasavda Rohit
If you do not have any description for terms in your categories, tags, or custom taxonomies,
then WordPress SEO does not add meta description in archives for these terms. Check out our
guide on categories vs. tags.
5. Archives
On the Archives tab, you have title and meta settings for author and date archive pages, and
special pages such as search and 404 pages.
We recommended that you check disable author archives for single author blogs. If you are
running a single author blog, then your main blog and the author archives contain exactly the
same content. The setting is there to prevent duplicate content.
BCA Sem-3 WORDPRESS unit-3
Page 87 of 101 Vasavda Rohit
Leave other settings as they are and save changes.
6. Other
The other tab has some additional settings. Like you can disable picking up descriptions from
Dmoz or Yahoo directories for your pages. If you are unsure what to do here, just leave all of
them unchecked Step 8. Social
As we said earlier, Yoast SEO is a powerhouse packed with many features to provide
comprehensive optimization.
One great feature of the plugin is that it integrates your site with Facebook, Twitter, and
Google+ social platforms.
BCA Sem-3 WORDPRESS unit-3
Page 88 of 101 Vasavda Rohit
Clicking on the Social link under the SEO menu will take you to setup these platforms. We will
show you how to configure each of them.
1. Accounts
The first tab under the social settings is for all your social accounts. This allows Yoast SEO to
tell Google about your social profiles. You need to simply add the URLs and Twitter username
for the main social profiles of your site.
2. Facebook
On the Facebook tab, first make sure that open graph meta data option is enabled. Checking
this allows WordPress SEO to add Facebook open graph meta data in your
website’s <head> section.
This will help Facebook pick up the right thumbnail and page information when a post from your
website is shared on Facebook.
The next option is to provide a thumbnail for your homepage with SEO title and description. This
image and description will be used when someone shares the homepage of your site on
Facebook.
BCA Sem-3 WORDPRESS unit-3
Page 89 of 101 Vasavda Rohit
After that you can provide a default thumbnail image URL. This image will be used for all
articles that do not have a thumbnail or any other image in it.
The next option is to associate your website with a Facebook profile. This profile can be a user
profile as well as a Facebook app. In most cases, Facebook profile is the way to go.
You can add a Facebook admin which will give you access to Facebook Insights for your site.
3. Twitter
As for Twitter, you can add Twitter cards into your site’s head section.
You can also choose the card type to use. We recommend using summary with large image.
BCA Sem-3 WORDPRESS unit-3
Page 90 of 101 Vasavda Rohit
4. Pinterest
Pinterest uses Open Graph meta data just like Facebook. Make sure that you have open graph
meta data box checked under Facebook settings.
After that you just need to enter the site verification code provided by Pinterest. Simply visit your
Pinterest account settings to add and verify your site. You will be provided with a meta tag that
you need to enter here.
5. Google+
BCA Sem-3 WORDPRESS unit-3
Page 91 of 101 Vasavda Rohit
If you have created a Google+ page for your business enter its URL here, and then go to your
Google+ business page and enter your website’s URL in about section.
Step 9. XML Sitemaps
Sitemaps are essential for your WordPress site. It is the quickest and easiest way to get
indexed and notify search engines about your content. Sitemaps also allow you to tell search
engines how to prioritize your content.
WordPress SEO by Yoast makes it super easy to add XML sitemaps in WordPress. The XML
Sitemaps settings is divided into different tabs. We will walk you through them.
First you need to make sure that XML Sitemaps are enabled.
BCA Sem-3 WORDPRESS unit-3
Page 92 of 101 Vasavda Rohit
After that you need to click on the ‘User Sitemap’ tab and make sure that author/user sitemap
options is disabled.
Move on to post type tab and disable any post type that you don’t want to be included into
sitemaps.
By default, Yoast SEO disables Media Attachments from sitemaps.
BCA Sem-3 WORDPRESS unit-3
Page 93 of 101 Vasavda Rohit
Repeat the same process for taxonomies. If there is a taxonomy that you don’t want to be
included into sitemaps, then you can exclude it here.
The excluded posts tab allows you to remove individual posts,pages, or custom post types from
XML sitemap. Simply enter the post IDs in the field and save changes.
See our tutorial on how to find post IDs in WordPress.
BCA Sem-3 WORDPRESS unit-3
Page 94 of 101 Vasavda Rohit
Step 10. Advanced
The advanced settings page allows you to configure breadcrumbs, permalinks, and RSS feed
related settings.
1. Breadcrumbs
Breadcrumbs are great for internal linking because it defines a clean path or trail to the page
you are on. These breadcrumbs also appear in search results giving your site extra advantage
in the search.
Make sure that you click on ‘Enabled’, this will reveal more breadcrumb settings.
The default settings should work for most websites, but if you want to change something then
go ahead. Once you are done click on the save changes button.
2. Permalinks
BCA Sem-3 WORDPRESS unit-3
Page 95 of 101 Vasavda Rohit
Just to be clear, we are talking about the Permalink settings in Yoast SEO tab, not in the setting
tabs.
This section does not allow you to create SEO Friendly URLs in WordPress. It assumes, that
you have already done that.
So let’s take a look at what type of features this section offers:
WordPress by default adds a category base in each category url i.e /category/.
By clicking ‘Remove’ you can strip that part from your category URLs. This is something that a
lot of people want. But you can leave it unchecked if you do not want your category urls and
page urls to conflict if they are the same name.
Next option is to redirect attachment URLs to parent post. WordPress allows you to attach
images and other media to posts. But all of those attachments get their own URLs which in
most cases are unnecessary. Therefore by checking this box, you redirect all your attachment
page URL to the original post URL.
The next option is to remove stop words from permalinks. Stop words are common words used
in plain language. Yoast believes that by removing these, you will create cleaner URLs. While it
does make the URLs smaller, we disagree with Yoast. This is why we have left it unchecked.
BCA Sem-3 WORDPRESS unit-3
Page 96 of 101 Vasavda Rohit
The next option on the permalinks page is to remove ?replytocom variable from comment reply
links. It disables the links for the users with javascript disabled.
Most web crawlers when they visit your site have javascript disabled, so they do not see the
URL and can quickly move on. This increases the crawl efficiency particularly if you are running
a site with lots of comments.
Redirect ugly URLs to clean permalinks option is not needed in most cases. We advise you to
ignore it unless you know what you’re doing.
3. RSS
RSS Feeds are often used by content scrapers to copy content from your website. Yoast SEO
allows you to add a backlink to your own site for each post in your RSS feed.
This way, you will get backlinks from their site, and Google will know that you are the original
source.
There are options to add your author link, Post link, blog link, and blog description. So get
creative. This can also be used to add advertisement to your RSS feed.
For advanced users: How to Add Custom Content and Completely Manipulate your RSS Feeds.
BCA Sem-3 WORDPRESS unit-3
Page 97 of 101 Vasavda Rohit
Step 11. Tools
As you can see that we have spent a good amount of time getting these settings just right, so
you probably want to export the settings as Backup (just incase if you accidentally mess things
up in the future). You can also export settings to use it as an initial guideline for all of your future
sites that you are going to use this plugin on.
The bulk editor allows you to edit post titles and descriptions in bulk. We do not recommend
using it. Duplicate descriptions and titles can cause damage to your SEO.
The other tool is file editor, we strongly urge beginners and even intermediate level users to
stay away from these settings. Tiny mistake there can make your site inaccessible for search
engines or make it useless. Step 12. Search Console
Search Console section in the Yoast SEO plugin, allows you to connect your WordPress site to
Google Search Console tools (formerly webmaster tools).
You can add your WordPress site to Google webmaster tools and then verify it using Yoast
SEO plugin.
BCA Sem-3 WORDPRESS unit-3
Page 98 of 101 Vasavda Rohit
Simply click on get Google Authorization Code and you will be redirected to Search Console
website where you will get a code. Copy this code and enter it in the plugin settings to complete
the verification.
After the verification, you will be asked to select a profile. You will need to select your website
from a dropdown menu.
Yoast SEO will now fetch your Search Console data into WordPress. You will be able to see
Desktop, Mobile, Feature Phone tabs on screen.
This is where you can see crawl errors related to your website and mark them as fixed after
setting up redirects (we will discuss redirects later in this article).
BCA Sem-3 WORDPRESS unit-3
Page 99 of 101 Vasavda Rohit
Yoast SEO Premium
The basic Yoast SEO plugin is free and works really well for millions of WordPress sites around
the world. However, it comes with an even more powerful Premium version. Step 13: Redirects
Yoast SEO Premium adds a powerful redirect manager. This allows you to quickly set up
redirects on your WordPress site. You can quickly fix 404 errors in your Google search console
by setting up redirects and marking them as fixed in Search Console.
Step 14: Customizing and Maximizing the Benefit
Just installing and setting up this plugin is not enough. In order for you to really maximize the
benefit of this plugin, you need to customize the settings on per post basis.
Now this would not be a chore if you do it every time you write a post. Let’s take a look at how
you can maximize the benefits by customizing.
WordPress SEO for Individual Posts and Pages
When editing any post or page in WordPress you will now see a metabox below the post editor
labeled Yoast SEO. This box comes with tons of SEO options allowing you to improve that post
and page.
BCA Sem-3 WORDPRESS unit-3
Page 100 of 101 Vasavda Rohit
You can click on the title in the snippet preview to edit it. You can also click on the edit snippet
button to add title and meta description for the post or page you are editing,
You should write a custom title, and meta description rather than letting it auto-generate.
Sometimes your post title, and your SEO title might not be the same. Every time, you should
write a custom Meta Description because the excerpt generator only picks up the first
paragraph which might not be the most important one.
Make sure you select a focus keyword, so you can get analysis on how strong your page is for
that keyword. For more details check out WordPress SEO tip for beginners – how to optimize
your WordPress blog posts.
Once you click Save the post you will see analysis of the post below snippet preview. This gives
you even further insights about your specific post or page.
Use the free analysis as a reference point. Don’t kill yourself over it, but usually it is pretty
accurate.
WordPress SEO for Category and Tag Archives
Just like your post and pages, you can also override the SEO title and meta descriptions for
category, tag, and author archive pages.
Visit Posts » Categories page and click on the edit link below any category. On the category
edit page, scroll down to bottom and you will see the Yoast SEO meta box.
BCA Sem-3 WORDPRESS unit-3
Page 101 of 101 Vasavda Rohit
You can do that for all your categories, tags, and custom taxonomy archives.
We hope this guide helped you install and setup WordPress SEO plugin by Yoast. You may
also want to see our step by step WordPress SEO guide for beginners.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video
tutorials. You can also find us on Twitter and Facebook.
