WordPress – Code Sharing – Github/Gist

Background

It is “Clean out the room” weekend.  And, I am here ruminating through all the dead wood, printed paper, clutter I have stored in my little bedroom.

The one I am currently on is the one by Chris Coyier and it is titled “Posting Code Blocks on a WordPress Site | CSS Tricks”.

Truth be told is was the inspiration behind our last post, as well.

 

Posting Code Blocks on a WordPress Site | CSS-Tricks

Chris post is available here.

Comment

A post is one thing, but taking the time to read the comment block is where one usually get all the fireworks.

What works, and what doesn’t.

Essentially, why the whole world is going to hell and why all this doesn’t really matter.

Hidden there somewhere, the reassuring “… but then you can try this, as well.”

 

Lewis Coyles

Here is the comment left by Lewis Cowles :-

Code

And, so the drill is you go to https://gist.github.com/.

Home Page

 

Data Entry

You do a bit of data entry

  1. Gist Description
    • Give the code a bit of description
  2. File name
    • Filename and extension
  3. Code Block
    • Enter the code snippet
  4. Private or Public
    • Indicate whether private or public
    • Public
      • Search Engines will collect metadata
    • Private
      • Excluded by Search Engines
    • Anyone with URL can access it

 

WordPress

Come back to wordpress.

Post Editor

The easiest for me to is to just access the Text tab and use the gist tag.

Sample Code

Sample Output

Original Code

Revised Code

 

More

Please read more here….

WordPress – Using custom css in hosted wordpress site

Background

July 4th on a Tuesday throws everything off.

Nevertheless Our task this first weekend in July 2017 is integrating CSS, Custom Style Sheets, into our hosted wordpress posts.

 

Disclaimers

WordPress

WordPress Plans

As of 2017-July, here are the various flavors of Hosted WordPress.

Link

 

WordPress CSS

Prerequisite :-

  1. Premium :-
    • CSS
  2. Small Business :-
    • Google Analytics

And, so we can see that we at least need to be on premium to have access to custom CSS.

Same confirmed here.

 

Crediting

Crediting my brother.  I emailed him the link and he read the Official literature.

I am with the Nike Crowd, just do it!

 

Guide

We will be using the Excellent write-up from WordPress Support.

It is titled “Custom Design »How to Add Custom CSS” and it is available here.

 

Outline

  1. Sojourn to WordPress Customize Page
  2. The “You are Customizing” window will appear
  3. Please click on CSS> button
    • Enter the CSS script that you will like to add
    • Save the text
  4. Create new Post or Edit exist existing one
    • Use css by doing the following
      • Prefixing with Div Class
        • Syntax :-
          <div class="[class-id]">
          
          
        • Sample :-
          <div class="datagrid">
          
          
      • Suffix with
        </div>
        

 

Images

You are Customizing

Welcome to Custom CSS!

Customized CSS!

Eli Geske

Eli Geske – Table Styler

Copied CSS Style sheet gladly shared by Eli Geske…

 

Sample

CSS Code

CSS Code – Eli Geske


.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}
.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
    padding: 3px 10px;
}
.datagrid table thead th {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
    border: none;
}
.datagrid table tbody td {
    color: #00496B;
    border-left: 1px solid #E1EEF4;
    font-size: 12px;
    font-weight: normal;
}
.datagrid table tbody .alt td {
    background: #E1EEF4;
    color: #00496B;
}
.datagrid table tbody td:first-child {
    border-left: none;
}
.datagrid table tbody tr:last-child td {
    border-bottom: none;
}
.datagrid table tfoot td div {
    border-top: 1px solid #006699;
    background: #E1EEF4;
}
.datagrid table tfoot td {
    padding: 0;
    font-size: 12px
}
.datagrid table tfoot td div {
    padding: 2px;
}
.datagrid table tfoot td ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.datagrid table tfoot li {
    display: inline;
}
.datagrid table tfoot li a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 8px;
    margin: 1px;
    color: #FFFFFF;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
    text-decoration: none;
    border-color: #006699;
    color: #FFFFFF;
    background: none;
    background-color: #00557F;
}
div.dhtmlx_window_active,
div.dhx_modal_cover_dv {
    position: fixed !important;
}

HTML Code

HTML Code – Table

Here is a rather generic HTML table.  The code does not contain any formatting HTML options and will rely on the hosting page to provide those.

<div class="datagrid">
<table>
<thead>
<tr>
<th>Athlete</th>
<th>Team</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
	<li><a href="#">Previous</a></li>
	<li><a class="active" href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">Next</a></li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Kyrie Irving</td>
<td>Cleveland Cavaliers</td>
<td>Point Guard (PG)</td>
</tr>
<tr class="alt">
<td>DeMar DeRozan</td>
<td>Toronto BlueJays</td>
<td>Shooting Guard (SG)</td>
</tr>
<tr>
<td>LeBron James</td>
<td>Cleveland Cavaliers</td>
<td>Small Forward (SF)</td>
</tr>
<tr class="alt">
<td>Giannis Antetokounmpo</td>
<td>Milwaukee Bucks</td>
<td>Power Forward ( PF)</td>
</tr>
<tr>
<td>Jimmy Butler</td>
<td>Chicago Bulls</td>
<td>Small Forward</td>
</tr>
</tbody>
</table>
</div>
 
<h3>Western Conference</h3>
<div class="datagrid">
<table>
<thead>
<tr>
<th>Athlete</th>
<th>Team</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
	<li><a href="#">Previous</a></li>
	<li><a class="active" href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">Next</a></li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>Golden State Warriors</td>
<td>Point Guard (PG)</td>
</tr>
<tr class="alt">
<td>James Harden</td>
<td>Houston Rockets</td>
<td>Point Guard (SG)</td>
</tr>
<tr>
<td>Kevin Durant</td>
<td>Golden State Warriors</td>
<td>Small Forward (SF)</td>
</tr>
<tr class="alt">
<td>Kawhi Leonard</td>
<td>San Antonio Spurs</td>
<td>Small Forward ( PF)</td>
</tr>
<tr>
<td>Anthony Davis</td>
<td>New Orleans Pelicans</td>
<td>Power Forward ( PF )</td>
</tr>
</tbody>
</table>

Output

NBA – All Stars – 2017

Eastern Conference
Athlete Team Position
Kyrie Irving Cleveland Cavaliers Point Guard (PG)
DeMar DeRozan Toronto Blue Jays Shooting Guard (SG)
LeBron James Cleveland Cavaliers Small Forward (SF)
Giannis Antetokounmpo Milwaukee Bucks Power Forward ( PF)
Jimmy Butler Chicago Bulls Small Forward

 

Western Conference
Athlete Team Position
Stephen Curry Golden State Warriors Point Guard (PG)
James Harden Houston Rockets Point Guard (SG)
Kevin Durant Golden State Warriors Small Forward (SF)
Kawhi Leonard San Antonio Spurs Small Forward ( PF)
Anthony Davis New Orleans Pelicans Power Forward ( PF )

 

Listening

Listening to Morgan Heritage

Morgan Heritage – Man in Love
Link

Summary

Like Morgan Heritage I tried twice before, but was unable to integrate CSS into our hosted wordpress site.

 

Dedicated

Dedicated to WordPress and Eli Geske ( About Eli Geske )

And, even further behind them Tim Berners-Lee ( HTML ) and Håkon Wium Lie & Bert Bos ( CSS ).

 

References

Tutorial

  1. WordPress
    • Custom Design »How to Add Custom CSS
      Link

CSS History

  1. Wikipedia
    Link

CSS Sample

  1. Eli Geske


CSS Beautifier

  1. cleancss
    Link

Data

  1. NBA All-Star Game 2017 rosters: Lineup, starters and reserves
    Link

 

WordPress & Google Web Master

Background

A few weeks ago I touched on the fact that because search tags are been encrypted by Search providers, WordPress is unable to offer us aggregate information as to which tags visitors are using to reach our blog.

Promised to come back and add more details.

Like Button

Based on like button from that original page, I brought out the smart phone on my commute come home this evening and googled for others work.

BTW, here is a link to the original page.

This post will cover the hard work of others.

 

WordPress

Settings / Traffic

Access Settings / Traffic via this URL ( https://wordpress.com/settings/traffic  [ Link ])

 

Site Verification Services

Currently, four providers are exposed.  And, those are:

  1. Google
  2. Bing
  3. Pinterest
  4. Yandex

 

Google

WebMasters

Search Console

For Google, we access https://www.google.com/webmasters/tools/home?hl=en.

We click the “Add A Property” button.

Add a Property

We entered our WordPress URL:

 

Verify Ownership of Property

Recommended Method

Click the “Alternate Method” tab.

Alternate Method
Original Screen

HTML tag -> Screen

Upon clicking the HTML tag button,  Google offers us a personalized verification tag.

 

WordPress

Settings / Traffic

Accessed WordPress Settings and Traffic via this Link.

Site Verification Services

Site Verification Services – Google Tag Entered

In the text box reserved for Google, please paste the Google Tag and click the Save button.

Google

WebMasters

Search Console

Verification Success

 

Search Analytics

 

Summary

Have to give Google some time to curate our web site and hopefully offer us some data.

 

References

  1. WordPress
    • WordPress Tools
      Link

WordPress – Stats / Search Terms :- “Unknown Search Terms”

 

Background

Occasionally, I review the stats on our WordPress Blog.

It is good way to gauge readership aggregated by Country, Posts, and clicks.

 

Search Tags

Another coverage is the actual Search Tags that brought traffic to the site.

Stats

Stats for 2017-May-31st

Image

Here is the one for today…

Explanation

Just about all entries are marked “Unknown“.

 

Why “Unknown”

Why the opacity in “Search Terms“:

Outline

  1. Privacy
  2. Legal Protection

 

InDepth

Privacy

Search Engines encrypt the search tags entered by their users.  For the sake of privacy and to better protect web users activities, Search Engine providers are moving to encrypt the data entered by users.

They allow end users to enter the search tags, utilize those search tags to find matches, decline to pass them along when users click on links, and save the encrypted version.

Legal Protection

Force Governments & Law Enforcements to request Subpoena Order before handing over Users Search History.

This protects the providers themselves from lawsuits brought by grieved users and shareholders.

 

Vendors

Google, Microsoft, and Yahoo have all transitioned to encrypting search tags and not forwarding it.

Browsers can also be configured not to forward the referrer and search tags.

Search Engines

Bings

  1. Bing Moving to Encrypt Search Traffic by Default
    Duane Forrester, Senior Product Manager – Bing
    Published On :- 2015-Jun-15th
    Link

 

Follow-up

In follow-up posts, will talk about avenues available through Search Providers and WordPress to regain some of these insights.

WordPress – Changing Primary Domain

 

Background

I have been journaling via WordPress for a while now.

And, it serves as one of my primary tools for juggling back to what I have learned and not fully learnt over the years.

And, using it in that most intimately ways, I myself will be bothered when I am trying to recollect something and ADs pop up.

And, so brought out the Credit Card and ran up $99 or so for the paid version.

 

Paid Version

The unpaid version goes [username].wordpress.com.  basically a sub-domain name under wordpress.com.

The paid version comes with a domain name.

With the paid version got to choose a domain name and chose learningInTheOpen.org

 

Lineage

A few years ago changed to the new domain name, but it was so easy and so quick I did not feel I took down good notes.

And, so reverted until I could get some screenshots and share the steps.

 

Steps

  1. Access your wordpress and login as an Administrator
  2. Access MySite
  3. From the left panel menu, choose Domains
  4. On the Domain Settings page, choose “Make Primary”
  5. On the Primary Domain page, click the “Update Primary Domain”  button

 

 

Images

My Site

mysite

Domains

domains

 

Domain Settings

domainsettings

 

Primary Domain – Initial

 

makeprimary

 

Primary Domain – Completed

makeprimary-updated

 

Dedicated

Dedicating to Matt Mullenweg, Mike Little, and all those who work and post on WordPress.

Like that singer said, we don’t have to take our clothes off to have a good time.

But, we do have to place something in the public domain.

WordPress – Find posts assigned to a Category

Background

Trying to add new categories to our menu and discovered that we have duplicate category names.

Here is how to discover the Posts using a specific category.

Afterwards you can consider re-assigning those posts to the one category that you will like to keep.

 

TroubleShooting

Find Categories

Categories

Go your Categories section.

First visit the category page and search out categories.

Here is a template URL for it https://<sub-domain>.wordpress.com/wp-admin/edit-tags.php?taxonomy=category.

Or you can go to your Dashboard / Posts / Categories.

searchcategories

Find the Category

In the Text box, enter the Category Name and click on the “Search Categories“.

We searched on Anti-Virus and the System quickly returned the list below..

searchcategories-antivirus-v2

 

Explanation

In the result page, we see two entries for Anti-Virus

  1. The first Anti-Virus
    • It’s slug is anti-virus
    • Count is 6
  2.  And, the second Anti-Virus
    • It’s slug is anti-virus-ms-sql-server
    • Count is 1

 

Access Category Option

For each Category displayed, you can hover over the Category and dig deeper into the Category.

Once you hover over a Category, the menu pasted below is displayed

categoryselection-cropped-small

Here is what happens when we click on each Category.

BTW, we opened each one in a new Tab.

This ensures that we do not lose our place.

 

Edit Category Option – Category [1]

Here is our first category

editcategory-av-technical

We can see that the Parent is the Technical Category.

 

Edit Category Option – Category [2]

Here is our second category

View

editcategory-av-mssqserver-before

 

Explanation
  1. Name  :- Anti-Virus
  2. Parent :- MS SQL Server

 

Edit

editcategory-av-mssqserver-after

Explanation
  1. Name  :- Anti-Virus ( SQLServer )
    • We renamed Anti-Virus to Anti-Virus (SQLServer )
  2. Parent :- MS SQL Server
    • And, left category as MS SQL Server

 

Categories – After

searchcategories-antivirus-after

Explanation:

Upon renaming the “duplicate” entry, we return to the Categories section.

Our entries are now Anti-Virus & Anti-Virus ( SQLServer).

 

Menus

Once our categories are distinct, let us quickly return to the premise behind the clarification.

And, that is to add a new Category to our menu.

menus-categories-antivirus

Explanation:

  1. Now when we search on Anti-Virus, we have two distinct entries
    • Anti-Virus
    • And, Anti-Virus ( SQLServer )

We will later go on to select Anti-Virus and Add it our menu.

Using Markdown in WordPress

Intro

I have been meaning to understand and work with markdowns for a while here.

 

Platform

Let us setup our platform first.

WordPress

Enable Markdown in Posts and Pages

From here, here is how to enable markdown in WordPress Posts and Pages:
To enable Markdown for posts and pages, go to Settings → Writing in your dashboard, and check the box labeled Use Markdown for posts and pages.
Click on Save Changes at the bottom of the page to apply. You will now be able compose posts and pages using Markdown.

 

And, to to enable markdown in Comments:

To enable Markdown for comments, go to Settings → Discussion in your dashboard, and check the box labeled Use Markdown for comments.
Click on Save Changes at the bottom of the page to apply.

 

Tags

Inline Links

To use inline links, enter the link text and surround it in square brackets.

And, enter the URL and surround in parenthesis.

Please make sure that there are no spaces between the ending square bracket and the parenthesis.

Here is a [link](http://github.com/DanielAdeniji/ "GitHub") to my GitHub repository.

Referenced Links

To use referenced links, enter the link text and surround it in square brackets.

And, enter a numeric ID to the URL you will later identify.

The numeric ID should also be enclosed in square brackets.

Later enter the Identifying ID. Enclose that in square brackets, as well.

A colon should follow and the URL should then be expressed.


A) Markdown - Basics [Link] [201]
B) Codebase - syntax-highlighting-in-markdown [Link][202]

[201]: https://daringfireball.net/projects/markdown/basics
[202]: https://support.codebasehq.com/articles/tips-tricks/syntax-highlighting-in-markdown "Dan Quinney"

Mixed List

Mixed List can be entered with numeric IDs to indicate the top list.

And, indented asterix to precede the nested list.


1. United States
     * California
     * Florida
     * New York
     * Texas
2. Canada
     * Nunavut
     * Quebec
     * Northwest Territories
     * Ontario
     * British Columbia
     * Alberta

Code Block

Code Block – C#

Code blocked can be entered within three ~ or `. The language identifier shall follow.

And, corresponding ~ ( ~~~ ) or ` ( “`) should indicate the completed code block.


~~~csharp
public main()
{
    Console.WriteLine("hello world");
}
~~~

Code

Links

Sample Inline Link

Here is a link to my GitHub repository.

Referenced Links

A) Markdown – Basics Link
B) Codebase – syntax-highlighting-in-markdown Link

Mixed Lists

  1. United States
    • California
    • Florida
    • New York
    • Texas
  2. Canada
    • Nunavut
    • Quebec
    • Northwest Territories
    • Ontario
    • British Columbia
    • Alberta
  3. Australia
    • Multi-state/territorial
    • New South Wales
    • Northern Territory
    • Queensland
    • South Australia
    • Tasmania
    • Victoria
    • Western Australia

Code Block

Code Block – XML

<!--?xml version="1.0"?-->

<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies, 
      an evil sorceress, and her own childhood to become queen 
      of the world.</description>
   </book>

</catalog>

Code Block – C#

public main()
{
      Console.WriteLine("hello world");
}

Critique

I think if you attempt to use markdowns in WordPress posts, you will run into problem such as

  • markdown contents will be lost as you switch from Text to Visual Mode
  • There is a bit of “forciness” as to where whitespaces can go

References

  1. John O’Nolan – How to Write Faster, Better & Longer: The Ultimate Guide to Markdown
  2. John Gruber – Daring fireball – Markdown: Basics
  3. Codebase – Syntax highlighting in markdown
  4. WordPress – Markdown quick reference