WordPress.org

Forums

Spun
[resolved] Adding extra no-post circles (7 posts)

  1. LLB
    Member
    Posted 1 year ago #

    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!

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    See next post.

  3. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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

    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

    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

    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

    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 "Default Value" enter "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

    So you should have both your "Image" and "Link" custom fields: 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

    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

    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 "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

      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:
    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 (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

  4. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    If you need any additional information just say.

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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://"

    You probably don't want to do that because every time you edit a post the default value will be "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://". The code isn't clever and will consider anything typed into the "Link" Custom Field as a link and try to use that.

  6. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    The following is an improvement.

    Step 3. of the following section could be improved

    Coding

    Specifically this section:

    http://pastebin.com/WVbvPdEz

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

    The code now checks to see if "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).

  7. scm
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.