How to make a 3 column portfolio template?

Homepage › Community Forums › Optimal Theme Support › How to make a 3 column portfolio template?

Tagged: 

  • This topic has 8 replies, 2 voices, and was last updated 11 years ago by Wes.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 22, 2013 at 12:18 pm #3299
    Corl DeLuna
    Customer

      Hi Wes,

      The How to Setup the Portfolio was easy to follow. I immediately wondered how would I make portfolio pages that have 3 columns, with thumbnails sized to match the portfolio blocks? Do I make a new page template for example “page_portfolio_3_col.php”? I’m extremely new to WordPress coding, so while to can read the intent of the code – I have no idea what I’d edit to get the results I’m looking for. Or is there a better way?

      Thanks,

      Corl

       

      March 22, 2013 at 12:27 pm #3300
      Wes
      Moderator

        You would need to be familiar with css (both regular and responsive) in order to do this. You wouldn’t need to create a separate template unless you want multiple portfolio pages with 4 columns and 3 columns as well.

        If you’re good with css, then you can take a look in the portfolio section specifically for – “#content .portfolio” and you can make the adjustments from there.

        You’ll also need to adjust the image sizes for the portfolio section of your css….as well as the “Image Size” section in your functions file for – “portfolio-thumbnail“

        March 22, 2013 at 3:44 pm #3305
        Corl DeLuna
        Customer

          Hi Wes,

          I was hoping to use both 4 and 3 column portfolio page templates.

          My guess from your answer would be to copy the existing page_portfolio.php page template, rename it page_portfolio_3_col.php.

          Give it a new title: // Template Name: Portfolio 3 Col

          In functions.php add a new image size:
          add_image_size( ‘portfolio-thumbnail-3’, 310, 200, TRUE );

          What’s the best way to add my css to preserves it when you update the theme? I like WordPress’s arrangement of keeping the parent and child style.css separate.

          Where would I add the corresponding HTML for a new #content .portfolio-3 and portfolio-thumbnail-3 classes I’d be creating?

          Thanks so much,
          Corl

          March 22, 2013 at 8:24 pm #3311
          Corl DeLuna
          Customer

            Hi Wes,

            I wanted you to know that I figured out the part of the problem involving separating the parent and child style.css files.

            Towards the top of the function.php I added:

            /** Add a custom.css file to the child theme folder */
            add_action( ‘wp_enqueue_scripts’, ‘enqueue_custom_stylesheet’ );
            function enqueue_custom_stylesheet() {
            wp_register_style( ‘custom-css’, get_stylesheet_directory_uri() . ‘/style_custom.css’ );
            wp_enqueue_style( ‘custom-css’ );
            }

            I simply created style_custom.css in the child folder for all my css modifications. The style_custom.css file will be pulled in after the style.css file so my custom CSS code will overwrite any default CSS code. Will do the same to add a print.css file later.

            I look forward to hearing from you on the main question of how to add the corresponding HTML for any new .portfolio-3 div classes to a new page_portfolio_3_col.php.

            Have a great weekend man,

            Corl

            March 22, 2013 at 11:53 pm #3316
            Wes
            Moderator

              You can take a look in your portfolio file and change the image class under –

              /**
              * Adds Featured Image and links it to the Post

              (the first featured image section)

              Then create the new class in your css and add whatever size you need, and that’s it.

              March 23, 2013 at 5:57 pm #3341
              Corl DeLuna
              Customer

                Sorry I can’t find that line anywhere in page_portfolio.php or functions.php for Optimal.

                March 23, 2013 at 11:59 pm #3350
                Wes
                Moderator

                  Here is the exact text –

                  // Add Featured Image for the Portfolio posts in this Page Template

                  ….you can edit the code right under it.

                  March 24, 2013 at 2:19 pm #3363
                  Corl DeLuna
                  Customer

                    Thanks so much Wes. Let’s see what I can do to edit that to get my desired outcome.

                    March 24, 2013 at 2:35 pm #3365
                    Wes
                    Moderator

                      You’re Welcome!

                    • Author
                      Posts
                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • You must be logged in to reply to this topic.