Edin Theme – Grid Page – modify position of Child Post grid on page

  • Unknown's avatar
    synergymindandbody · Member ·

    I am using the CHild Post grid page as a navigation tool on my blog – http://www.healthhabits.ca.

    Each parent page has a grid feature which shows Child Pages / Sub-Categories , allowing my readers to navigate more effectively

    Each parent page also uses a taxonomy script to chronologically list posts for a the parent-category. 

    [display-posts taxonomy="category" tax_term="Health" taxonomy_2="category" tax_2_term="2014" posts_per_page="100"]
[display-posts taxonomy="category" tax_term="Health" taxonomy_2="category" tax_2_term="2014" offset="100" posts_per_page="500"]

    I am pretty happy with this set-up, but…

    I have/had 2 problems with the default.

    1. I did not like how the first few lines of the child page was used as excerpt text on the grid on the parent page.

    I fixed this by using the following CSS change…

    .page .entry-summary {
    display: none;
    }

    This allowed me to remove the excerpt altogether. I was hoping to replace the automatic “child page” excerpt with a custom one, but I couldn’t figure it out. With that said, the no-excerpt option works great for the mobile version of my site and I think I will leave it as is.

    Problem #2

    I don’t want the “child-page” grid to be located at the bottom of the page.

    With this layout, I have…

    – Into text at the top of the page
    – Chronological list of articles in the middle
    – Grid at the bottom.

    I would like to move the grid higher up on the page – in between the Intro & the chronological list if possible

    If that’s not possible, placing the grid at the top, with some intro text second & the chronological list third might be okay.

    Any ideas?

    Here are some links to illustrate my dilemma

    Parent page

    http://healthhabits.ca/home/health-articles/

    Child page

    http://healthhabits.ca/home/health-articles/western-medicine-science/

    Grandchild??? page

    http://healthhabits.ca/home/health-articles/western-medicine-science/healthcare/

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

  • Unknown's avatar
    synergymindandbody · Member ·

    I am using the CHild Post grid page as a navigation tool on my blog – http://www.healthhabits.ca.

    Each parent page has a grid feature which shows Child Pages / Sub-Categories , allowing my readers to navigate more effectively

    Each parent page also uses a taxonomy script to chronologically list posts for a the parent-category.

    [display-posts taxonomy="category" tax_term="Health" taxonomy_2="category" tax_2_term="2014" posts_per_page="100"]
[display-posts taxonomy="category" tax_term="Health" taxonomy_2="category" tax_2_term="2014" offset="100" posts_per_page="500"]

    I am pretty happy with this set-up, but…

    I have/had 2 problems with the default.

    1. I did not like how the first few lines of the child page was used as excerpt text on the grid on the parent page.

    I fixed this by using the following CSS change…

    .page .entry-summary {
    display: none;
    }

    This allowed me to remove the excerpt altogether. I was hoping to replace the automatic “child page” excerpt with a custom one, but I couldn’t figure it out. With that said, the no-excerpt option works great for the mobile version of my site and I think I will leave it as is.

    Problem #2

    I don’t want the “child-page” grid to be located at the bottom of the page.

    With this layout, I have…

    – Into text at the top of the page
    – Chronological list of articles in the middle
    – Grid at the bottom.

    I would like to move the grid higher up on the page – in between the Intro & the chronological list if possible

    If that’s not possible, placing the grid at the top, with some intro text second & the chronological list third might be okay.

    Any ideas?

    Here are some links to illustrate my dilemma

    Parent page

    http://healthhabits.ca/home/health-articles/

    Child page

    http://healthhabits.ca/home/health-articles/western-medicine-science/

    Grandchild??? page

    http://healthhabits.ca/home/health-articles/western-medicine-science/healthcare/

    The blog I need help with is healthhabits.ca.

  • Unknown's avatar
    jeremeylduvall · Member ·

    I was hoping to replace the automatic “child page” excerpt with a custom one, but I couldn’t figure it out. With that said, the no-excerpt option works great for the mobile version of my site and I think I will leave it as is.

    You can set a custom excerpt for a page using the Excerpt module shown here:

    http://d.pr/i/12zjP

    That should be on every edit page. If you don’t see that option for some reason, can you check to make sure Excerpt is checked off under the Screen Options menu shown here?

    http://d.pr/i/1lybZ

    Then, we can still hide the excerpt on mobile devices by modifying the CSS to this:

    @media screen only and (max-width: 480px) {
.page .entry-summary {
display: none;
}
}

    Can you give that a try?

    I don’t want the “child-page” grid to be located at the bottom of the page.

    I tried several methods, but I don’t believe this is going to be possible with just CSS. The main way to rearrange the order would be to change the page template files to move the grid area further up the page. That isn’t possible at WordPress.com.

  • Unknown's avatar
    synergymindandbody · Member ·

    Thanks Jeremy

    I will give your excerpt sol’n a try

    Re moving the grid, thanks for trying

    DOug

  • Unknown's avatar
    synergymindandbody · Member ·

    Jeremy,

    Putting in the custom excerpt worked :)

    However, the excerpts (custom & non – I only changed one as a test) showed up on my cell, tablet & the preview screen.

    Just fyi, this is the css I was using to remove the excerpts in the first place

    .home .entry-summary {
	display: none;
}

.page-title {
	display: none;
}

.page .entry-summary {
	display: none;
}
  • Unknown's avatar
    jeremeylduvall · Member ·

    Well shoot – that’s what I get for not testing properly. Sorry about that! This should work:

    @media screen and (max-width: 1024px) {
	.home .grid .entry-summary {
		display: none;
	}

	.grid .page-title {
		display: none;
	}

	.grid .page .entry-summary {
		display: none;
	}
}

    I also added the grid class so that it wouldn’t remove other page titles (like @healthhabits in the main header).

    Regarding moving the grid, we could try to move it underneath the navigation breadcrumbs here:

    http://d.pr/i/dfQi

    It wouldn’t break up the page content. It would just sit above the page content. Would that work? If so, we can give that a try.

  • The topic ‘Edin Theme – Grid Page – modify position of Child Post grid on page’ is closed to new replies.