Types of Wordpress installations

• Wordpress.com - Free but limited.  This is a limited version of Wordpress that is already installed and hosted through Wordpress.com's hosting platform. It comes with a few default plugins and widgets but you can't install new plugins and widgets.  The URL of this site will be a subdomain of wordpress.com but if you want a unique domain you can pay extra and purchase/map a domain through wordpress.com 
• Self-hosted Wordpress - This is a full-scale version of Wordpress that you can download and install on your host.  Many hosts have an option to install wordpress on their servers and some even offer Wordpress specific hosting packages.  The benefit of installing Wordpress is that you can install any plugin or widget but it puts the work on your to keep it updated and manage the install.
  

Hosting

Bluehost: the most commonly used hosting provider for Wordpress. You can also purchase your domains on Bluehost. Tips: 1. It would be cheaper to renew the hosting package once a year than once a month2. There are a lot of good deals for hosting and domain purchasing around Black Friday. We got our domain with 40% off discount!

Themes

Listify: a Yelp-like Wordpress theme. Not very customizable but has good-looking UI and detailed documentation.

Other Wordpress topics

• What to do with your Wordpress Site Crashes:  Lots of times this is due to a theme or plugin not be up-to-date or one of these are incompatible with each other.  The best thing to do if you can't log into the admin dashboard is FTP into the server on your host and navigate to your plugins folder where all plugins are installed.  Renaming this folder to something else (e.g. plugins-backup) will inactivate the plugins that are likely causing the site to crash.  You then should be able to log in the admin dashboard and update plugins and themes.  After this start with activating one plugin at a time (starting with most critical).  As you activate each plugin refresh and monitor the site.  If the website crashes again you may assume the latest activated plugin is the culprit.  At this point read documention or forums to find out if the theme or plugins are old and haven't been supported.  Also see if there are known incompatibilities.  You can either avoid that theme or plugin or ensure you have a compatible version.  Always feel free to call your hosting company to ask for their thoughts.
• When you can't find an existing plugin that will accomplish what you want, you can always make a custom plugin. Plugins are written in PHP. You can create a template plugin from this site to act as a boilerplate starting point: http://wppb.me/
• Uploading a new plugin to Mac - (may not apply to every wordpress, but read this guide for details) 
• Tip on editing themes - When editing the WordPress theme, best practices say to use a child’s theme. A child’s theme is a copy of the regular theme which helps protect the integrity of the parent theme. Changes are made to the child’s theme instead of the parent theme so that changes can be easily reverted if needed. More information can be found here.

General Tips 

• When using pre-built websites and plugins (like WordPress), it is extremely important to have a lot of detailed documentation on the ins and outs of the platform, as well as easy customization.  

• Don’t underestimate the complications that can arise from using a Platform like WordPress, a plugin was able to break our website.  

• Having a technical client can be a double-edged sword. Make sure to clarify if they are going to be making changes to the website along with your team and if so have clear communication of new changes so someone’s work doesn’t get deleted.  

• Daily standups are a helpful habit to get into, helps keep team members focused and accountable. 

Creating a Community Management Platform 

The following plugins for WordPress have been tested thoroughly; here are our reviews on them: 

• Ultimate Member:  

• • great for advanced registration fields and user search 

  • has great documentation 

• • easy to customize and build pages 

  • has multiple extensions for purchase 

• Users Ultra Pro:  

• • requires more knowledge of CSS to customize 

  • registration form customization 

• • the paid version has great functionality 

• BuddyPress:  

• • very confusing to customize 

  • look and feel of the plugin is not aesthetically pleasing 

• Membership by Supsystic:  

• • great free option if an advanced user search is not a requirement 

  • very clean UI 

  • easy to customize and build pages 

• Profile Grid: 

• • great free option if an advanced user search is not a requirement 

• • has great concepts for groups

Ning is a community building platform and advertises itself as great for creating social networks, however, it is fairly difficult to customize as there is no option to customize HTML and is lacking updated documentation.  

WordPress Shortcode API

WordPress Shortcode guide

Overview

The Shortcode API is a set of functions for creating shortcuts in WordPress to use in pages or posts. This API enables users to create special kinds of content (forms, quizzes, etc.). Shortcode’s API handles the technicalities behind parsing, getting rid of the need to use custom HTML or CSS. A major advantage about Shortcode is that you don’t need access to WordPress’s plugins library to use it. Since our team worked in an account tier that did not offer access to plugins, Shortcode was a very useful alternative to adding interactive features to our client’s site.

The following shortcode content tags are included with WordPress and can be readily used by default:

• [audio] - adds a feature to your page where you can embed and play back audio files
• [caption] - allows you to wrap captions around content
• [embed] - allows you to wrap embedded items within a maximum (but not fixed) width and height
• [gallery] - allows you to add one or more image galleries to your posts and pages
• [playlist] - allows you to show a collection of WordPress audio or video files in a post
• [video] - allows you to embed video files and play them back on your page
• [quiz] - allows you to have an interactive quiz on your page; At their most basic, you can pose a question and have multiple answers to choose from. The correct answer will turn green when it’s clicked on, and the incorrect answers will turn red when they’re clicked on.
• [forms] - You can use widgets and shortcodes to display contact form in your theme. Unlimited number of dynamic fields can be created for contact forms.

Formal Syntax

Shortcodes use square braces (‘[…]’) and keywords to embed certain features on a page/post. Take the gallery shortcode for example:

[gallery]

The gallery shortcode is parsed by the API as a special symbol because it is a registered shortcode. On the other hand, square braces are simply ignored when a shortcode is not registered:

[randomcontent]

The randomcontent text and its square braces are ignored because they are not part of any registered shortcode. You must use a keyword from WordPress’s Shortcode library (listed in “Overview” above) for it to work.

Tags must be enclosed with brackets: [ Example_Tag ] to be recognized as Shortcode.

Nesting Shortcode:

[tag-a]

CONTENT

      [tag-b]

      CONTENT

      [/tag-b]

[/tab-a]

Output

A list of tags can be found on the WordPress documentation and will result in different content. Shortcodes are parsed after “wpautop” and “wptexturize” post formatting has been applied. This means that your shortcode output HTML will not automatically have curly quotes applied.

How to make a quiz in Shortcode

For our project, we used Shortcode to create an interactive quiz feature on the client’s website.

Here are the steps to do so:

1. Go to www.wordpress.com
2. Log in as an administrator and go to the page you want to edit.
3. Once in the correct page and in edit mode, click to add a “block” and search for the “shortcode” block. Adding this block will create the production environment to type out code.

4. Begin writing the code you would like to implement in the Shortcode environment you just created. Remember, WordPress shortcode uses braces (‘[...]’) and tags specific to the API.

5. To create a quiz, start with the opening [quiz] tag and end the block with the closing [/quiz] tag:

[quiz]

            quiz content goes here

[/quiz]

 6. After the opening quiz tag add a [question] tag and write the text you want your question to contain. Once you’ve written your question, close with the closing [/question] tag.

[quiz]

              [question]

                your question goes here

               [/question]

[/quiz]

 7. To create an incorrect answer choice, write the opening [wrong] tag followed by the answer choice text and the [/wrong] closing tag.

[quiz]

                [question]

                your question goes here

               [/question]

               [wrong]the wrong answer choice goes here

                 [/wrong]

[/quiz]

Note, for all answer choices in shortcode, you need to put your text directly after their opening tag with no spaces in between the text and opening tag. This ensures that the answer choice will be appear in the order you write your shortcode. If you add any spaces between the tag and the text, the quiz will not keep that answer choice in the same order you wrote it. WordPress Shortcode arranges the answer choices to place the correct answer as the first choice by default. This isn’t a good idea from a UX perspective.

8. When writing the correct answer to a question, use the tags [answer] and [/answer]. Note, the same spacing principles apply to the correct answer choice, so add the text directly after the opening [answer] tag with no space in between.

[quiz]

               [question]

                your question goes here

               [/question]

               [wrong]the wrong answer choice goes here

               [/wrong]

               [answer]the correct answer choice goes here

                [/answer]

[/quiz]

9. Along with an answer choice you may want to add an explanation. This is text that will appear in response to the user clicking that answer choice (Ex. “Correct!” to let users know they chose the right choice). To add an explanation, open with the [explanation] tag and close with the [/explanation] tag. Place the explanation in between the answer choice text and the answer choice closing tag.

[quiz]

               [question]

                your question goes here

               [/question]

               [wrong] the wrong answer choice goes here

                 [explanation]

                  add an explanation or error message here

                  [/explanation]

                  [/wrong]

                  [answer]the correct answer choice goes here

                   [explanation]

                  add an explanation or congratulations here

                  [/explanation]

                  [/answer]

[/quiz]

*Remember to close your quiz with the [/quiz] closing tag!

Sample Code

We created an example quiz you can use as a starting point for your shortcode. Check out the sample code below:

[quiz]

                [question]

                Why did the chicken cross the road?

               [/question]

                  [wrong]Because her 374 client asked her to

                  [explanation]

                  Try again!

                  [/explanation]

                  [/wrong]

                  [wrong]To get to the other side

                  [explanation]

                  Try again!

                  [/explanation]

                  [/wrong]

                  [answer]To be at a safe social distance from her fellow hens

                  [explanation]

                  Correct!

                  [/explanation]

                  [/answer]

[/quiz]

Here is an image of the final product in a published WordPress page before the user selects any of the answer choices:

Here is an image of what appears after the user clicks each answer choice:

Try it out for yourself! Use the steps in this document or copy and paste our sample code into your WordPress page to create a quiz of your own.