Genesis sample

Hieronder een voorbeeld van website gebouwd met Genesis Sample.
Je hebt nodig Genesis Framework a 59,95 (prijs 2019)  en een thema. Ik gebruikte het gratis thema https://www.studiopress.com/sample/.

Maak allereerst een child theme. Kopieer het functions.php en style.css bestand en pas het naar eigen wensen aan.

Kies bij thema instellingen voor ofwel een logo ofwel tekst. NB: kies je voor een logo, dan moet het 360 px breed zijn, 140px hoog. Plaats het in de map images van het child theme. Overschrijf het genesis logo met de naam logo.png.

Genesis plugins:

• genesis-easy-columns: NB: lijkt niet meer onderhouden te worden, responsive werkt niet meer
• genesis-simple-edits
• genesis-simple-sidebars: eenvoudig extra sidebars toevoegen
• genesis-translations
• Genesis Widgetized Not Found & 404
• Genesis 404
• Genesis Footer Builder
• Sidebar & Widget Manager: gekocht: erg handig: bepaal zelf welke widgets waar. Dat kan ook in de gratis versie, maar die is niet responsive!

Opbouw pagina:  http://www.genesisframework.com/markup.php

Functies:

• een sticky menu maken
• een icoontje toevoegen aan een menubalk, handleidinkje. Voor icoontjes zie http://fortawesome.github.io/Font-Awesome/icons/
  Stel bij Menu – instellingen in dat je de class kan toekennen; maak een aangepaste link. Vul bij navigatielabel in:
  [code]<i class="fa fa-twitter"></i>[/code]

  Voeg aan het functions bestand toe:

  [code]//* Add Font Awesome Support
  add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
  function enqueue_font_awesome() {
  wp_enqueue_style( ‘font-awesome’, ‘//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css’, array(), ‘4.1.0’ );
  }[/code]

  En pas eventueel de stijl aan:

  [code] .site-header .genesis-nav-menu .menu-item:before {
  display: block;
  font-family: ‘FontAwesome’;
  font-size: 28px;
  font-style: normal;
  font-weight: normal;
  line-height: 0;
  margin: 0;
  position: relative;
  text-align: center;
  top: 16px;
  padding: 5px 0 7px;
  vertical-align: top;
  transition: color .1s ease-in 0;
  -webkit-transition: color .1s ease-in 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

  .site-header .genesis-nav-menu .menu-item:before {
  color: #092662;
  }

  .site-header .genesis-nav-menu .menu-item:hover:before {
  color: #bb153f;
  }

  .site-header .genesis-nav-menu .current-menu-item:before {
  color: #092662;
  }

  /** If necessary, add the code below to your media query where your
  breakpoint occurs for your mobile navigation. It removes the icons
  from your mobile menu. **/

  .site-header .genesis-nav-menu .menu-item:before {
  content: none;
  }[/code]

• portfolio template maken  of http://genesistweaks.com/adding-the-minimum-2-0-portfolio-to-a-different-genesis-theme/
• een category pagina met 3 kolommen. Goede uitleg gevonden op https://amethystwebsitedesign.com/add-category-template-for-portfolio-to-genesis-modern-portfolio-pro/
  Het komt neer op: maak een bestand met de naam category-designcategory. (schrijf ipv designcategory de naam van je categorie)
  Plaats deze code erin: let op dat je design vervangt door je eigen categorienaam.
  [code]

  /**
  * The custom template for the design category
  */

  //* Force full width content layout
  add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

  //* Remove the entry meta in the entry header
  remove_action( ‘genesis_entry_header’, ‘genesis_entry_header_markup_open’, 5 );
  remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 );
  remove_action( ‘genesis_entry_header’, ‘genesis_entry_header_markup_close’, 15 );

  //* Remove the entry content
  remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’ );

  //* Remove the entry image
  remove_action( ‘genesis_entry_content’, ‘genesis_do_post_image’, 8 );

  //* Add the featured image before post title
  add_action( ‘genesis_entry_header’, ‘minimum_portfolio_grid’, 8 );
  function minimum_portfolio_grid() {

  if ( $image = genesis_get_image( ‘format=url&amp;size=portfolio’ ) ) {
  printf( ‘

  <div class="portfolio-image"&gt;&lt;a href="%s" rel="bookmark"&gt;&lt;img src="%s" alt="%s" /&gt;&lt;/a&gt;&lt;/div&gt;

  ‘, get_permalink(), $image, the_title_attribute( ‘echo=0’ ) );
  }
  }

  //* Remove the entry meta in the entry footer
  remove_action( ‘genesis_entry_footer’, ‘genesis_entry_footer_markup_open’, 5 );
  remove_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ );
  remove_action( ‘genesis_entry_footer’, ‘genesis_entry_footer_markup_close’, 15 );

  //* Run the Genesis loop
  genesis();[/code]

  Voeg dan code voor de stijl toe op de juiste plaats; bij genesis sample is er nog geen code voor. Ook hier: let op dat je design vervangt door je eigen categorienaam.

  [code] /* Category Design Entries
  ——————————————— */

  /* Adds the opacity and hover feature to images */
  .category-design img {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  opacity: 0.8;
  }

  .category-design img:hover {
  opacity: 1;
  }

  /* Adds the grid column width the same as the home page */
  .category-design .entry {
  float: left;
  margin-right: 5.263157894737%; /* 60px / 1140px */
  width: 29.824561403509%; /* 340px / 1140px */
  }

  /* Removes the right margin on the 3rd, 6th, 9th, etc. posts */
  .category-design .entry:nth-of-type(3n+3) {
  margin-right: 0;
  }

  /* Clears the float to start a new row for the 4th, 7th, etc. posts */
  .category-design .entry:nth-of-type(3n+1) {
  clear: left;
  }

  /* Smaller title size */
  .category-design .entry-title {
  font-size: 18px;
  }
  [/code]

  en code voor mobiel

  [code] @media only screen and (max-width: 600px) {
  /* Category Design Entries
  ————————————— */

  /* Centers the posts or entries */
  .category-design .entry {
  text-align: center;
  }

  /* Removes the three across grid */
  .category-design .entry,
  .category-design .entry:nth-of-type(3n+3) {
  float: none;
  margin: 0 auto 24px;
  margin: 0 auto 2.4rem;
  max-width: 340px;
  width: 100%;
  }
  }
  [/code]