Title: Adding extra no-post circles Last modified: August 21, 2016 --- # Adding extra no-post circles * Resolved [LLB](https://wordpress.org/support/users/llb/) * (@llb) * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/) * Hello! * Would like to know how to add extra circles that look like posts, however are not linked to one. And it would be great if I could link those circles to somewhere else. * Thank you! Viewing 6 replies - 1 through 6 (of 6 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410678) * See next post. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410685) * Install this plugin: [http://wordpress.org/plugins/custom-content-type-manager/](http://wordpress.org/plugins/custom-content-type-manager/) * Go to the “Custom Content Types” main section of the dashboard: [http://snag.gy/Tp0Rg.jpg](http://snag.gy/Tp0Rg.jpg) * **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](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](http://snag.gy/DjlKK.jpg) 3. Then go to the “Fields” tab [http://snag.gy/QSVsF.jpg](http://snag.gy/QSVsF.jpg) 4. Make sure only the “Title” and “Supports Custom Fields” checkboxes are ticked: [http://snag.gy/ysQw9.jpg4](http://snag.gy/ysQw9.jpg4) 5. Then press the “Create New Content Type” button [http://snag.gy/LpKAW.jpg](http://snag.gy/LpKAW.jpg) * You should then see your Custom Content Type that you just created: [http://snag.gy/G3wpz.jpg](http://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: [http://snag.gy/hSV7x.jpg](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](http://snag.gy/30H9F.jpg) 2. Select “Create Custom Field”: [http://snag.gy/HvRr5.jpg](http://snag.gy/HvRr5.jpg) 3. Select the “Create Text” button: [http://snag.gy/jaGay.jpg](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](http://snag.gy/UUbve.jpg) * Now you should see your “Link” Custom Field created: [http://snag.gy/ggo0h.jpg](http://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: [http://snag.gy/KrYTQ.jpg](http://snag.gy/KrYTQ.jpg) 1. Click on “Create Custom Field”: [http://snag.gy/oIPiP.jpg](http://snag.gy/oIPiP.jpg) 2. This time you want an image field. Select the “Create Image” button: [http://snag.gy/RPk0t.jpg](http://snag.gy/RPk0t.jpg) 3. In “**Label**” enter “Image” 4. In “**Name**” enter “image” 5. In “**Default Value**” enter “[http://”](http://”); 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: [http://snag.gy/qOtj5.jpg](http://snag.gy/qOtj5.jpg) * So you should have both your “Image” and “Link” custom fields: [http://snag.gy/rOPOJ.jpg](http://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: [http://snag.gy/Ljbdi.jpg](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](http://snag.gy/hxyZd.jpg) 2. Then click “Add New”: [http://snag.gy/gj7yc.jpg](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://”](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](http://snag.gy/z8I6V.jpg) * Now if you click back on the “Custom Circles” link in the sidebar: [http://snag.gy/Id16z.jpg](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](http://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: [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/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: [http://pastebin.com/WVbvPdEz](http://pastebin.com/WVbvPdEz) 4. 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: 5. ``` /* Get custom circles */ ``` 6. 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: [http://snag.gy/Y5J7e.jpg](http://snag.gy/Y5J7e.jpg) * And here’s an example result of me following those steps but using an image in my Custom Circle: [http://snag.gy/9v7yG.jpg](http://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: [http://snag.gy/P252R.jpg](http://snag.gy/P252R.jpg) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410690) * If you need any additional information just say. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410754) * Actually step **5.** underneath the following section is a mistake: * > **Creating another “Custom Field”** * So this specifically is a mistake: * > In “Default Value” enter “[http://”](http://”); * You probably don’t want to do that because every time you edit a post the default value will be “[http://”](http://”); – 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 “ [http://”](http://”);. The code isn’t clever and will consider anything typed into the “Link” Custom Field as a link and try to use that. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 5 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410756) * The following is an improvement. * Step **3.** of the following section could be improved * > **Coding** * Specifically this section: * > [http://pastebin.com/WVbvPdEz](http://pastebin.com/WVbvPdEz) * which can be replaced with this PasteBin page: [http://pastebin.com/E02Ai6eS](http://pastebin.com/E02Ai6eS) * The code now checks to see if “[http://”](http://”); is in the “Link” Custom Field and if it isn’t it adds it to the circle (on the website not in the dashboard). * [scm](https://wordpress.org/support/users/smangine/) * (@smangine) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410853) * 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. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Adding extra no-post circles’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/spun/2.0.2/screenshot.png) * Spun * [Support Threads](https://wordpress.org/support/theme/spun/) * [Active Topics](https://wordpress.org/support/theme/spun/active/) * [Unresolved Topics](https://wordpress.org/support/theme/spun/unresolved/) * [Reviews](https://wordpress.org/support/theme/spun/reviews/) * 6 replies * 3 participants * Last reply from: [scm](https://wordpress.org/support/users/smangine/) * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/adding-extra-no-post-circles/#post-4410853) * Status: resolved