Using CSS Shortcode with DailyMag

  • missionmidwest · Member ·

    (Yes, I do have the Premium upgrade so I am able to edit the CSS.)

    I am currently using the DailyMag theme. On my primary menu (displayed horizontally under the site heading) I’ve displayed my various category pages. For each of these category pages, I’d like for the categorized posts to be listed underneath the title (without the “Category:” prefix) and a brief description of the category.

    To accomplish this, it’s been recommended to me that I replace each category page with a static page and use the Display Posts shortcode to display categorized posts on their corresponding (static) pages. Unfortunately, I’m very much a novice when it comes to CSS. I’ve found the Display Posts Shortcode page but I’m not sure where in the CSS Customizer window to place the code, i.e. which selector to use, etc.

    I want to make sure that I am able to use this shortcode for each of the 6-7 pages for which I want to display categorized posts. Thank you in advance for any guidance!

    The blog I need help with is: (visible only to logged in users)

  • keegansingh · Member ·

    Hi there,

    You can place your shortcode directly into your page editor, the same place you would put the content of your page. Shortcodes won’t display on the front end, they will be replaced with your posts. You can get to your pages here – https://wordpress.com/pages/

    Here is the shortcode you need to select a specific category –

    [display-posts category="enter-category-here" posts_per_page="-1" include_date="true" order="ASC" orderby="title"]

    Please let me know if this works :)

  • missionmidwest · Member ·

    Thanks @keegansingh — looks like it’s working, although I tacked on the argument image_size=”thumbnail” and the images are right on top of each other. Any way to insert a space between post titles/images?

  • uxcitizen · Member ·

    You can add space around the images following code into your CSS Customizer: 

    .alignleft {
  margin-bottom: .5rem;
}

    Additionally, if you would like to get rid of the bullets that are showing up at the beginning of your list items, you can add the following: 

    .display-posts-listing {
  list-style: none;
}
  • uxcitizen · Member ·

    Let me revise my earlier answer; I apologize for the multiple replies.

    Thinking about it a bit more, it is probably safer to provide a more specific selector for the first snipped (to ensure you don’t accidentally add margin to elements somewhere else in your site with the class .alignleft.

    This is a bit better: 

    .display-posts-listing li a.alignleft {
  margin-bottom: .5rem;
}
  • missionmidwest · Member ·

    @uxcitizen Thanks! This appears to have worked. I appreciate the help!

  • uxcitizen · Member ·

    @missionmidwest no problem! happy to help with customizing your site!

  • The topic ‘Using CSS Shortcode with DailyMag’ is closed to new replies.