How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf ·...

13
How to Use WordPress Introduction.................................................................................................................................................. 1 When to Use WordPress .............................................................................................................................. 1 WordPress vs. WordPress.com .................................................................................................................... 1 WordPress ................................................................................................................................................. 1 WordPress.com ......................................................................................................................................... 2 Getting Started ............................................................................................................................................. 2 WordPress.com ......................................................................................................................................... 2 WordPress software.................................................................................................................................. 3 Logging In .................................................................................................................................................. 3 Dashboard .................................................................................................................................................... 4 WP.com Dashboard .................................................................................................................................. 4 WP Dashboard .......................................................................................................................................... 5 Making Pages and Posts ............................................................................................................................... 5 Media ........................................................................................................................................................ 6 Plugins........................................................................................................................................................... 6 Examples of Plugins .................................................................................................................................. 7 Installing Plugins ....................................................................................................................................... 7 Customization............................................................................................................................................... 8 Widgets ..................................................................................................................................................... 8 Menus ....................................................................................................................................................... 9 Managing Users ............................................................................................................................................ 9 Importing and Exporting Data ................................................................................................................... 10 Conclusion .................................................................................................................................................. 10 Credits and Attributions ............................................................................................................................. 11 Table of Figures .......................................................................................................................................... 12

Transcript of How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf ·...

Page 1: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

How to Use WordPress Introduction .................................................................................................................................................. 1

When to Use WordPress .............................................................................................................................. 1

WordPress vs. WordPress.com .................................................................................................................... 1

WordPress ................................................................................................................................................. 1

WordPress.com ......................................................................................................................................... 2

Getting Started ............................................................................................................................................. 2

WordPress.com ......................................................................................................................................... 2

WordPress software.................................................................................................................................. 3

Logging In .................................................................................................................................................. 3

Dashboard .................................................................................................................................................... 4

WP.com Dashboard .................................................................................................................................. 4

WP Dashboard .......................................................................................................................................... 5

Making Pages and Posts ............................................................................................................................... 5

Media ........................................................................................................................................................ 6

Plugins ........................................................................................................................................................... 6

Examples of Plugins .................................................................................................................................. 7

Installing Plugins ....................................................................................................................................... 7

Customization ............................................................................................................................................... 8

Widgets ..................................................................................................................................................... 8

Menus ....................................................................................................................................................... 9

Managing Users ............................................................................................................................................ 9

Importing and Exporting Data ................................................................................................................... 10

Conclusion .................................................................................................................................................. 10

Credits and Attributions ............................................................................................................................. 11

Table of Figures .......................................................................................................................................... 12

Page 2: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

1

Introduction This is a How To document is for novice/beginning web developers who are creating a website project either for themselves or tasked to create one by a client and are planning to use a simple client such as WordPress. It assumes a basic knowledge of web development knowledge, including coding and scripting in basic languages. The user should be all caught up on HTML, CSS, JavaScript, and other common languages, enough to be trusted to handle an independent web project. Depending on your options, further knowledge in using FTP and MySQL may also be required.

This document covers a basic run-through of installing and implementing WordPress for websites and the essentials of using it to enhance your web design. Topics covered in this document include: when to use WordPress, the differences between WordPress vs. WordPress.com, the installation process, navigating your dashboard, making posts, installing plugins, customizing your layout, and managing data.

When to Use WordPress Before going farther with this document, make absolutely certain that WordPress is what your project truly needs. WordPress, be it the software or the actual hosting network, is a tool for novice project developers who need to enhance the design of their website. If you’re an advanced enough programmer/designer, you shouldn’t need to use WordPress at all, and depending on who your employer or client is, they might question your use of it.

WordPress has many plugins and features that even an advanced developer finds useful from time to time however, so don’t be too hesitant to install it if you need such a feature for your website. Overall, WordPress is a fantastic tool for beginning web developers who need a push in the right direction. This document is written to take you through all the steps for installation under the assumption that you’re in need of WordPress’s entire services.

WordPress vs. WordPress.com Once you’ve locked down that you definitely want WordPress for your website, the next thing to figure out is how exactly you want WordPress implemented. WordPress comes in two forms: the WordPress open-source software downloadable from the main website, and the hosting service WordPress.com. The two platforms function similarly but have distinct differences that are key to understanding which one is appropriate for the needs of yourself and your website.

WordPress Installing WordPress as a software integrates its UI into your website on the front-end. It comes in a software package that you download and then insert into the public_html folder of your web server. Inside comes all of the assets that make up your admin panel, content storage, and every configuration file important to running your site on WordPress.

Everything about your website stays the same, including the domain. You have to manually type in WordPress’s login prompt to access all of your controls, which become embedded into the code of the website (but will not alter anything until you directly configure objects). It is important to know how to use both FTP and MySQL before using the WordPress software.

Page 3: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

2

The most important aspect of featuring WordPress this way is that there’s no purchase required for basic features, and any first-party and third-party WordPress plugins without a price tag can be easily downloaded and uploaded through the admin panel to become part of your website without any need for upgrading your software (however, some plugins and features may still require an upgrade to access more advanced options).

WordPress.com By creating a website through WordPress.com, all of the necessary website configurations will be made automatically without you having to upload and insert files server-side. You will gain access to a more expanded, but still limited, amount of WordPress’s features by letting it install for free, and will gain access to a wider support community.

This option is really only viable If you haven’t already started your website, since you’ll mostly be starting it from scratch this way. You will also likely have to pay a premium subscription to have WordPress this way, since features like being able to have your own domain name and installing plugins are locked behind a paywall.

However, the full list of features available under a subscription are most advanced than with the WordPress software package, and WordPress will take care of plugin installs, security features, and server-side configuration by itself without you having to do most of these things manually. Therefore, this hosting method is ideal for the developer who doesn’t want to deal with back-end configurations and is willing to spend the money for an expanded sandbox of options.

Getting Started Once you’re comfortable with which direction you want to go, follow the instructions for your respective installation type below.

WordPress.com Getting set up with WordPress.com starts with, as you might have guessed, visiting www.wordpress.com itself. Luckily, WordPress has a built-in user guide to take you through the journey of making a website with their company.

Begin by making an account with WordPress. You will create an admin username and password for yourself, specify the domain name of your website, and provide payment details if you decide to select a payment plan. Your options include:

Free – Basic design options, a limited storage space, a small pool of themes to choose from, and an admin panel with basic website tools.

Personal ($4*) – Create your own personalized domain name. Receive live chat support, choose from a multitude of free themes and design options, remove ads from your site, and gain access to Jetshark, a tool that aids your website’s speed performance and spam protections.

Page 4: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

3

Premium ($8*) – All benefits included in the Personal plan, as well as more advanced customization options, an unlimited variety of themes, larger storage space, a built-in video editor, and the ability to monetize your website.

Business ($25*) – All benefits listed above, as well as completely unlimited storage space, the ability to install any first and third-party plugins, opportunities to attend live creator courses, and the option to remove WordPress’s branding from your site completely.

* Per month, billed annually

Once you’ve gone through the sign-up process, you will be taken to a blank screen constituting your very first page, with the admin panel ready for you to go!

WordPress software If you’re opting to integrate WordPress into an already-existing website, then download the WordPress open-source software from www.wordpress.org and follow the detailed instructions at for further help.

1. Download and unzip the WordPress package from www.wordpress.org. 2. Create a database for WordPress on your server, and make sure you or one of your team

members has MySQL privileges to access, edit, update, and delete data. 3. Use an FTP client to transfer the WordPress folder into either the root directory of your web

server for easy installation, or create a “blog” directory and move the files there. 4. Start up the WordPress installation (which will generate an admin username and password and

install your admin controls into the domain) by either: a. Typing in your domain URL directly, if you placed the software package in your root

directory. b. Going to http://www.yoursite.url/blog if you created a “blog” directory for your files.

You can go to https://codex.wordpress.org/Installing_WordPress for more detailed instructions on installing the package, including some optional but potentially necessary steps such as alternate installation locations and setting up your config file.

Logging In Once WordPress has been installed and set up for your website, you should be able to access the login prompt by typing /wp-admin in your URL after your domain name (e.g. www.yoursite.url/wp-admin).

Logging into the website as the administrator (which you set up during the installation) allows you to access the Dashboard with admin controls, which differs depending on how you integrated WordPress.

Figure 1 - wp-admin Login Screen

Page 5: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

4

Dashboard Now that you’ve logged into your website using your WordPress account, you should have access to all of your WordPress tools, conveniently sorted into a taskbar on the top of the screen, opening a dashboard to the left of it.

WP.com Dashboard

Pictured is the Dashboard that appears when you’re running your website on WordPress’s domain. Pricing plan does not affect what you see here, as options that are not available on your current plan will still appear but pull up a prompt informing you to upgrade.

The Stats page lets you track all of the traffic, activity, content, and performance statistics of your website, with more detailed variables depending on your current plan.

The Activity page, available only on Personal plan and up, shows you a feed of everything your fellow website members (see Roles) have contributed recently.

You can manage your site pages and blog posts (see Pages and Posts) through this tool, as well as media, feedback, and your plugins. You can also Import content from other hosting sites such as Blogger, Squarespace, or a different WordPress site.

Finally, you can configure your sharing options (where you can set your posts to be shared through social media profiles), fellow users, other domains you can integrate into the site, and the rest of your website settings.

On a WordPress.com domain, these Settings are where you go to edit site properties (title, icon, time zone, etc.), search engine preferences, feedback, traffic, and content modification.

Figure 2 - WordPress.com Dashboard

Page 6: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

5

WP Dashboard This is the admin panel for when you’re using a website with WordPress software integration. The toolbar at top is always accessible as long as you’re logged in as an administrator. It displays your updates, comments, and the ability to add a new post, page, media, or user, open the customization options (see Customization), and edit the page you’re currently on.

Figure 3 - WordPress toolbar

On the dashboard, you can manage your posts and pages (see Posts and Pages), media, comments, plugins, users, and appearance (selecting a theme for your website and adjusting colors).

The Tools tab allows you to import and export data between websites and content from another website (see Importing and Exporting Data).

Settings allows you to edit site properties that can be altered through WP’s code, such as the site title and time zone data, writing permissions, display options, permalinks, media upload sizes, and the ability to set your Privacy Policy page.

Figure 4 - WordPress Dashboard

Making Pages and Posts Your main method of content creation on WordPress is by using its page and post creation tools. Generally, you want to make a specific Page for any content that’s non-malleable and meant to be just displayed rather than interacted with. Posts should be used for personal content such as blog updates or news articles. A Post will generally display an author and allow passing users and visitors to make comments dependent on your feedback settings.

By default, your text editor for posts and pages (see Fig on next page) displays content in Visual mode. Any formatting changes you make or any media inserted is automatically previewed in real-time, similar to using the application Adobe Dreamweaver.

You can select the “Text” tab to switch to displaying your content in HTML format, for more advanced coding inserts and the ability to make CSS style adjustments. Any page and post you create in this editor is saved on your server as a PHP file.

Page 7: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

6

Figure 5 - WP.com and WP text editors

To the right of the text editor, you have various settings available depending on which version of WP you’re using and what type of page you’re creating. You can choose publishing options and set a parent page as well as a featured image to be displayed at the center of your page.

Publishing a page/post means it will go live on the website after you hit the “Publish” button. You can set your page/post to publish immediately or schedule it for a specific day and time. You can also set its visibility when it goes live to be:

Public – Anyone who visits the page can see it.

Password protected – Configure a password that anyone who accesses the page needs to enter in order to see the content inside.

Private – Only users with certain roles can see the page. Non-logged in visitors cannot see it at all.

Media

Media uploaded in WordPress is saved into a digital library on the admin side. WordPress supports most picture, video, and audio types.

When uploading a photo, you can choose what size to display it at as well as whether the image contains a hyperlink. Video files can be set to autoplay and loop. Certain types of video files may only play with a certain plugin installed, however. Videos from video sharing sites like YouTube and Dailymotion can be embedded into your website as well.

Once a media file has been uploaded to your library, it can be accessed and inserted into any page at any time. You can use the library tools to create a media gallery.

Plugins WordPress boasts an abundance of special first-party and third-party developed plugins to expand your web experience. They can do an amazing array of features like enhance your speed performance and traffic, check your comments for spam, build automated survey and feedback forms, integrate new security measures, and even apply new visual editor interfaces.

Ultimately, how much you want plugins as a part of your website may be vital in determining whether you choose WordPress or WordPress.com for your services. On WordPress.com, plugins are a premium

Page 8: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

7

feature only available on higher payment plans. Through the WordPress software, many plugins can be installed for free but may require some interaction on the server end.

Examples of Plugins

Akismet Anti-Spam – Reviews every comment or piece of feedback with its spam database to protect you from malicious users.

Jetpack – Helps you manage your search engine optimization, performance, and traffic across the webspace.

Form Builder – A custom form editor that gives you many options in creating forms, determining submission data, and generating feedback.

WordPress Importer – An essential tool for importing data from WordPress export files.

WP-Optimize – Clean up databases easily with zero manually-written queries.

Instagram Feed – Display responsive feeds from a selected Instagram account.

WP Maintenance Mode – Create a custom splash page to inform your users when your website is down for maintenance.

Installing Plugins Every plugin has its own page on WordPress with tabs for its description of use, reviews from users, installation guide, and even a link to a support forum.

On WordPress.com, plugins can be installed either directly through your dashboard or by using the WordPress Plugin Directory. You can only manage plugins through WP.com on a Business level payment plan. Before installing a plugin, you should always make sure that it’s compatible with your version number of WordPress.

Through the WordPress software, any first and third-party plugins listed as free can be installed directly. Many of them can be installed with the click of a button. However, you also have the option to download the files and upload them through the server:

1. Download the ZIP for the plugin files through its download page. 2. Extract the folder within. 3. Open an FTP client and access your web server. 4. Find the folder “wp-content” inside your WordPress folder. 5. Upload the folder containing your plugin files into the “plugins” folder. 6. Return to your WordPress dashboard and navigate to your “Installed Plugins”. Activate the

plugin you just uploaded.

Each plugin has its own specialized controls, and some even add their own buttons to your Dashboard or text editor for easy access.

Page 9: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

8

Customization WordPress has customization tools that allow you to alter the website’s appearance, specifically by setting properties that remain consistent no matter what page of the site you’re on. In WP.com, this appears as the “Customize” option in your Dashboard. On WP, it shows up as “Customize” on your toolbar and “Appearance” on your dashboard.

Figure 6 – Gallery of selectable themes

One of the options you have through this feature is to set a universal theme over your website. This theme will grant you a preset background with a preset color scheme, font structure, and various layout mechanics across every page of the website.

This is where you set up widgets and menu creators for static properties, namely your sidebars, footer, and whatever dropdown menus you desire.

You can also use the Customization tool to set up specific header and background properties, place custom widgets, and lay out menu navigation for your website.

Widgets

There is a multitude of widgets available in WordPress for your use. Widgets are pieces of content that can be added to the sides of your webpage. You have Widgets available to add to top and bottom of the site (in-between the content of the page and the footer/header), to the sidebar, and to the footer.

The option to add Widgets appears wherever your Customization menu is located. You can drag and drop items straight from your Widgets menu into the different bars representing parts of the webpage.

For example, you can add a textbox to the Footer Widget middle, and then a search bar to the Footer Widget right, and finally add a Calendar widget into the Sidebar. Then when your website is live, there will be a text blurb and search bar at the bottom of every page, and a Calendar to the right.

Page 10: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

9

Menus

Through the Customization feature, making a dropdown menu for your website is extremely simple. WordPress uses a drag-and-drop system, similar to the widgets, and has menu options that allow you to easily set menu items and what you want them to link to.

They can be set to either a page or a custom URL. And you can go into Customization at any time to rearrange objects by dragging-and-dropping, edit and delete any menu items, and select where you want the menu to be placed on your website.

Figure 7 - Menu creator

Managing Users Other individuals can be registered into your WordPress site as users with their own log-in information. Please note that having a WordPress.com login is not viable to log in to a WordPress site; you have to have your own individual login created.

In order for other users to join the site, a user in an administrator role needs to invite them. In your “Users” setting, you select “Add User”. Input an email address and a username; make sure your user is comfortable with their username, because it cannot be changed later.

You also have to select the user’s ‘Role’. Their role is dependent on what purpose you’re making them a user for, and particularly what privileges you want them to have.

The roles you can assign are as follows:

Administrator – Administrators have every WordPress control and feature available to them. They are the only ones who can modify themes, add and change users’ roles, manage plugins and widgets, and completely control the content. Anyone with an administrator role will have all the same powers as the webmaster, so only assign this role to people who you trust to help you run the site.

Editor – Users with the Editor role have most of the same control as administrators when it comes to creating, modifying, and accessing all of the content on the site. They have full access to the text editor and moderating comments. What they cannot do is change settings and manage utilities such as plugins and themes.

Author – Authors can publish, edit, and delete their own posts, however they cannot edit posts made by anybody else and have the same limitations as the editors. They can moderate comments on their own posts and upload their own images to the media library. This role would be ideal for users who will be running their own section of the website independent from everyone else.

Contributor – Contributors can create and edit their own posts similar to contributors, but they cannot publish any content. Any posts made by a Contributor have to be reviewed and

Page 11: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

10

approved by users in an Administrator or Editor role. They also cannot access the media library or moderate comments, necessitating a higher user’s role in those fields as well. This role would be ideal for guest users who will not be writing for the site often.

Subscriber – The most basic of user roles, a subscriber can view any posts that are made public, read and post comments, and create and edit their own WordPress profile through your site. They have no other permissions on the site, and thus cannot create content of their own or edit settings. Any new user registered to your site will be made a Subscriber by default, unless you choose a different role.

If you’d like to allow users to register to the site themselves without administrator input, you can go to the “General” tab in Settings and check the box that says “Anyone can register”, which will add the option to your front page. By default, any new user who registers through this channel becomes a Subscriber. You can set a new default role in the same part of the Settings, but ideally you would want anyone who registers as a user on their own merit to be as restricted in your website as you feel comfortable.

Importing and Exporting Data WordPress has importing and exporting options available for sending data between two websites. WordPress can import and export with other sites that run on WordPress as well as sites through other hosts such as Blogger, LiveJournal, RSS, and Tumblr. On WP, the “Import” option appears on your Dashboard and the “Export Data” option is available in your Settings. On WP.com, “Import” and “Export" are both listed in your Tools.

If you’d like to import posts and comments from another site, go to “Import” and select which hosting service the site you’re importing data from uses. Do note that if you’re using WP, you may have to install a plugin to communicate with a specific host. And on WP.com, some of your importing options may be restricted based on your payment plan.

On both versions of WP, you can export all of your website data into an XML file to be imported int another site. On the “Export” screen, you have the option to either export all content at once, or to pick and choose by variables such as category, author, etc.

Conclusion This document should have covered all the basics to get you started in WordPress. Once you’ve made yourself comfortable, then there are even more advanced features, plugins, and options to explore. WordPress only goes as far as you can make it, and though it isn’t always considered the optimal web development option in the field, it’s a great place for new and budding web designers to get their feet wet in modern, responsive web design. Hopefully, you now have the confidence to go out there and make something special!

Page 12: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

11

Credits and Attributions This document was created by Douglas Huber.

Most of the information gathered for this document was obtained through the very helpful installation guides and documentation boasted through WordPress.com and WordPress.org. The Alfred State IT Website, which runs on WordPress itself, was used for visual references.

WordPress Plugins Directory

https://wordpress.org/plugins/

Explanation on User Roles

https://thethemefoundry.com/blog/wordpress-user-roles/

Great resources for learning WordPress:

WordPress Learn

https://learn.wordpress.com/

Udemy – WordPress for Beginners

https://www.udemy.com/wordpress-for-beginners-course/

Page 13: How to Use WordPress - Alfred State Collegeit.alfredstate.edu/.../01/WordPress-Documentation.pdf · How to Use WordPress ... The user should be all caught up on HTML, CSS, JavaScript,

12

Table of Figures Figure 1 - wp-admin Login Screen ................................................................................................................ 3

Figure 2 - WordPress.com Dashboard .......................................................................................................... 4

Figure 3 - WordPress toolbar ........................................................................................................................ 5

Figure 4 - WordPress Dashboard .................................................................................................................. 5

Figure 5 - WP.com and WP text editors ........................................................................................................ 6

Figure 6 – Gallery of selectable themes ........................................................................................................ 8

Figure 7 - Menu creator ................................................................................................................................ 9