Maak een portfolio-website met Custom Post Types – deel 1

Veel themes hebben tegenwoordig een ingebouwde portfolio met Custom Post Types. De meeste kant-en-klare (Genesis) portfolio childthemes hebben echter geen portfolio-categorieën, en dat wil ik juist wel. Dan maar zelf iets in elkaar knutselen.

Ik heb gewerkt met door mij zelf gemaakte Genesis childthemes, in twee verschillende websites: mijn nieuwe website voor Alva Design (nog niet publiek) en Nine Kullberg – schilderijen en tekeningen.

Voorbeeld van het eindresultaat:

Portfolio-Nine-Kullberg

Hieronder leg ik stap voor stap uit hoe ik te werk ben gegaan.

1. Installeer de plugin Portfolio Post Type

Deze plugin maakt het Custom Post Type “Portfolio” aan met de mogelijkheid om portfolio categorieën en -tags toe te voegen.

Je Dashboard is nu uitgebreid met het Custom Post Type Portfolio en je kunt zelf categorieën (en tags) aanmaken.

Portfolio CPT in dashboard

2. Voeg de volgende bestanden toe aan je child theme

  • single-portfolio.php
  • archive-portfolio.php (dit was bij Nine Kullberg niet nodig)
  • en eventueel (bij meerdere categorieën): taxonomy.php (dit kan dezelfde inhoud hebben als archive-portfolio.php) (dit was bij Nine Kullberg ook niet nodig)

3. Voeg de volgende regels toe aan functions.php in je child theme

[code]

/** Add new image sizes */

add_image_size( ‘portfolio’, 330, 230, TRUE );

[/code]

Dit is voor de archieven van de categorieën in het portfolio.

Bij het uploaden van een nieuw plaatje wordt dan automatisch ook een versie van 330 x 230 px aangemaakt en deze wordt gebruikt in de archive-portfolio.php en in taxonomy.php.

4. Voeg regels voor de opmaak aan je css toe

(Zie http://www.briangardner.com/portfolio-page/). Dit is maar een voorbeeld, je kunt de css natuurlijk aanpassen zoals je zelf wilt)

[code]

/* Portfolio ———————————————————— */

.post-type-archive-portfolio
.portfolio {
float: left; margin: 0 15px 30px; width: 340px;
}
.portfolio-featured-image a img {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
border: 10px solid #f5f5f5;
transition: all 0.2s ease-in-out;
}
.portfolio-featured-image a img:hover {
border: 10px solid #ddd;
} .single-portfolio #content {
text-align: center;
}
.single-portfolio img {
border: 20px solid #f5f5f5;
}
[/code]

5. Maak portfolio items aan

Dit doe je net zoals gewone berichten via Dashboard > Portfolio > Add new item.

In het bericht kun je één of meerdere plaatjes en tekst zetten, wat je wilt.

Geef het bericht een uitgelichte afbeelding. Deze wordt getoond op de overzicht-pagina’s.

6. Als het niet meteen goed werkt

Dan kun je evt. de permalinks opnieuw opslaan.

Klaar! je hebt nu een portfolio met categorieën.

In deel 2 van deze handleiding kun je lezen hoe ik dit voor elkaar heb gekregen.

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*