WordPress 4.9

A few nice new features in this release.

All of our WordPress installations here at TLTC have been upgraded to the latest version, 4.9. There’s a lot going on under the hood, but there are also a few new features that can make your site better.

Gallery Widget

Would you like to show an image gallery in your sidebar? It used to require a plugin with some tedious configuration. The new gallery widget makes it simple. Add the widget, give it a title, select your images and save.

 

Here’s the final result:

If you have the Simple Lightbox plugin enabled and set to work with widgets, you get this effect when your reader clicks on one of the images:

 

By the way, if you want to add a video to your sidebar, a Video Widget was added in the last update.

Improved Text Widget

It used to be complicated to add an image tag in your sidebar. But the improved text widget, besides adding support for some basic formatting, now offers an Add Media button so you can embed media in your sidebar just as you would in a regular post.

 

One perfect use is adding your school or organization’s logo along with an address or contact information.

Better Customizer

One problem with previewing themes with the customizer has always been that it doesn’t pick up your widgets and menus. Unless you were lucky, it would show every single page as a running multi-line menu, making it impossible to see what your site was going to look like without re-building it; and the only widgets it would show would be the default most-recent posts and comments. I doubt it will ever be a perfect experience, but the customizer has been upgraded to at least give it a best guess as to where all your carefully crafted content is supposed to go. Here’s a case where it guessed pretty well, going from Divi to Accelerate:

 

There are a couple of other tweaks to the customizer that should make it easier to build menus.

New Plugins To Help Your Writing

Pullquotes, footnotes and help with accessibility.

Posts are always more engaging — and readable — when there’s some visual variety to the page. Embedded images are a popular way, but even things like bulleted or numbered lists can break up the monotony of large blocks of text.

Perfect Pullquotes

In the magazine publishing world, pullquotes are popular. Those embedded bits of text “pulled” from the story and set off in a block by themselves. A plugin we’ve recently installed, Perfect Pullquotes, makes it very simple to add these to your longer pieces of writing.

To use it, just head over to your blog’s Plugins page, look for Perfect Pullquotes, and activate it. From there, it’s as simple as embedded the text you want “pulled” into an easy shortcode block, like this:
[perfectpullquote align="left"]This is the text in the left margin[/perfectpullquote]
This square-bracket construction is called a “shortcode” in WordPress verbiage. For the pullquote, there is just one required attribute, the “align” attribute. It can either equal left, as above, right or center. Other optional attributes are size, as in size="32" if you want the text to be 32 pixels in height. You can set a colored border using color="#ff0000" — using the hex value of a color (in this case, bright red). You can explore hex colors here. Just remember to prefix them with the “#” sign.

Pro Tip: Seton Hall’s official blue is #004488

If your quote is a citation, you can use the optional attribute for “cite,” and another for “link.”

Putting it altogether, a right-aligned pullquote with a blue border around it, attributed to Jane Doe and linking her name to example.com, looks like this:
[perfectpullquote align ="right" cite="Jane Doe" link="http://example.com" color="#004488"]This is Jane's quote.[/perfectpullquote]

The fonts used will depend on your theme, but you can override them with CSS. Add another optional attribute for class and add CSS through your theme customizer.

Easy Footnotes

Of course in academic writing you’re going to want to footnote things. But the HTML formatting of links, reverse links, fonts and styles is a headache. To put it mildly. Just activate the Easy Footnotes to make the task of writing a little bit more simple.

This is really simple. Just put a shortcode into your text at the point you want it to appear:

[note]This is the text of the footnote[/note]

You can embed as many of these as you want in your text. The plugin will automatically generate a numbered link at that point, a corresponding numbered footnote at the bottom, along with a link that takes you back to that point in the text to continue reading where you left off.

What’s especially nice is that if you need to insert additional footnotes in the middle of your text, the plugin handles all the re-numbering automatically.

Accessibility

We’re all talking about accessible web sites now — the ADA requires it for many kinds of organizations. We’ve made WP Accessibility and WP Accessibility Helper available to aid you through the process.

To really make your blog and pages accessible takes some discipline. You need to make sure that your images are properly tagged for one, and all these plugins will do is remind you. But it makes a host of other options available to aid the visually impaired, such as making sure contrast is good, that fonts can be adjusted, that screen readers can handle the structure of the page, add helpful links (like “read more”) where they’re absent, and a lot more. Read the description and usage pages for each to see what it can do for you. It won’t get you a 100% score, but it will help.

WordPress 4.8

The new Video, Audio, Image and Text widgets make things really easy. I don’t know why they didn’t think of them sooner!

We’ve updated to the newest version of WordPress today, and among the fixes and new features is one that’s especially useful: A new group of Widgets.

It used to be that if you wanted to add audio or video to a sidebar widget you needed a plugin. Or if you wanted to add an image you needed to upload the image and write the img tag into a text widget. Or if you wanted a text widget with formatting you had to write in the HTML tags yourself.

The new Video, Audio, Image and Text widgets clear all of that up and make it really easy. I don’t know why they didn’t think of it sooner!

How To Add A Contact Form To Your Blog

One of the most common things that people want on their web site or blog is a contact form. We’ve got a few tools here that make it easy to build and deploy one.
It might be tempting to try and buil…

One of the most common things that people want on their web site or blog is a contact form. We’ve got a few tools here that make it easy to build and deploy one.

It might be tempting to try and build one on your own, but by using this plugin you get additional features like spam protection, and it spares you writing HTML code. For most purposes, what we’ll show here is going to work perfectly.

Go to “Contact::Add New” and let’s start a new form. This will follow the creation of a form we are setting up on the Language Maps, Language Clouds blog here at blogs.shu.edu.

Start by giving it a name. This is going to be called “Contribute To Our Research.” The new form comes with some pre-supplied standard fields that you can use (or not), just like the earlier sample.

We want to keep Name and Email. And definitely the “Send” button. But we’ll get rid of everything else. Now let’s create some new fields, using the built-in tools.

<label> Your Name (required)
 [text* your-name] </label>

<label> Your Email (required)
 [email* your-email] </label>

[submit "Send"]

Contact Form 7

Contact Form 7 is a very popular plugin, with over a million installations on WordPress blogs worldwide. It’s well-documented and well-supported, with regular updates. There are also some free extensions that led you add functionality like a date picker or a signature field. And another extension which we’ll explain below lets you store form results to a database, and then display them on a page.

Start by going to your dashboard, and under “Plugins” find and activate Contact Form 7. You’ll see a new entry in your sidebar for “Contact.” When you hover over it, you’ll get choices for “Contact Forms” (which includes the built-in demo form), “Add New” and “Integration.” We won’t worry about that last one.

Once you’ve activated it, take a look at the included demo form in “Contact::Contact Forms.” You’ll see something named “Contact-Form-1,” and you should click on the edit link to see the code to the right:

<p>Your Name (required)<br />
 [text* your-name] </p>

<p>Your Email (required)<br />
 [email* your-email] </p>

<p>Subject<br />
 [text your-subject] </p>

<p>Your Message<br />
 [textarea your-message] </p>

<p>[submit "Send"]</p>

You can see the usual types of HTML tags. But there are also those sections within square brackets. WordPress calls these “shortcodes.” Different plugins make different shortcodes available, and when the engine finds them it translates them automatically into the required HTML, in this case for form fields. The first word is the type of input. It can be text, or checkboxes or whatever. The second is the name of the field. That’s important later on, when you put together the messages that will go out when a user submits your form. And finally the asterisk makes that field a required field — the user can’t submit the form without filling it in.

This seems complicated, and it is. However, the dashboard lets you build the code you need without actually have to type it in.

Make A New Form

Go to “Contact::Add New” and let’s start a new form. This will follow the creation of a form we are setting up on the Language Maps, Language Clouds blog here at blogs.shu.edu.

Start by giving it a name. This is going to be called “Contribute To Our Research.” The new form comes with some pre-supplied standard fields that you can use (or not), just like the earlier sample.

We want to keep Name and Email. And definitely the “Send” button. But we’ll get rid of everything else. Now let’s create some new fields, using the built-in tools.



			
<label> Your Name (required) 
     [text* your-name] </label> 

<label> Your Email (required) 
     [email* your-email] </label> 

[submit "Send"]

Cut To The Chase?

If this is all you need, just copy the shortcode that appears at the top of the form and paste it into a page or post and you’re done. See the section below on “OK Great I’ve Got My Form.” If you need more, read on…

Text Input

This is the simplest. Just pick the “Text” button, give the field a name. The other settings are optional. If you decide later to make a field mandatory, just put an asterisk next to “text” in the generated code.

What do the email (and other) buttons do?

If you pick Email, URL, tel or number, it sets the system to do validation to make sure that the user actually enters a proper Email address, URL, telephone or number. An error is displayed if not. The Date button creates a calendar-style date picker, which can be very helpful if you’re collating your responses later.

Dropdown Menu

For example if you want to create a dropdown, here’s how you do it.

First, make a space in your page for it. Following the style that the rest of the form is using, that would just be an empty paragraph:

<p>
</p>

Plant your cursor right after the opening tag, then click the button for “Drop-Down Menu.” You’ll get a popup window where you can build out the details of your dropdown menu.

Here are your basic options. First, you can indicate whether to make this a required field. We’ll not do that right now. Then, give the field a name. Make it all letters, numbers and dashes — no spaces. Then your options, one per line. Notice you can let people who aren’t quite decided choose multiples, and you can also put a blank line first so that the first one isn’t selected accidentally. ID and Class attributes are optional, only worry about these if you’re going to go on and make some custom styling or coding.

As you build the form, the shortcode is also being built in the box near the bottom. Once you’ve got everything the way you want it, click the Insert Tag button. We’re going to use a list of languages. And we’ll have text entry box underneath, for the level of understanding you have of it. Note that I’ve made these required fields, since everyone should have at least one language.

Now your form has this:

<label> Your Name (required)
 [text* your-name] </label>

<label> Your Email (required)
 [email* your-email] </label>

<label> Village/Town/City of Residence
 [text your-residence] </label>

<label> Village/Town/City of Where You Grew Up
 [text your-origin] </label>

<label> Languages you speak, read, write, 
  understand or recognize
 [select* language-1 id:language1 include_blank 
     "English" "Spanish" "Italian" "French" 
     "Tagalog/Filipino" "Portuguese" 
     "Russian" "Chinese"] </label>

<label> What level of understanding do you have 
    for this language?
 [textarea* language1-ex 40x3 id:language1-ex] 
</label>

[submit "Send"]

(additional lines are added throughout for clarity)

Note: using “<label>” instead of “<p>” is the newer way to do forms. It’s not mandatory, though. But be sure to include to closing tag.

Then we can simply copy-and-paste the two selections, changing the “1” to “2” in the name of the field to keep them separate (indicated in red):

<label> A language you speak, read, write, understand or recognize
 [select* language-1 id:language1 
     include_blank "English" "Spanish" "Italian" "French" 
     "Tagalog/Filipino" "Portuguese" "Russian" "Chinese"] 
</label>

<label> What level of understanding do you have for this language?
 [textarea* language1-ex 40x3 id:language1-ex] </label>

<label> Another language you speak, read, write, understand or recognize
 [select* language-2 id:language2 
 include_blank "English" "Spanish" "Italian" "French" "Tagalog/Filipino" 
 "Portuguese" "Russian" "Chinese"] </label>

<label> What level of understanding do you have for this language?
 [textarea* language2-ex 40x3 id:language2-ex] </label>

Other Kinds of Input

Radio buttons and checkboxes work much the same as drop-downs. Experiment and see!

Putting Your Form Into Action

After you save your form (you did save your form, didn’t you?) you’ll get another shortcode at the top of the screen. It’ll look something like this:

[ contact-form-7 id="25" title="Contact form 1" ]

Create a new page or post, and paste it in. Be sure you’re in the text view! Then, preview your page/post and you should see your form:

completedform

and further down…

form-bottom

OK Great, I’ve Got My Form. Now What Happens To The Entries?

Excellent question and I’m glad you asked. This is the part where you go into the second tab, the “Mail” tab (right, top).

From the “Mail” tab, you’ll essentially construct an email message. You’ll see fields for the recipient, sender, subject line, and message body. You can send HTML email, and even include attachments. It even shows you the fields you’ve set up in the form — and you can double-click then drag and drop them into the body or headers of your message. They’ll appear in square brackets, and you can surround them with your own text so that the email message is clear. Right-bottom, here’s how you might set up your headers:

t

Angle Brackets

Using angle-brackets around an email address is a helpful convention to know. In the “From” section above, when I look in my inbox that column will show my name in plain text, but the email address is still there and usable.

And then this is the body:

Respondent 
Name: [your-name]
Respondent: [your-email]
Residence: [your-residence]
Place Of Origin: [your-origin]

Languages
First Language: [language-1]
First Language Proficiency: 
   [language1-ex]
Second Language (if applicable): 
   [language-2]
Second Language Proficiency: 
   [language2-ex]
Third Language (if applicable): 
   [language-3]
Third Language Proficiency: 
   [language3-ex]

Other Language (if applicable): 
   [language-other]
Other Language Proficiency: 
   [language-other-ex]

Source: [how-heard]
Other Source (if applicable): 
   [how-other-detail]

Project Code: [project-code]

Or code them in HTML, after checking the appropriate box. You can create a second email if you want, for use as a receipt to the original sender, for example.

Be sure to save your work!

Test It Out

You have to test it out, seriously. It’s amazing how many details can slip through, even if you’ve done it before. If you do have changes, you can just go back into the form edit screen, make your changes and save it.

I’m going to test my form right now. I’ll navigate to the new page I created (where I pasted in the form shortcode), and fill it out. Wait right there…

…OK, I’m back. It all came through fine with one exception — a missing linebreak. Here is the message I received:

Respondent
Name: Tom McGee
Respondent: my.email@gmail.com
Residence: South Orange, NJ
Place Of Origin: Cleveland, Ohio

Languages
First Language: English
First Language Proficiency: Native Speaker 
      Second Language (if applicable): Spanish 
      Second Language Proficiency: Took Spanish 1
Third Language (if applicable):
Third Language Proficiency:

Other Language (if applicable): German
Other Language Proficiency: 
   Enough, genug, whatever
Source: Professor or Teacher
Other Source (if applicable):

Project Code: n/a

As you can see, the “Second Language” block got smushed in. I’m not exactly sure, but I’ll go back into the “Mail” tab and correct it.

Securing Your Form

Spam is a constant problem, anywhere on the web where you’re asking for user input. Bots, Russian hackers, script kiddies and the like are constantly spreading their good word of cheap pharmaceuticals — using your web site as their billboard. And those are the good cases. In the bad cases, they try to inject code that will compromise your entire server.

And almost all of it is automated. The amount of time it would take to individually comment on blog posts or fill in forms by hand would be prohibitive to their business model, which is to blast as many sites as possible in the hopes that some of their message will get through.

The point being, don’t try to do it manually; there are experts on the job. As the spam arms race continues, more devious tactics are used to plant spam; and more clever tactics are devised to fight it. We’ve got a couple of good anti-spam plugins already activated that prevent almost all comment spam, and quite a bit of form-reply spam. But you can make your form even safer by using CAPTCHA technology. You’ve seen it frequently — one of those blocks where you check off the box to prove you’re not a robot. Here’s how to incorporate it into your form.

Back in the form editor…

You can click on the “reCAPTCHA” button, and it will warn you that you need an API key. This is pretty easy to get, just walk through the instructions on the link given. You’ll get two keys, a “site key” and a “secret key.” Copy-and-paste these somewhere for safekeeping, and then find “Integration” under the “Contact” menu in the left-hand column of your dashboard. You’ll simply paste these two keys into the appropriate spaces, and save.

Then go back into your form, put your cursor right above the code for the submit button and click the “reCAPTCHA” button again. Set a few options, and enter it into your form.

[recaptcha]

Save your form. It’s as simple as that.

 

Of course, go back into the page where you’ve placed your form and test it out. You should see this:

Storing Your Responses

If you’re doing research, collecting registrations for an event, or many other kinds of uses, you’re going to get to the point where you want to see it all at once, preferably in a spreadsheet. For this you use the Contact Form 7 DB plugin. Activate it, and immediately your form responses are stored. From there, you can export them as text or CSV files that you can open into Excel. In the near future you’ll also be able to expert Excel or Open Office format spreadsheets.

You can also set up pages to display your data publicly, using the shortcode sets that are provided. Just look at the Contact Form DB Shortcode screen, set your options, and copy-and-paste the shortcode into a page.

In Conclusion

That’s a lot. But remember, the basic contact form is set up already for you, all you’ve got to do is make sure that the right email address is set to receive the message. The rest? Just an added bonus. Thanks for reading!

Tip

If you want the results to be viewable without the hassle of exporting and importing text files, you can password-protect the results page.

Blog Password Problems?

We’ve noticed a spate of lost-password requests lately. There are a few things you should try if you’re having trouble remember yours.

We’ve noticed a spate of lost-password requests lately. There are a few things you should know.

The vast majority of user accounts here use your PirateNet credentials, the very same ones you use to log into Blackboard or Outlook. Just use that and you’re in.

If you have an account that does not use PirateNet, you’ll have to have access to the email account that was used when the account was set up. That wouldn’t be your @shu.edu account.

The password-reset link should work, but sometimes the responses are lost in spam folders or email blacklists.

If you’re really stuck, drop us a line and we’ll get you set up quickly.

Where Are My Pictures?

There might come a time when you’re authoring your blog that you notice something strange. Your post should look like this:
yes_image

But instead it looks like this:
no_image

There might come a time when you’re authoring your blog that you notice something strange. Your post should look like this:
yes_image

But instead it looks like this:
no_image

Instead of your photo, you just see the title of it.

The Mixed Content Feature

That’s not a bug, that’s a feature.

When you’re on the Web you’ve no doubt noticed that some sites are ‘https://’ instead of ‘http://’. That means that your connection with that page is encrypted, so that nobody can intercept your communications with the server. Such communications could include passwords, credit card numbers, and all manner of things you’d rather keep to yourself.

In an effort to make your browser — and by extension your entire computer — more secure, lately some browsers will not display or use any element of and https:// page that is fetched over simple http://. So if you have an image embedded as:

<img src="http://blogs.shu.edu/myblog/myimage.jpg" />

And try to display it on the https:// version of your page, it won’t be seen. Your clue lies in the padlock icon to the left of the address (in Firefox) or the shield icon at the far right (in Chrome).
insecure

When you’re working on one of the blogs, it might just be that you came into it by using the https: prefix instead of http:. Or, if you previewed it and it came up that way. In most cases, just change the URL to http: and you’re all set. The system isn’t going to let you do any administrative tasks in non-secure mode, but you can certainly browse the sites. Chances are, you’re the only one who sees it this way.

We Don’t Recommend This Anywhere Else

If you defeat the security you open the door to possibly malicious content, trackers, javascripts and more. So consider this just to be a simple way to get around the issue of your pages maybe looking wrong.

Best Themes of 2015

Here’s a nice rundown of wplift’s best themes of the year. They’re organized by category, so you can better match them to your type of blog. Let us know if there are any you’d like to try out!

Here’s a nice rundown of wplift’s best themes of the year. They’re organized by category, so you can better match them to your type of blog. I’d be happier if they’d actually proofread the blurbs supplied by the theme developers, but still the demos are nice.

Let us know if there are any you’d like to try out!

Updates, Updates, Updates

Along with the new WordPress 4.4, theme and plugin developers are swiftly moving to upgrade their products. 22 plugin updates and 11 theme updates in the last two days alone.

Along with the new WordPress 4.4, theme and plugin developers are swiftly moving to upgrade their products. 22 plugin updates and 11 theme updates in the last two days alone. You shouldn’t notice any changes at this point.

One plugin, “Subscribe By Email”, was causing problems for people trying to sign up. If you were using it and weren’t getting any new subscribers, that’s why. We’ve transitioned all those blogs over to “Email Subscribers,” which is considerably more robust (meaning: it actually works). If you’ve got an active blog and think your audience might want to hear from you, consider activating it. It’s a simple matter of going into Plugins in your dashboard and activating it, then adding the widget.

A Really Big Guide to Finding Images for Your Blog

This page (http://www.blogtyrant.com/how-to-find-imagess-for-your-blog/) is a nice resource on using images on your site. There are suggestions for file formats and sizes, plugins to use, branding considerations, copyright and where to find royalty-free or public domain images that are ready to use.

This is a nice resource on using images on your site. There are suggestions for file formats and sizes, plugins to use, branding considerations, copyright and where to find royalty-free or public domain images that are ready to use.

The section on copyright law is a must-read.

Each photo could be different, each photographer is different, and the consequences of getting it wrong can be bad.

It basically seems works like this in most places around the world: when a photo is taken the person who took the photo owns the copyright to that photo. There are some exceptions (like journalistic photographers who are employed) but mainly it’s the gal or guy who took the shot that owns the rights.

That photographer can then grant licenses where other people can use that photo in certain circumstances and under certain conditions.

Adding images to your posts is a great idea. It makes a post more readable by breaking up big chunks of text, it adds visual appeal, and illustrates what you’re writing about. Setting a “Featured Post” is also important — a lot of themes for WordPress use these on the home page and category archive pages.

Coming Soon: WordPress 4.4

Released today, WordPress 4.4 is a big upgrade with some nice new features.

Version 4.4 of WordPress, named “Clifford” in honor of jazz trumpeter Clifford Brown, is available for download or update in your WordPress dashboard. New features in 4.4 make your site more connected and responsive. Clifford also introduces a new default theme, Twenty Sixteen.

There’s a lot going on under the hood, but what might be most interesting to us are the new oEmbed and responsive image features.

What’s oEmbed?

oEmbed is what lets you paste a URL into a line by itself to a resource on another site, and that resource is automagically rendered right on your post without having to deal with sometimes-cryptic embed or iframe tags. For example, I can paste “https://vimeo.com/86120207”, as below, on a line all by itself, and I get this:

Or just paste the URL of a Tweet, “https://twitter.com/bobdylan/status/672062682632028160”, like this:

Screenshot_1

Will render complete with its embedded media:

There’s a long list of providers that WordPress is compatible with, including YouTube, SoundCloud, Vimeo and now — WordPress itself. Just put the URL of a WordPress blog post on a line by itself, and the headline, featured image and excerpt will be displayed within your post.

Better Image Support

Also new to 4.4 is “responsive images.” WordPress will now resize the images you upload, automatically, so that they look right on any kind of device. Additional code is generated behind-the-scenes which lets your readers’ devices select from several different resolutions and download the one that is correct — a large image for a desktop browser or a smaller one for a mobile phone. This protects their monthly bandwidth allowance, and makes for faster load times.

We’ll be following this over the next week or so to check for stability and possible conflicts. Usually there are no issues.