Changing [/loop] and div class

  • Hello, I am new in wordpress and html. This question may be simple for a lot of you, but I don’t know the fix to it. I have such block of code from the previous developer. I want to change code about the “div class” to add in a link for each individual image, but I don’t know how to go about changing the code inside this [/loop]. It is the ‘feature courses’ and ‘rising star’ columns on the website, please click in to get a better visual.
    For example here I have a block of code of the ‘feature courses’:

    </div>
</div>
</div>
<div>
<h2>Featured Courses</h2>
<div class="grid-container">[loop query="posts_per_page=3&post_type=post&category_name=featured-courses"]
<div class="image-caption">
<div class="crop">[the_post_thumbnail]</div>
<div class="fpInfo"><div class="fpTitle">[link_with_content]</div></div>
</div>
[/loop]

    There are 3 images on the column, however, I believe there are linked together by the loop? And I cannot go in to apply a single link to each of the image. I tried coping code straight from inspect, but that use messed up the entire display.
    If anyone have done this believe, please let me know. I really want to solve this problem and make the website better.
    And a more advanced request, I also want to add arrows to both sides of the row, so it is more like a slide show that we can display more posts at the same time. Right now, it is limited to 3 posts, and we have a new post coming up. If you have an idea of how to go about this, give me a direction as well please.
    Thank you.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Those parts of your code that are in angle brackets <> are HTML tags that work in any browser. The parts that are in square brackets [] are WordPress shortcodes, which are provided by a plugin (or maybe a custom theme). The shortcode handler functions use their parameters to generate some HTML.
    The [loop] shortcode has posts_per_page=3, so if you want more you can change that 3 to a different number.
    As for how the image is linked, you would have to look into the shortcode handler function and change it there.
    If you don’t want it to be dynamic, you can do what it sounds like you attempted — pull up the page and View Source, and copy the generated HTML into your post, but you would need to remove the shortcodes (overwrite instead of add on).

    For adding arrows and more posts that are in the page, but not seen until the arrow is clicked, that’s going to take some CSS and Javascript. You might want to replace the whole thing with a post slider plugin.

    Thread Starter florencesitu

    (@florencesitu)

    Hello, thank you for your reply.
    I’ve found the loop shortcode plugin on the plugin page. However, I don’t know where to go in order to change the code associate with it. The only option that it allows on the plugin page is to activate and deactivate.
    As for the post slider plugin, because the plugins of our website is restricted by our school, we cannot add plugins on our own… can you give me some resource or some help on how to do it with css and javascript? I have some knowledge on java, and I am willing to learn.

    If you are restricted for plugins, then you certainly can’t be changing their code.
    Plugin questions should be asked at the plugin’s support forum.

    To learn CSS or Javascript, you need to find a tutorial or ask at StackOverflow or read a Reference site like MDN.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing [/loop] and div class’ is closed to new replies.