How To Add A Pattern To Your WordPress Blog

I keep forgetting to save a template of my HTML/PHP for my pattern pages. I thought I’d write it up and explain what is what and offer it to others. Before we begin though there are a few things to consider and do.

  1. I wrote this for the text editor in WordPress Blog. It can be used on any HTML/PHP page. The only things that are not usable as is are the HTML for Font Awesome and the PHP for PrintFriendly (a WordPress plugin).
  2. If you want to use the Font Awesome coding please go to http://fontawesome.com and do what it says. The coding for Font Awesome WILL NOT work unless you do this. The coding in this is for FontAwesome5.
  3. If you want to use PrintFriendly go to your WordPress install and go to the PlugIns section. Look for PrintFriendly and install it.
  4. Know the basics of HTML. Or go to W3Schools and learn. https://www.w3schools.com

I am going to try to go through each HTML part and tell you what it does. I am self taught. I have no training or degree for HTML or coding of any sort. I am NOT responsible should you mess anything up on your blog, web server, etc. This is just a guide describing what I do for my patterns I offer on my site. At the end of this will be the plain code with no description of what things are.


Main Image

<img src=”IMAGE URL GOES HERE” alt=”IMAGE DESCRIPTION GOES HERE” />

Change the uppercase letters to your image URL & image description.


Horizontial Dividers

<hr />

This tag will provide a line break that you can see. Wherever you put it there will be a faint line across the web page. It will only put the line across the area the theme has assigned for the page.


Adding Ravelry Queue & PDF Download Links

<p align=”center”><a href=”PDF DOWNLOAD LINK GOES HERE“><i class=”fas fa-file-pdf”></i> Download PDF</a> <i color=”CHANGE THIS TO WHATEVER COLOR YOUR PAGE BACKGROUND IS IT PROVIDES A BLANK SPACE OR DELETE IT” class=”fas fa-minus”></i> <a href=”RAVELRY QUEUE URL GOES HERE“><i class=”fas fa-list-ol”></i> Put in your Ravelry queue.</a></p>

This part includes the Font Awesome coding. The <p align=”center”> will align this to the center of the page. Anything with an <i> tag in this section is for Font Awesome. Put your URLs where the red wording is. The green wording is for you to change to the hex code for your background color. It provides a ‘space’ between the PDF download link and the add to ravelry queue link. It is not needed – I’m being lazy doing it this way as there is HTML coding to do the same thing.

Adding the PArttern Information

<strong>Skill Level:</strong> PUT SKILL LEVEL NEEDED TO COMPLETE THIS PATTERN HERE

<strong>Guage:</strong> IF GAUGE IS NEEDED LIST IT HERE OTHERWISE DELETE THIS PART

<strong>Materials:</strong>
<ul>
<li>MATERIAL 1</li>
<li>MATERIAL 2</li>
<li>MATERIAL 3</li>
</ul>

<strong>Stitches Used:</strong>
<ul>
<li>STITCH USED 1</li>
<li>STITCH USED 2</li>
<li>STITCH USED 3</li>
</ul>

In this section the <li> tags are for making lists. You can add more <li></li> tags with the other ones if more items in the list are needed. You can also remove some if needed. The <strong></strong> tag makes any words in between them be bold. Change anything in blue wording to suit your pattern.


Adding the Pattern

<strong>Round 1:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 2:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 3:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 4:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 5:</strong> ADD ROUND DIRECTIONS HERE

Change anything in blue wording to suit your pattern. Add or delete rounds as needed. The <strong></strong> tag makes any words in between them be bold.

The Entire Pattern

The following has all the coding as I have it on my pages. Change it how you want/need.

<img src=”IMAGE URL GOES HERE” alt=”IMAGE DESCRIPTION GOES HERE” />

<hr />

<p align=”center”><a href=”PDF DOWNLOAD LINK GOES HERE“><i class=”fas fa-file-pdf”></i> Download PDF</a> <i color=”CHANGE THIS TO WHATEVER COLOR YOUR PAGE BACKGROUND IS IT PROVIDES A BLANK SPACE OR DELETE IT” class=”fas fa-minus”></i> <a href=”RAVELRY QUEUE URL GOES HERE“><i class=”fas fa-list-ol”></i> Put in your Ravelry queue.</a></p>

<hr />

<strong>Skill Level:</strong> PUT SKILL LEVEL NEEDED TO COMPLETE THIS PATTERN HERE

<strong>Guage:</strong> IF GAUGE IS NEEDED LIST IT HERE OTHERWISE DELETE THIS PART

<strong>Materials:</strong>
<ul>
<li>MATERIAL 1</li>
<li>MATERIAL 2</li>
<li>MATERIAL 3</li>
</ul>

<strong>Stitches Used:</strong>
<ul>
<li>STITCH USED 1</li>
<li>STITCH USED 2</li>
<li>STITCH USED 3</li>
</ul>

<hr />

<strong>Round 1:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 2:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 3:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 4:</strong> ADD ROUND DIRECTIONS HERE
<strong>Round 5:</strong> ADD ROUND DIRECTIONS HERE
<hr />

I put a line break between each ‘section’ for me to keep track of whats where. You DO NOT need to do this. If you need to manually add a page break that will show on a web page use the <br /> tag. Two <br /> should be a double break or a paragraph break.


Is there an easier way to see all this?

Download the PDF for this guide
Yes there is! I put it in a PDF file for me to keep on my Google Drive. You can download it from here for you to use and keep.

Leave a Reply