WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[closed] Created a custom page for category posts, circles got sloppy! (36 posts)

  1. amanduhb52
    Member
    Posted 8 months ago #

    Hello!

    My website is amandabloom.com.

    I'm really digging Spun and having fun playing around with it. I've amended the front page to display pages instead of posts, and I gave also created a custom page template based on the index.php file to create a page for my "Blog" section, which will be a feed of all my posts categorized as "Blog."

    My goal in creating the custom template was to create a feed for specific posts and have it look exactly like the front page, lovely circles and all. I got the feed going, but my circles have gone all floppy! Another post with a featured image is a square. You can see what happened with this Blog page here: amandabloom.com/blog.

    I'm probably missing something in my custom page template. I'll copy it here. Any insight would be much appreciated! I'm planning on doing the same thing with another custom page template to create a "Portfolio" posts page.

    <?php
    /**
     * Template Name: Blog Template
     *
     *A jerryrigged file for the Blog page pulled from Spun's main index file.
     *
     * @package Spun
     * @since Spun 1.0
     */
    
    get_header(); ?>
    
    		<div id="primary" class="content-area">
    			<div id="content" class="site-content" role="main">
    			<?php if ( is_home() && ! is_paged() ) : ?>
    
    				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    			<?php endif; ?>
    
    			<?php if ( have_posts() ) : ?>
    <?php query_posts('post_category=blog'); ?>
    				<?php /* Start the Loop */ ?>
    
    				<?php while ( have_posts() ) : the_post(); ?>
    
    					<?php
    						/* Include the Post-Format-specific template for the content.
    						 * If you want to overload this in a child theme then include a file
    						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    						 */
    						get_template_part( 'content', 'home' );
    					?>
    
    				<?php endwhile; ?>
    
    				<?php spun_content_nav( 'nav-below' ); ?>
    
    			<?php elseif ( current_user_can( 'edit_posts' ) ) : ?>
    
    				<?php get_template_part( 'no-results', 'index' ); ?>
    
    			<?php endif; ?>
    
    			</div><!-- #content .site-content -->
    		</div><!-- #primary .content-area -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  2. ShaiRoelud
    Member
    Posted 8 months ago #

    I had the same problem initially (I have a page where I'm generating circles on a parent page from its child pages) and I managed to solve it. Problem is, it has been a while so I cannot exactly remember how I did it.

    But I think it has to do with this:
    get_template_part( 'content', 'home' );

    Initially I had it set up like you as well but I got all kinds of weird shapes and sizes of the circles. I noticed when using firebug, that some CSS code wasn't applied to the circles on my parent page (I think it was some of the .hentry code).

    What I think solved it, was that I made a copy of content-home.php in my child theme and renamed it to content-something.php file (in your case that would probably be content-blog.php or a name that makes it clear that it relates to your blog).

    I then changed the code above in the page template file to:
    get_template_part( 'content', 'something' );

    And that did the trick (see http://www.cameronlab.com, the research page). As long as you have a backup of your site, you might want to give this a go.

    Good luck,
    Cheers,
    Roel

  3. amanduhb52
    Member
    Posted 8 months ago #

    Thanks for the tip Roel.

    I did as you instructed and still have sloppy circles. Do you see any thing else in your code that might offer a fix, maybe in the content_something.php file?

  4. amanduhb52
    Member
    Posted 8 months ago #

    I'm noticing something strange on the Blog page when inspecting Firebug. The html is calling up a convoluted body class:

    <body class="page page-id-2 page-template page-template-page-blog-php">

    When I change that class (in Firebug) to just "page-blog-php" things look more normal, though the post with a featured image is still just a big image block.

  5. ShaiRoelud
    Member
    Posted 8 months ago #

    I'll try and have a look, but it might take a while, 'cause I'm really busy.

  6. ShaiRoelud
    Member
    Posted 8 months ago #

    Mine has a similar body class:

    <body class="page page-id-9 page-parent page-template page-template-research-index-php">

    I do notice a difference between your template file and mine though. You might be missing some code. Yours looks like this:

    <?php
    /**
    * Template Name: Blog Template
    *
    *A jerryrigged file for the Blog page pulled from Spun's main index file.
    *
    * @package Spun
    * @since Spun 1.0
    */

    get_header(); ?>

    And mine looks like this:

    <?php
    /**
    * @package Spun
    * @since Spun 1.0
    */

    /*
    Template Name: Research menu
    */
    ?>

    <?php get_header(); ?>

    Do you see the difference in <?php and ?>. Don't know if that causes it or not though, but when I look at your file in TextWrangler it doesn't appear to see it as code. In mine certain commands light up in blue or pink, but yours is all black.

    I remember having the same problem with the featured image turning up square, so in the end I just decided to go for text-only circles on that page, so I don't think I've solved that.

  7. amanduhb52
    Member
    Posted 8 months ago #

    Thanks Roel. Gave that a whirl and no difference yet. Now the top of my code looks like this, just copied and pasted yours:

    <?php
    /**
    * @package Spun
    * @since Spun 1.0
    */
    
    /*
    Template Name: Blog Template
    */
    ?>
    
    <?php get_header(); ?>
  8. amanduhb52
    Member
    Posted 8 months ago #

    Roel, I'm looking at both our sites with Firebug, and I see your Research page calls up CSS styling via Spun but mine does not. Your Research page calls this:

    @import "../spun/style.css";
    .entry-content, .entry-summary, .entry-title, .entry-title a, .blog .hentry span.hometitle, .hentry.no-thumbnail span, .widget {
        font-family: "Trebuchet MS","Playfair Display","Times New Roman",serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: "Trebuchet MS","Playfair Display","Times New Roman",serif;
    }
    .entry-title, .entry-title a {
    }
    .entry-content {
    }
    .widget-title {
        font-size: 2rem;
    }
    #masthead {
        position: fixed;
        top: 40px;
    }
    #masthead {
        opacity: 0.7;
    }
    #primary {
        margin: 8em 12em 1.5em;
        padding: 0;
        width: 100%;
    }
    .page-id-9 #primary {
        margin: 8em 12em 1.5em;
        padding: 0;
        width: 100%;
    }
    .blog #content {
        width: 40em;
    }
    .page-id-9 #content {
        width: 40em;
    }
    .hentry {
        background: none repeat scroll 0 0 #FFFFFF;
        float: left;
        height: 180px;
        margin: 10px;
        padding: 0;
        position: relative;
        table-layout: fixed;
        width: 180px;
    }
    .blog .hentry a .attachment-post-thumbnail, .archive .hentry a .attachment-post-thumbnail, .search .hentry a .attachment-post-thumbnail {
        opacity: 0.3;
    }
    .blog .hentry a .attachment-post-thumbnail, .archive .hentry a .attachment-post-thumbnail, .search .hentry a .attachment-post-thumbnail {
        filter: none;
    }
    .hometitle {
        color: #444444;
        display: table-cell;
        font-size: 2rem;
        font-style: italic;
        text-align: center;
        vertical-align: middle;
        z-index: 1999;
    }
    .blog .hentry span.hometitle {
        color: #000099;
        padding: 70px 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .blog .hentry span.hometitle:hover {
        color: #FFFFFF;
        text-shadow: 2px 2px 3px #000000;
    }
    .blog .hentry .page .hentry {
        position: relative;
    }
    .hentry.no-thumbnail span {
        color: #000099;
        font-size: 1.8rem;
        font-style: italic;
        text-align: center;
    }
    .hentry.no-thumbnail span:hover {
        background: none repeat scroll 0 0 #444444;
        color: #FFFFFF;
    }
    .sticky {
    }
    .single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
        height: auto;
        margin: 8em 10em 1.5em;
        padding: 0;
        width: 700px;
        z-index: 10;
    }
    h1 {
        margin: 0.2em 0;
    }
    h3 {
        margin: 0 0;
    }
    p {
        font-size: 90%;
    }
    a {
        color: #000099;
    }
    a:visited {
        color: #333333;
    }
    a:visited {
        color: #000099;
    }
    a:hover, a:focus, a:active {
        color: #999999;
    }
    .page-links a:hover span.active-link, .page-links span.active-link {
        background: none repeat scroll 0 0 #C1BFB6;
        color: #FFFFFF;
        transition: all 0.4s ease-in-out 0s;
    }
    .sidebar-link {
        cursor: none;
        display: none;
    }
    #colophon {
        display: none;
    }
    .entry-meta {
        visibility: hidden;
    }
    #secondary {
        clear: both;
        display: block;
        font-size: 1.6rem;
        font-weight: 100;
        padding: 0;
        position: fixed;
        top: 150px;
    }
    .widget-column {
        width: 200%;
    }
    .page-id-9 .hentry {
        float: left;
        height: auto;
        margin: 10px;
        padding: 0;
        width: 180px !important;
        z-index: 10;
    }
    .alignleft {
        display: inline;
        float: left;
        margin-bottom: 0.75em;
        margin-right: 0.75em;
        margin-top: 0.3em;
    }

    Mine calls only this:

    @font-face {
        font-family: "Cutive";
        font-style: normal;
        font-weight: 400;
        src: local("Cutive"), local("Cutive-Regular"), url("http://themes.googleusercontent.com/static/fonts/cutive/v4/GTdET3RjFTKEAlQ1kQzjTuvvDin1pK8aKteLpeZ5c0A.woff") format("woff");
    }

    I wonder if I need to be somehow "importing" CSS from the main Spun file in my page-blop.php file or the content-blog.php file.

  9. ShaiRoelud
    Member
    Posted 8 months ago #

    I'll have a look at my child style.css file. I do know that the .page-9-id code refers to my research page, so I guess you need some css code in your child theme style.css for your blog page as well.

    Sorry that I can't be of more help. This was the first website I built and it was a slow and sometimes painful process. :) But I did learn a lot.

  10. amanduhb52
    Member
    Posted 8 months ago #

    Well done for a first website! I'm impressed.

    I think you're right with the CSS styling. I can see an area for "Homepage" styling in the CSS, and I copied and pasted this and renamed it "Blogpage." Not sure if this is the right path, and I'm not sure where or how to reference the styling in my php files.

    You are being very helpful! Thank you for your time.

  11. amanduhb52
    Member
    Posted 8 months ago #

    I also noticed that your Research page is named research-index.php. I wonder if that is relevant.

  12. wouterdeprez
    Member
    Posted 7 months ago #

    How did you manage to have the frontpage display pages instead of posts??

    Thanks a lot in advance!

  13. amanduhb52
    Member
    Posted 7 months ago #

    Hey Wouter,

    Insert this code in your index.php file:

    <?php query_posts('post_type=page'); ?>

    It should read like this:

    <?php
    /**
     * The main template file.
     *
     * This is the most generic template file in a WordPress theme
     * and one of the two required files for a theme (the other being style.css).
     * It is used to display a page when nothing more specific matches a query.
     * E.g., it puts together the home page when no home.php file exists.
     * Learn more: http://codex.wordpress.org/Template_Hierarchy
     *
     * @package Spun
     * @since Spun 1.0
     */
    
    get_header(); ?>
    
    		<div id="primary" class="content-area">
    			<div id="content" class="site-content" role="main">
    			<?php if ( is_home() && ! is_paged() ) : ?>
    
    				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    			<?php endif; ?>
    <h2>This website is under construcción.</h2><br /><br />
    			<?php if ( have_posts() ) : ?>
    <?php query_posts('post_type=page'); ?>
    				<?php /* Start the Loop */ ?>
    ...

  14. amanduhb52
    Member
    Posted 7 months ago #

    Whoops, you'll probably want to take my text out of that code:

    <h2>This website is under construcción.</h2><br /><br />

  15. ShaiRoelud
    Member
    Posted 7 months ago #

    Amanda, I don't know why it isn't working. Below you can find what I think I did. Even though I already described it earlier, I might have missed a step or you did while trying, so I hope this is clearer.

    Try this...after you made sure you have a backup of your site of course :)

    Make a copy of the index.php file into your child theme folder and rename it to (for instance) blog-index.php.

    Add this in the beginning:

    /*
    Template Name: Blog menu
    */

    and change
    get_template_part( 'content', 'home' ); to get_template_part( 'content', 'blog' );

    Next, make a copy of the content-home.php file into your child theme folder and call it content-blog.php. I don't think I made any changes to that one.

    Now (and I think I missed that step when I wrote you earlier) go into your WordPress dashboard and go to the page where you have your blog. Go to "Page Attributes" on the right and go to the Template Dropdown Menu. It should give you the choice to select Blog Menu or whatever you called. Select it and update the page.

    And I think it should work then. I've added code to my child theme css that is just related to how I want to organize the circles etc. so you might have to do that as well, but first give this a try.

    Cheers,
    Roel

  16. amanduhb52
    Member
    Posted 7 months ago #

    No go Roel. I think the key here is the CSS.

  17. Banjer
    Member
    Posted 7 months ago #

    Hi , I would like to use the same solution you are trying for your site.

    First of all I manage the homepage to have pages and not articles, but really I would like to have categoryies and not pages...it is this possible?

    I would like to have at least 3 circles and every circles is a category, clicking on then the visitor is target on an another page where are the articles... you can help me?
    I just made a topic but I think you and Roel are the only two who are near the solution I am looking for ( hoping you understand my poor english :) )

    Thanks a lot
    Banjer

  18. Banjer
    Member
    Posted 7 months ago #

  19. ShaiRoelud
    Member
    Posted 7 months ago #

    @ Amanda: I'll try to have another look at my CSS but it will probably be at the end of this week.

    @ Banjer: Unfortunately, I don't use categories, so I don't have any experience with that.

  20. Banjer
    Member
    Posted 7 months ago #

    ok thank you ...but how do you do to have articles on this page http://www.cameronlab.com/research/

    I have set the home to have page but when I write a new article how can I do to target them to one particular page as you did with reserch and Amanda with blog??

  21. Banjer
    Member
    Posted 7 months ago #

    ok thank you ...but how do you do to have articles on this page http://www.cameronlab.com/research/

    I have set the home to have page but when I write a new article how can I do to target them to one particular page as you did with reserch and Amanda with blog??

  22. ShaiRoelud
    Member
    Posted 7 months ago #

    The articles on that page are child pages of the research page, not categories. How Amanda did hers I don't know.

  23. Banjer
    Member
    Posted 7 months ago #

    Could you so kind to explain how to code it, I am not sure to understand how exactly work.

  24. ShaiRoelud
    Member
    Posted 7 months ago #

    I can, but unfortunately not right now. I'll get back to you when I have a little more time. Sorry about that.

  25. Banjer
    Member
    Posted 7 months ago #

    Don't worry, I don't mean now, when you have a little more time I will appreciate your help, thanks

  26. amanduhb52
    Member
    Posted 7 months ago #

    Banjer, I think you need to include this code on your index.php file:

    <?php query_posts('post_type=category'); ?>

    So the top of your code should look like this:

    <?php
    /**
     * The main template file.
     *
     * This is the most generic template file in a WordPress theme
     * and one of the two required files for a theme (the other being style.css).
     * It is used to display a page when nothing more specific matches a query.
     * E.g., it puts together the home page when no home.php file exists.
     * Learn more: http://codex.wordpress.org/Template_Hierarchy
     *
     * @package Spun
     * @since Spun 1.0
     */
    
    get_header(); ?>
    
    		<div id="primary" class="content-area">
    			<div id="content" class="site-content" role="main">
    			<?php if ( is_home() && ! is_paged() ) : ?>
    
    				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    			<?php endif; ?>
    			<?php if ( have_posts() ) : ?>
    <?php query_posts('post_type=category'); ?>
    				<?php /* Start the Loop */ ?>
  27. Banjer
    Member
    Posted 7 months ago #

    I will try and let you know as soon as possible .... thank you :)

  28. Banjer
    Member
    Posted 7 months ago #

    NO , now every circles is disappeared!

  29. amanduhb52
    Member
    Posted 7 months ago #

    Sorry, that was a guess. You should probably start a new thread for this issue.

  30. Banjer
    Member
    Posted 7 months ago #

    Don't worry Amanda, and thank you very much, but I just posted two thread and no one have answerd.
    But yours solution it is what I am looking for, I only want to apply on every pages.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic