Adding extra no-post circles

See next post.

Install this plugin: https://www.ads-software.com/plugins/custom-content-type-manager/

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

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

1. Press the “Create Content Type” button https://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”
   https://snag.gy/DjlKK.jpg
3. Then go to the “Fields” tab https://snag.gy/QSVsF.jpg
4. Make sure only the “Title” and “Supports Custom Fields” checkboxes are ticked: https://snag.gy/ysQw9.jpg4
5. Then press the “Create New Content Type” button https://snag.gy/LpKAW.jpg

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

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: https://snag.gy/hSV7x.jpg

1. Click on “Custom Fields” at the top of that same page in the dashboard: https://snag.gy/30H9F.jpg
2. Select “Create Custom Field”: https://snag.gy/HvRr5.jpg
3. Select the “Create Text” button: https://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: https://snag.gy/UUbve.jpg

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

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:
https://snag.gy/KrYTQ.jpg

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

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

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:
https://snag.gy/Ljbdi.jpg

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

1. Click on the “Custom Circles” link in your sidebar: https://snag.gy/hxyZd.jpg
2. Then click “Add New”: https://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 “https://” 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”: https://snag.gy/z8I6V.jpg

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

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: https://codex.www.ads-software.com/Child_Themes

1. Copy the “content-home.php” file from the “Spun” theme and paste it into your Child Theme folder
2. Edit that “content-home.php” file from within your Child Theme folder
3. Replace all of the code in that file with the code from this PasteBin page: https://pastebin.com/WVbvPdEz

   The code isn’t great, so if anyone wants to contribute and improve it please do. The part I’ve modified is headed with this comment:

   /* Get custom circles */

4. Save the file

Results
That should be it.

You can have as many “Custom Circles” as you like.

Here’s an example result of me following those steps:
https://snag.gy/Y5J7e.jpg

And here’s an example result of me following those steps but using an image in my Custom Circle: https://snag.gy/9v7yG.jpg (the second image is my “Google” Custom Circle that I’ve applied an image to).
When I hover my mouse over the image I get the title of the Custom Circle and the image zooms out a little bit as by Spun’s design: https://snag.gy/P252R.jpg

If you need any additional information just say.

Actually step 5. underneath the following section is a mistake:

Creating another “Custom Field”

So this specifically is a mistake:

In “Default Value” enter “https://”

You probably don’t want to do that because every time you edit a post the default value will be “https://” – Then you’ll save that post and even if you didn’t enter a link in your “Link” Custom Field it’ll be set as “https://”. The code isn’t clever and will consider anything typed into the “Link” Custom Field as a link and try to use that.

The following is an improvement.

Step 3. of the following section could be improved

Coding

Specifically this section:

https://pastebin.com/WVbvPdEz

which can be replaced with this PasteBin page: https://pastebin.com/E02Ai6eS

The code now checks to see if “https://” is in the “Link” Custom Field and if it isn’t it adds it to the circle (on the website not in the dashboard).

I am implementing this same solution on my site, but when I add custom circles it automatically generates as many duplicate circles as I have posts. In other words – I have 5 posts, so when I create a custom circle that same circle appears 5 times also. Any ideas about what’s going wrong? Thanks for any help.