It’s been a while since I have done a WordPress Wednesday post. For the most part, we have covered the bulk of what it takes to get your blog set up and looking pretty. But, there are still some things that can enhance your actual posts.

Last week I blogged about what we got in week 3 and 4 of our CSA boxes. I also included a recipe. You may have noticed that the recipe ingredients and instructions were formatted all pretty and had a print friendly option. Today I thought I would tell you how I did that.

Here’s a screenshot of how the recipe appeared in the blog post.

I kept seeing all these food bloggers post their recipes in such a pretty format that offered readers the ability to save and print the recipe. So when I knew I had a recipe I wanted to post, I did a little research to see how I could do the same.

There are actually several different recipe plugins you can install to create reader friendly recipes. To name a few there’s hRecipe, EasyRecipe and ZipList. Pro Food Blogger has a great breakdown of each of these plugins plus a few others you can check out.

I ended up installing ZipList and I’ll show you how easy it was to post a recipe using it.

First you’ll need to search for the plugin and install it. Click here to learn how to install a plugin if you aren’t sure how.

Once it’s installed, you will see a little spoon & fork icon at the top of your post editing window.

Put your cursor where you want your recipe to appear within the post and click on the icon.

Then literally all you do is fill out all the ingredients and cooking instructions. Like it says, you don’t need to format. It will automatically format based on where you press enter.

Within your post, you won’t actually see the recipe you’ve created. You’ll just see the below icon instead.

And that’s it. Now you have a pretty formatted recipe your readers can print or save for later.

If you use a different recipe plugin for your blog, which one do you use?

Check out the previous WordPress Wednesday posts::

-WordPress.com vs. WordPress.org

-Securing a domain name

-Hosting

-Setting up your header and navigation bar

-Setting up your sidebar

-Creating a favicon

-Sidebar Plugins

-Installing Facebook like box and Instagram widget

-Installing Social Sharing bar

-How to add a ‘Pin It’ button to posts

-How to generate related post thumbnails

-How to truncate posts on homepage

-How to create popular posts section using code

-How to add a Pinterest widget to your blog

You May Also Like:

We all know how important Pinterest has become in the blogging world. Several weeks ago I showed you how to add ‘Pin It’ buttons to your blog to easily allow readers to pin your content/images. Today I’m going to show you an easy way to share with readers what you are currently pinning on Pinterest.

Last week when I was visiting one of my blogger friend’s blog  {Two Twenty One}, I saw that she had a fun Pinterest widget on her sidebar. I hadn’t seen a widget like that before and loved the layout, so I reached out to her to ask her how she installed it. Today I thought I would pass along the step by step in case you were interested in installing it yourself as well!

Here’s the widget that I’m talking about. It shows what you are pinning and updates your pins on a regular basis. It’s along the same lines as the Instagram widget I have on my sidebar.

If readers like what they see you pinning, they can click the ‘See on Pinterest’ button at the bottom and visit your full Pinterest page.

The first thing you’ll need to do is visit Pinterest’s Goodies page. Scroll down to the bottom of the page until you see ‘Make Board Widgets.’

Once you click on that, the below screen will appear. I chose to install the ‘Profile Widget’ which means it will show everything you are pinning. You can also install a ‘Board Widget’ instead which just shows pins from one specific board.

Once you have selected ‘Profile Widget’ you’ll need to type in your Pinterest User URL. Then click ‘Show Advanced Options.’

The advanced options allow you to choose the size of your widget. Since mine was going in my sidebar I made the width 300 and to make it a little longer I made the height 400.

If you hit the ‘Preview’ button, it will show you what your widget will look like.

At the bottom it will have the code you need to copy and paste and add to your blog as well as the script tag you’ll need to add.

For the html code, you’ll need to add a text widget to your sidebar. Click on ‘Appearance’ on the left hand side of your dashboard then click on ‘Widgets.’ Find the ‘Text’ Widget near the bottom and drag and drop it into your primary sidebar.

You’ll give your widget a title and then copy and paste the html code.

You’ll then need to add the script code. You’ll need to add the code right before your closing </BODY> tag. For me and my theme, I clicked on ‘Genesis’ on the left hand side of my dashboard and then clicked on ‘Theme Settings.’ Scroll down until you see the section called ‘Header and Footer Scripts.’ Copy and paste the script tag into the section that says “wp_footer ():.”

Hit ‘Save’ when you are done.

If you go back to your homepage and sidebar, you should now see your Pinterest widget.

When I first installed my widget, my ‘See on Pinterest’ button wasn’t working and going to my Pinterest page {it was giving me an error message}. I just deleted the codes and re-installed the widget and it worked the second time. Weird, but hopefully that doesn’t happen with anyone else.

Other than that issue, super easy!

Check out the previous WordPress Wednesday posts::

-WordPress.com vs. WordPress.org

-Securing a domain name

-Hosting

-Setting up your header and navigation bar

-Setting up your sidebar

-Creating a favicon

-Sidebar Plugins

-Installing Facebook like box and Instagram widget

-Installing Social Sharing bar

-How to add a ‘Pin It’ button to posts

-How to generate related post thumbnails

-How to truncate posts on homepage

-How to create popular posts section using code

You May Also Like:

Have you ever wondered what all the symbols and terms like <>, </a>, =, “, href, and img src mean when it comes to coding?

Today I’m going to explain a teeny tiny snippet of how to read/write code to help you create a customized popular posts section for your blog.

Now, before I go any further, let me give a little disclaimer. I am not a super tech savvy person and don’t claim to be. I’m not super knowledgeable when it comes to coding, but I know enough to create/make certain things work. So with that said, I may not be the best at explaining this, but hopefully this will be somewhat helpful/useful for you.

Now, if the very idea of code gives you the heebie jeebies, I totally understand. I was once there. But let me reassure you that it’s not as scary as it looks. I’ve actually come to really like it, just wish I knew a whole lot more.

It’s important to give your readers a visual idea of what your blog is all about and visually showcase some of your previous posts. A great way to do that is with a ‘popular posts’ section of your blog. There are several plugins you can install to generate popular posts from your blog. For me, I never really could find one that had both the visual component with the ability to customize which posts appear. So, I decided to manually create/code this section. Here’s what it looks like on my blog sidebar.

To create any sort of section on your blog that is made up entirely of code, you’ll need to insert a text widget into your sidebar. Click on Appearance on  the lefthand side of your dashboard, then click on Widgets. Scroll down until you find the ‘Text’ widget.

Drag and drop it where you want it to appear on your sidebar. Then give your widget a title. This is how it will appear on your sidebar.

Now to the fun stuff, the code.

Above is how all my code appears in the text widget.

The first thing you need to do is upload your images to an image hosting website. I use Photobucket. Today I’m not going to go into how I created the images with the text {that’s a whole other post}. But, you’ll just need to re-size your images based upon how you want them to appear and how large your sidebar is. For me, I put two small images side by side and re-sized each image to 125×125 pixels.

Once you’ve created your images and re-sized them, go ahead and upload them to Photobucket {or a similar site}. We’ll come back to your photos in a minute, but first, let’s talk about code.

For every image you want to appear on your sidebar, below is the code you’ll need to include::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” /><img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”/></a>

The “<” and “/>” you see is distinguishing the beginning and end of each individual code or command. In this case, the code for the image and the code for the link each have < and /> to identify the beginning and end. Think of it like a sentence. You start with a capitol letter and end with a period for each sentence you write.

So let’s start with the first part of the code. In your text widget box you’ll type in <a href=”

“href” is specifying the location of a web source {i.e. the web address for your post}.

Then go to your actual post on your blog that you are wanting to feature and click on the post title so the full web address appears in your web browser.

Copy and paste that web address following “href=.” So now you have <a href=”http://www.{your post web address here}.html” Since that is the end of the command be sure to close your command with />

Are you with me so far? Here’s how the first part of my code would appear for my DIY Curtain Rod post::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” />

Next, you’ll need to include the coding for the image. When you want an image to appear, the first part of that code would be <img src=

“Img src” stands for image source {duh}. You are essentially telling it where the image ‘lives’ and where to pull it from. Go back to Photobucket {or other image hosting site} where you uploaded your photo.

 Find the ‘direct link’ listed for that photo and copy it. For me, that link is located directly underneath that photo in Photobucket.

Paste that link immediately following =” in your code. Like this: <img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”

Then you will add /> following your quotation marks since that’s the end of the image part of the code.

Still with me? If you’ve made it this far, we’re almost done!

The last part of the code has to do with the <a and </a> you see at the very beginning and end. These set of commands distinguish where the entire code starts and stops. Going with the writing analogy, you can think of these like the beginning and ending of a paragraph. Or you can think of it like bookends. Every set of code you write has to have a start and stopping point.

For every image/post you want to appear, you have to have the <a and </a> to distinguish where the code starts and where it stops.

So now your code should look like the below with your individual html web address and image source link included::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” /><img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”/></a>

If you want your images to appear side by side, like mine, keep entering your code in just like the above with your various post links/images. So where your last </a> ends you’ll then start over right next to it with < href= etc.

If you don’t want your images to appear side by side but instead want them to be stacked, just enter <br><br> following each entire section of code. This is telling it to have 2 line breaks {which will leave you space in between each image}.

Whew! I know that was a lot of information and a lot of steps, but hopefully it was helpful.

Feel free to shoot me an email if you have any questions: meganbrookehandmade{at}gmail{dot}com.

Now off you go to code. Good luck!

Check out the previous WordPress Wednesday posts::

-WordPress.com vs. WordPress.org

-Securing a domain name

-Hosting

-Setting up your header and navigation bar

-Setting up your sidebar

-Creating a favicon

-Sidebar Plugins

-Installing Facebook like box and Instagram widget

-Installing Social Sharing bar

-How to add a ‘Pin It’ button to posts

-How to generate related post thumbnails

-How to truncate posts on homepage

You May Also Like: