GUIDE: Create custom circles on Home page

Current status: Working
[Updated: 11th of January 2014]

Note: This Custom Circles modification will not work in conjunction with Sticky circles.

Sometimes you may want to create some circles on the Home page that aren’t posts. You may want some unique circles that link to other websites, or other bits of your site. For example you could have a circle that links to Google.

This thread provides the techniques to allow you to create these custom circles. If you like you have an image in your custom circle just like a normal circle.

Demonstration
A custom circle with the text of “Google” and no image: http://snag.gy/Y5J7e.jpg
A custom circle with the text of “Google” and an image of a frog: http://snag.gy/P252R.jpg

Both image and non-image circles are linked to Google as well.

What’s involved
This is a long tutorial and will cover the following stages:

• Stage 1 – Getting started
• Stage 2 – Creating a “Content Type”
• Stage 3 – Creating a “Custom Field”
• Stage 4 – Creating another “Custom Field”
• Stage 5 – Creating a new “Custom Circle”
• Stage 6 – Coding

Please note that this tutorial will involve creating new files and updating them, so you will need FTP access. You can ask your hosting providers to help you with this.

Stage 1 – Getting started
Install this plugin: http://wordpress.org/plugins/custom-content-type-manager/

Go to the “Custom Content Types” main section of the dashboard: http://snag.gy/Tp0Rg.jpg

Stage 2 – Creating a “Content Type”
I’ll be demonstrating one that I created earlier.

1. Press the “Create Content Type” button http://snag.gy/NQ1j6.jpg
2. In the “Basic” tab (it’ll be open by default) enter the following:
   In “post_type” enter “custom_circles”
   In “Menu Name” enter “Custom Circles”
   http://snag.gy/DjlKK.jpg
3. Then go to the “Fields” tab http://snag.gy/QSVsF.jpg
4. Make sure only the “Title” and “Supports Custom Fields” checkboxes are ticked: http://snag.gy/ysQw9.jpg4
5. Then press the “Create New Content Type” button http://snag.gy/LpKAW.jpg

You should then see your Custom Content Type that you just created: http://snag.gy/G3wpz.jpg

Stage 3 – Creating a “Custom Field”
This is for the link on your Custom Circle.

The fields to enter in this stage are outlined in this screenshot: http://snag.gy/hSV7x.jpg

1. Click on “Custom Fields” at the top of that same page in the dashboard: http://snag.gy/30H9F.jpg
2. Select “Create Custom Field”: http://snag.gy/HvRr5.jpg
3. Select the “Create Text” button: http://snag.gy/jaGay.jpg
4. In “Label” enter “Link”
5. In “Name” enter “link”
6. You probably want it required too so also tick the “Required?” checkbox under “Validation“
7. Make sure the “Default Output Filter” dropdown menu is set to “None (raw)” underneath “Output Filter“
8. Tick the “custom_circles” checkbox underneath the “Associations” section
9. Save: http://snag.gy/UUbve.jpg

Now you should see your “Link” Custom Field created: http://snag.gy/ggo0h.jpg

Stage 4 – Creating another “Custom Field”
This is for the potential image in your circle.

The fields to enter in this stage are outlined in this screenshot:
http://snag.gy/lX2Px.jpg

1. Click on “Create Custom Field”: http://snag.gy/oIPiP.jpg
2. This time you want an image field. Select the “Create Image” button: http://snag.gy/RPk0t.jpg
3. In “Label” enter “Image”
4. In “Name” enter “image”
5. In the “Default Output Filter” dropdown make sure “None (raw)” is selected underneath the “Output Filter” section
6. Tick the “custom_circles” checkbox underneath the “Associations” section
7. Save: http://snag.gy/qOtj5.jpg

So you should have both your “Image” and “Link” custom fields: http://snag.gy/rOPOJ.jpg

Stage 5 – Creating a new “Custom Circle”
Now we’ll add the circle in the dashboard.

The fields that you must enter in this stage are outlined in this screenshot:
http://snag.gy/Ljbdi.jpg

Note that I’m using “Google” as an example here.

1. Click on the “Custom Circles” link in your sidebar: http://snag.gy/hxyZd.jpg
2. Then click “Add New”: http://snag.gy/gj7yc.jpg
3. In “Enter title here” enter the text that will appear in the circle
4. In “Link” enter the URL (including the “http://” bit) that you want to link to
5. You can also choose an image if you want to, but you don’t have to.
6. Press “Publish”: http://snag.gy/z8I6V.jpg

Now if you click back on the “Custom Circles” link in the sidebar: http://snag.gy/Id16z.jpg – You should be able to see the information of the circle that you’ve just made: http://snag.gy/NezIW.jpg

Stage 6 – Coding
In this section we’ll manipulate the code of the front page so that it outputs the “Custom Circles” after the regular circles.

This section assumes you have a Child Theme. If you don’t have that then set one up using Codex’s instructions first: http://codex.wordpress.org/Child_Themes

1. Copy the “index.php” file from the “Spun” theme and paste it into your Child Theme folder
2. Edit that “index.php” file from within your Child Theme folder
3. Replace all of the code in that file with the code from this PasteBin page: http://pastebin.com/UfnGhjNg
4. Save the file
5. Create a new file called “content-custom-circles.php” in your Child Theme directory
6. Edit your “content-custom-circles.php” file and put into it all of the code from this PasteBin page: http://pastebin.com/mdiA7wiZ
   Note for developers:
   The code isn’t great, so if anyone wants to contribute and improve it please do.
7. Save the file

That should be it.
You can have as many “Custom Circles” as you like.

Example 1
See an example of the result from following the steps above: http://snag.gy/Y5J7e.jpg

Example 2
See an example of the result from following the steps above and using an image in the Custom Circle: http://snag.gy/P252R.jpg

If you have any issues, please create your own thread.
http://wordpress.org/support/theme/spun#postform