New 2021 March 23 screencast: View on Youtube or on RUMBLE! (I’m still getting the hang of Rumble – it says this video is private, unlisted, unsearchable and available to my subscribers, so if you have trouble viewing it, you may need to subscribe to me on rumble. My channel is Kids Chant.

New 2020 January 4 screencast: How to Blog with Veronica B

The Tease or Excerpt
The Facebook Discussion Link
Common use of Picture at the Top
How to “Edit the Code” or HTML
Divider Stars
Common Use of a Beginning Capital (Drop Cap)
Link Target Blank – links open in a new tab – WordPress gives you an option to include this code with their link button – see “Open link in a new tab”
Youtube embeds
Preceding important stuff (mostly downloads) with stars and spaces
Footnotes

INTRODUCTORY (September 5, 2015) : PART A • PART B

The Tease or Excerpt

The old blog called it the Tease. WordPress calls it the Excerpt. I’ve made a short video for visual learners. The text version follows.

Classic Editor

When you are editing a post, either it will be there in a box beneath where you edit your article text. You scroll down a bit and it’s there, past the SEO stuff that the Genesis framework adds in. If the Excerpt box is not there, you need to activate that box by clicking the Screen Options tab up the top right. Activating it is just a once off task.

Blocks Editor

The Excerpt box is in the Document tab on the right, scroll down past the Featured Image. If it’s not appearing, then you can enable it by clicking on the three dots block in the top right corner and choosing Options, right down the end of that menu. Activating it is just a once off task.

The Discussion on Facebook Link

Similarly to the Excerpt/Tease box, the Facebook Link is accomplished with a box which is hidden by default. You need to activate Custom Fields box, the same way you activated the Excerpt box.

Once you have activated the Custom Fields box, then the trick is to find the post id from the relevant Facebook post. The page you’re looking for is a url with just your post in it and the word “post” in the url. There will be one big number there, which you should be able to double click to select then copy it.

Once you have that precious number, you head over to your post on the blog, find the Custom Field box and under Add new custom field you click Select and select the fb_post_id. Then you paste that magic number from facebook into the blank box adjacent and then hit the button Add new custom field. That button is tempting, but wait until you have the fb_post_id selected and the number ready to go.

If you do hit that button early and end up with some blank custom fields, it’s best to delete the extra ones and keep to one correct one.

COMMON USE OF A PICTURE at the top:

Use the Media Library – select alignment as needed. Check that the code goes before the drop cap if you’re using one.

Link to “Media File” to enable lightbox effect.

Editing Code in the Classic Editor

There are two tabs to the right of the content box: Visual and Text. Choose Text to edit the code. Choose Visual for a rough idea of how it will look.

Editing Code in the Block Editor

Each paragraph block has a menu bar which pops up when that paragraph is selected. The rightmost icon has three dots. Clicking on those three dots opens up a longer menu where you can find “Edit as HTML”. Select that to edit the code. Next time you click that three dot symbol, you will see “Edit Visually” in the menu. Choose that to go back to the regular view.

Divider Stars

Code for those stars:

<img src="https://archive.ccwatershed.org/media/photologue/photos/874_STARS_DIVIDE_STAR.png" />

And this code:

<img src="https://archive.ccwatershed.org/media/photologue/photos/182-divider.png" />

Makes this bar:

<img class="aligncenter size-full wp-image-29055" src="https://www.ccwatershed.org/wp-content/uploads/2020/06/77727-Black-Line.png" alt="" width="2168" height="69" />

COMMON USE of the beginning Capital Letter:

Here’s the old code:

<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;">ZZZZZZZZZZ

Which comes out like this:

ZZZZZZZZZZ

Here is the new code (as of September 2020) :

HERE is a new code

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

class="fancy-drop-cap"
class="very-fancy-drop-cap"

Both can be further customized, experimenting with the numbers in style="font-feature-settings: 'ss03'; margin: 0px 8px -8px -8px" The size of the drop cap can be changed by adding font-size: 7em; into that style property, making sure to separate each command with a semi-colon (;).

Further Examples

Veronica Brandt • “Lalande Drop-Cap Letters” a page of examples for every letter of the alphabet (right now I’ve only pasted the codes down to F, but hope to get back to finish the rest soon!)

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.

HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name. And here is an extra sentence to help see what happens with a few more lines in the paragraph. The margin values are given in this order: Top, Right, Bottom, Left. That is, clockwise starting at the top. All the drop caps are weird sizes, so you may need to experiment with different values to get the right effect.

* * HERE is the User Guide for the Fancy Font we use all over the place

You can see all the different styles and choose your favorite font-feature-settings accordingly.

Code for the Capital Letters VIDEO

<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;">ZZZZZZZZZZ

<img src="https://archive.ccwatershed.org/media/photologue/photos/3ln_Z.png" align="left" style="margin: .3em .7em 0 0;">ZZZZZZZZ

<img src="https://archive.ccwatershed.org/media/photologue/photos/2ln_Z.png" align="left" style="margin: .3em .5em 0 0;">ZZZZZZZZ

Drop Caps for BLOCKQUOTE
CORRECTION to video: This code must be placed inside the blockquote VIDEO

<img src="https://archive.ccwatershed.org/media/photologue/photos/quoteZ.png" align="left" style="margin: .25em .5em 0 0;">

LINK TARGET BLANK

So that clicking your link takes visitors to a new tab and keeps ccwatershed open in an old tab so they can come back and finish reading the article later.

<a href="ZZZZZZtheURLgoesHereZZZZZZ" target="_blank">ZZZZwhatTheySeeZZZZZ</a>

YouTube and Vimeo

embed that LIMITS the after videos to the channel:

This is handled automagically by a special plugin. Use the YouTube button / block. Even just pasting the youtube url on its own line is automatically converted into an embed when you save your post.

https://www.youtube.com/watch?v=It3i-dKusIM

Vimeo doesn’t need the ?rel=0 code. Just paste the url on its own line. To center, add a <center> before and a </center> after.

https://vimeo.com/360529913

<center> https://vimeo.com/360529913

</center>

YOU CAN PRECEDE WITH stars & spaces:

    * *  <a href="ZZZZZ" target="_blank">Some Text Goes Here</a>

and it comes out looking like this:

* * Some Text Goes Here

red text with bold
So Incarnadine. Much Red.

So Incarnadine. Much Red.

Adding a picture

Use the Add Media button. The right panel gives you options including image alignment. If you would like lightbox effects then select Link to: “Media File”.

Adding a caption to your photo

Look in the options when inserting the photo – there should be a field for the Caption and/or Description.

Photo “gallery”

There is an option to Create A Gallery when you insert images. If this fails, insert thumbnails using the link to Media File option. Use the Text tab to line up the code for each photo on the one line (the editor will wrap the text, but any returns will make a new line) Put a space between each photo (between the </img> <img> tags.

Align text to the right (i.e. “right justify text”)
ZZZZZZZ

Align items to the right
align="right" style="margin: .3em 0 1em 2em;"

Adding white space above or below text
To add white space after Blog Category Modification

Using your “Facebook Metadata 300×300 image” as your Blog Preview Image

Set the Featured Image. It doesn’t need to be any particular dimensions. Bigger than 300×300 is good though. The rest should be handled automatically now, but I leave this here for posterity.

VIDEO
Here’s the link I remind you about in the video: Face “Debug” Link

When using the “center” command, there may be too much space at the top.
A quick way to fix it is to insert a negative margin margin-top:. The code for a video would be the following:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Odq_OlHaC5U?rel=0" frameborder="0" allowfullscreen="" style="margin-top: -20px;"></iframe>

Working with Thumbnails:
November 14, 2013 (Part 1) • November 14, 2013 (Part 2)

FOOTNOTES:

REPLACE THE ZZZZ with “1” or “2” or whatever your number is and make sure to leave a space before you add it, otherwise the number will probably extend too far to the left in an ugly, hard-to-read way:

ZZZZ

For the part at the bottom, you must replace both ZZZZZZ slots; the number and the actual footnote

 

<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">

NOTES FROM THIS ARTICLE:

<blockquote>ZZZnumberZZZ   ZZZZZZZZZ</blockquote>

If your article has a whole bunch of notes, it would look like this—notice how it always must END with a “blockquote” thing:

<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">
NOTES FROM THIS ARTICLE:

<blockquote>ZZZ   ZZZZZ
 
 ZZZ   ZZZZZ
 
 ZZZ   ZZZZZ
 
 ZZZ   ZZZZZ</blockquote>

User Manual

Table of Contents