In this example, I’ll show you how to add a new “Perspective” at debbieduncan.com.
Go to the Perspective’s URL in your browser, e.g. https://ww2.kqed.org/perspectives/2017/12/12/christmas-cards/
In another browser tab, log in to go to your WordPress admin and go to Posts. Hit the “Add New” button.
The add new post form appears. Make sure the Visual tab in the editor is in front. Fill in your title and text and check the category (KQED Perspectives). Fill in the date in the “publish” block upper right, which determines the ordering in the Perspectives widget.
Also fill in the Perspective’s date within the post text along with a link to the audio version:
- Start by copying the date and link from another Perspective.
- (Oops I got lost – edit/update needed!)
- Once you can see the old link (in that other Perspective), click anywhere within it, to make an edit link short form appear. Hit the little pencil to paste in the new Perspective link (from your other browser tab)
- Hit the link options icon to be sure the link will open in a new tab
- Hit the little blue “apply” arrow to save your link changes.
Hit publish to publish your Perspective.
Finally, check your work from the front end. If your Perspective is the newest one, it should appear first in the list. Make sure your audio version link goes to your intended page. Make any necessary corrections.
Optional: add tags to your post
Adding tags for SEO seems redundant in this case, as the title is already “Christmas Cards” – but as author you may have other meaningful words in mind.
Some websites may use the tags to find/show posts according to their tags. At such a website the purpose would guide you as to the words.
I figured how how to override an arbitrary file in a child theme. It is ALMOST as simple as placing the override file in the corresponding folder for the child theme. The step I didn’t know about, was to add a require_once() for the specific file in the child theme’s functions.php. Here is my example step by step:
My example is how to replace the font list in Customizr theme, with my own font list.
1) If I were to “hack” the parent theme to make this change, I’d change the file wp-content/themes/customizr/core/init-base.php
2) Make a copy of core/init-base.php, make your changes, and place it in the child theme’s folder: wp-content/themes/customizr-child/core/init-base.php. Note you must create a “core” folder in which to place init-base.php — you must replicate the full path of the overridden file (or whatever file you refer to in step 3).
3) Modify your child theme’s functions.php to include the overriding file, by adding the following line:
require_once( get_stylesheet_directory() . 'core/init-base.php' );
Why? According to the WordPress codex: https://codex.wordpress.org/Child_Themes, about half way down, see …
Referencing / Including Files in Your Child Theme
When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).
Here’s an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme’s directory structure.
require_once( get_stylesheet_directory() . '/my_included_file.php' );
In my case, I’ll add this line to my child theme’s functions.php:
require_once( get_stylesheet_directory() . 'core/init-base.php' );
4) Upload the new file and the modified functions.php to your web server, and the next time you access the font choices in the customizr, you’ll see your new font list.
I found a setting at Customizr, my favorite WordPress theme, which let you choose between “Flat (Classical) Design” and “Material (Modern) Design.” Maybe you have already heard of Flat Design, which means no 3D objects: no shadows, gradients, glow effects etc. I started my reading here:
At the top of this page are three examples of flat design that help us to “get it.” From my previous reading on flat design I had concluded that besides no 3-D, flat meant single page websites with no sidebars. “Flat” as in “no hierarchy.”
Users are so familiar with the web that they won’t need the cues provided by 3-D. Others blast flat design for being non-intuitive and trendy. I agree with the latter.
The Nielsen Group (we like Jakob Nielsen since way back) doesn’t like flat design either, mainly because it lacks signifiers on clickable elements. They say “Flat 2.0” may be a better alternative, aka “Material” design:
This article stated that now users are so familiar with the web that they won’t need the cues provided by 3-D. I disagree: I miss tooltips and I don’t like flat edges that make one window blend into another. Though wherever something can be done without, it makes for a cleaner design and one that fits better on a handheld.
The article continued with quotes from web designers saying that flat design aids cross device compability (responsive layout) and in fact led to usability improvements such as bigger input fields, larger buttons, or larger and more legible text. (I agree with those usability improvements, just don’t waste my space with GIANT text if I read your mobile-first page on my desktop.)
However the bottom third of the page is full of feedback blasting flat design as discrimating against the disabled and the elderly and in general wasting people’s time as they try to figure out the page. It’s fun reading, a lot of good rants in there, some of my favorites:
It gave me a sudden appreciation for the gradients, drop shadows, and other design elements I’d taken for granted in more traditional desktop UI – these are useful hints that aid accessibility that we’ve sacrificed because “flat looks cool”. To really judge good design I think you have to show it to users who have never seen it before. All UI is learned, so people will catch on eventually, but my own opinion is that good UI (and good design) should be intuitive – e.g. is that flat rectangle a button?! Hell if I know, guess I’ll click to find out.
Good design is about respect for a user’s time. Sure people can figure out how to wade through an interface with less than obvious cues, but how can you justify stealing even milliseconds from your users? Bad design sucks the life out of humanity and flat design sucks hard. It’s nothing more than wire framing with a little added color. It’s lazy at best and criminal at its worst. When I see plain text acting like a button I hear Christopher Guest’s voice telling me “I just stole one minute of your life, how do you feel?”
It’s like saying “we’re going to remove all signs in a metro station because passengers know it well and the corridors will look cleaner”.
Flat Design: Its Origins, Its Problems, and Why Flat 2.0 is Better for Users
The types of cues people use to determine clickability:
* Traditional, externally consistent signifiers (such as the blue, underlined text or raised buttons) – vs. flat “ghost” buttons.
* Something reminiscent of a traditional signifier (such as underlined text of any color or boxed text)
* Contextual clues (such as actionable text or placement at the top of the page) e.g. words on a menu bar
Flat-Design Best Practices
Use the clickability cues mentioned above.
As long as in-line text links are presented in a contrasting color, users will recognize their purpose, even without an underline. (I’ve been doing this for a long time. I often make the underlines appear on links only upon hover)
When Flat Designs Can Work: the potential negative consequences of weak signifiers are diminished when the site has a low information density (is this a good thing?), traditional or consistent layout, and places important interactive elements where they stand out from surrounding elements.
Next up (but not tonight): The Characteristics of Minimalism in Web Design. Looks like lots of good illustrations, may help me to reduce clutter in my designs.
And finally, I will finish up with: Flat Design vs. Material Design: What Makes Them Different?
What’s your web design philosophy? What WordPress themes or Joomla templates support this philosophy? Do you have a web page you’d like to show us and point out the main features that contribute to its usability?
An effective promotional post would include a sentence or two (call to action) and an image illustrating your message that linked to a spot to read more. But how to do that? Here’s the best I can find TODAY:
- Prepare your link, message, image, and start your post.
- Suggested image size is 560 pixels wide. It will be displayed at full post width, so set the height with that in mind.
- Write your message in its entirety, followed by your link and a space
- The space will trigger a “link preview” (see picture on right)
- The link preview appears to take text from the web page’s meta description tag, and let you cycle through a few images from the page. You can’t edit the meta description part of your post.
- If you don’t like any of the pictures or the meta description, you can remove one or both using the tiny faint “X” upper right. That leaves you with the text of your post and an option to UPLOAD a photo.
I don’t see a way to use a photo already existing at your Facebook account. So you must upload from your browser/PC.
- The only way to close the image window is to hit the blue “Post” button lower right.
To the left is the resulting post. My link goes to the URL shown, the photo goes to … not the link, but to some details about the photo.
To summarize, if the page you link to generates a Facebook link preview that you like, visitors may actually click through to your call to action page. If the page you link to doesn’t generate a suitable link, you can upload a photo that may draw visitors’ attention, but only the most dedicated visitor will seek out the tiny text of your URL and click it.
What is your experience creating Facebook posts with links?
I took my screenshots, and described my experience, using Facebook as of April 25, 2017. Have you noticed any improvements since then that you’d like to share?
Our chief Facebook poster at Santa Clara FireSafe Council taught me a communication method today, that I’ve shared with my budding Facebook team at Bicycle Exchange. She says it’s a way for Facebook to be a conduit to your own website. Or any link you want to promote. Maybe this technique will help you too.
Postscript: I believe the ideal link would be words or a picture that link to the action page. However Facebook will only let you post a “link preview” it builds from the page; or you must spell out the link and upload a photo from your browser/PC. The photo can only link to the Facebook photo comments panel. As described in my tutorial.
Our Facebook team at Bicycle Exchange has used this “conduit” technique to recruit more volunteer bicycle mechanics. For example, Ivan has created a post that links a photo to our website’s “Contact” page. Here’s the technique I learned:
1) Identify the action you want the person to take as a result of the post.
2) Identify the photo which describes the action, event, news or fact.
3) In a sentence or two describe the thing and summarize the action you want the reader to take.
4) Link the action words, or the photo (or both?) to … something.
5) The “something” in our case can be a page at the Bicycle Exchange website.
Here’s how to float an image left or right using JCE editor in Joomla, using your template’s custom styles.
1) Create your article in the JCE editor, and get it far enough along that you have your text and image added to the article. Put your image just ahead of the paragraph or list containing the text that’s to be floated alongside the image.
2) Click on your image, then click on the styles pull-down menu to open it. There are a bunch of styles there to choose from, listed in no particular order. Scroll down to find the styles img-right and img-left.
3) For our example, click the style img-right and note the image now floats to the right of the text in the JCE design view window.
4) Notice too, that the image now has a thin black border. That is part of the CSS img-right style for this website, as well as custom margins all around the image.
How it works: For each Joomla website I create two custom CSS styles for floating images left or right. I name them something like img-left and img-right, or image-left and image-right. These styles will also apply the border and margins to the image, to match the style of your website.
The margins keep the text some distance from the edges of your image. For an image floated to the right, I set the right margin to zero and the other top, bottom, and left margins to some small distance.
Extra credit: These custom styles go into the custom style sheet for the Joomla template, named something like custom.css. In JCE editor global configuration I specify the location of this CSS file, so that the JCE design view window preview shows your article as it would look with these custom styles applied.
It seems both WordPress and Joomla make the website editor go the extra mile to add a title tag to an image in a post. This is the tag that allows you to describe the significance of the image. Browsers usually display the tag’s value as a “tooltip” when the visitor hovers over the image. Not to be confused with the “alt” tag which describes how the image looks to a visually impaired person and helps Google to rank the image.
Try hovering over this image to see how your browser displays the title tag.
Both CMS’s automatically build an alt tag value when the image is first used in an article or post. Joomla hides the setting for the title tag behind an “Advanced” tab in the JCE image editor. That’s not helpful for encouraging a novice author to provide text for the title tag.
Today in WordPress I wanted to add a title tag to the image in my new post. I dutifully filled in the caption, description and alt tag values in the image editor when I uploaded my image. A title tag was automatically filled in for me. But when viewing my post in a browser window, no tooltip on hover!
So, I went to text mode in my post and added the title tag “by hand.” This time on hover I got an entire paragraph of text with embedded HTML markup. So that didn’t work. On close examination of my markup I could not see what was wrong. So I found this helpful article by WPBeginner.
It explained the purpose of alt and title tags, and even explained that the “title” setting WordPress uses when the image is first uploaded, is NOT the title tag that shows as a tooltip. The article’s directions said that, in my WordPress visual post editor, click on the image then click the edit button that appears.
Look in the “advanced” section to find a field you can fill in with the value of the title tag.
I had to hunt a while to find the “advanced” section, as it was out of view within the popup box. But finally, “success!”
I have figured out how to add the title tag in two ways now: if nothing special is going on with captions or other shortcodes, you can simply add a title attribute to the image in question in the post editor’s text mode; or you can use the image editor, scroll down to “advanced” settings and fill in the tag there.
By the way, in adding those last two images, I was reminded of how easy it is in WordPress to display a CAPTION for the image: you just fill in the caption field within the image source. In Joomla how the caption is used depends entirely on the template, and it requires tricky CSS overrides on the web developer’s part, and perhaps CSS knowledge on the editor’s part, to make it look good.
Also, I accidentally selected two images and found BOTH were inserted into my article. Does anyone have a good use for such a feature?
SiteGround tech support recently introduced a new feature to me when I asked the cost for an SSL certificate for a client’s website. She said I can set up an SSL certificate for free using a new feature available at their web hosting cPanel called “Let’s Encrypt.”
I tried it out and it seems to work! I’ve coded this link with http protocol. Click it to see that the server redirects you to a page that uses the https protocol. Does it work for you? Or does your browser display some SSL certificate error messages?
For a long time I’ve provided SSL encryption only when necessary (e.g. e-commerce sites, sites that collect visitor’s private info) because it’s extra cost (lately about $80/year) and requires tech support’s help. I looked into how SSL could work without needing a dedicated IP address:
I found a thread that explains why no dedicated IP address needed for the SSL certificate. It says that if your web server’s SSL library supports “server name indication” (SNI), which all modern libraries do, there’s no longer a need for a dedicated IP address for each SSL certificate.
The difference is that if the browser supports SNI, it can send the host name unencrypted, so the server can properly match the virtual host without needing to decrypt the request first. It also says that for older versions of IE browser running on Windows XP, these browsers don’t support SNI. It doesn’t say how web servers would handle such requests from these browsers
… but this next article gives an example of extra work a web server has to do to figure out which website to go to if it gets a request from IE browser with host name encrypted: if it can’t figure out which website to go to, it returns a certificate error.
Joomla has a setting that lets you direct the website to USE the SSL certificate once the certificate is installed on the web server. That’s how I finished the SSL setup for the example Joomla website above.
For a future topic, once I learn how to set up SSL for a WordPress website I’ll make a new post here.
This just in (9/26): WPBeginner has an article all about how to set up an SSL certificate at SiteGround and DreamHost then what’s required once the certificate is installed, to use it in your WordPress site. I have not yet read the article, but I’m open to comments from others who have and tried it out.
A quick online search just now shows that only SiteGround and DreamHost offer integration with Let’s Encrypt. I am looking for my 2nd-favorite web hosting company, InMotion Hosting, to support Let’s Encrypt, but it seems as of Dec 2015 they have no plans to add it.
The main purpose of categories and tags is to improve the usability of your site, by letting a visitor browse through your content by topic rather than browsing chronologically (which is how blogs were initially set up).
A secondary purpose is to help your post be found by search engines, when someone wants information but has no idea who you are or that you’ve posted exactly the answer they are looking for.
Categories are meant for broad grouping of your posts, like a table of contents. Categories can have sub-categories — they are hierarchical.
Tags are meant to describe specific details of your posts. They are like a post’s keywords (not in the SEO sense of the word) that you can use to loosely relate your posts – like in the tag cloud or site search. Tags form the index of your website as though it were a book.
Every post must have a category, even “uncategorized,” whereas tagging a post is optional.
- Authors often rename the uncategorized category to something like Other, Ramblings, Misc. etc.
- Blogs evolve: there is no way you can come up with all the right categories from the start. Still, imagine your site after being up and running for several months: what posts does it have? How will visitors find the content they want? Choose five generic catgories to start with and add more as your blog evolves.
- This author suggests starting with top categories that have generic, future-proof meanings, then use tags to identify specific topics that may fall in and out of favor over time.
- Use the Redirection plugin if your category renaming will affect existing posts’s URL’s.
- If you find you often want to assign your posts to more than one category, consider restructuring your categories.
- Categories should distribute your posts well. If a single category holds 90% of your posts, you probably need new or different categories.
- Choose categories that highlight the content you want to promote. In my case, I hope to help others to learn WordPress, so I’ve chosen (sub) categories based on my ideas of the aspects of website development using WordPress.
- A good rule of thumb is assign no more than 10 tags to each post unless you have a good reason.
- WordPress will automatically list a post’s category and tags in the post’s byline. The category name and tag names are linked to browse similarly categorized and tagged posts.
- The Tag Cloud widget shows your most popular tags sorted alphabetically and sized in proportion to their usage. I like this use of visual cues. This post’s image shows this website’s tag cloud just before I added this post.
Remember your purpose in choosing categories and keywords is usability: to organize your website content to help your visitor find the information she seeks.
My WordPress book, WordPress, the Missing Manual, has an excellent description on how to choose good categories on p. 109.
Using categories and tags to organize your content. This author, Syed Balkhi, has an easy-to-understand writing style, seems to keep his content up to date and I like the level of detail provided. Each article includes links to his other related articles. I found his articles when I searched for answers to my questions.
Even going back to what appears to be his parent article, Beginner’s Guide for WordPress, in case that’s where you want to start, the content is not an introduction to WordPress but his latest WordPress articles. It’s as though he has read my mind, as March 29th’s article is “How to Create a Contact Form in WordPress (Step by Step).” Of course I want to know how to do that … from my experience creating non-WordPress websites.
He loses credibility in my eyes though, with his footer ad “WPBeginner users Get a Free Domain and 50% off Bluehost Web Hosting.” Don’t get me started.