Create a similar website like duvien.com in less than a day with WordPress

This site runs on Drupal 8 but i was curious to see how much time it will take to recreate this complete site (duvien.com) using WordPress 4.5.x from scratch to a functional site with minimal coding.

Turns out not a lot of time. In fact, less than a day using an existing WP theme with some modifications and a few free plugins thrown in.

Here are 5 main steps to a completed site. I've created a child theme you can download on Github which will save you a lot of time. Keep reading on...

 

Installation of WordPress

To cut down on this long post, follow this article on how to install WordPress or do a search on YouTube. There's enough tutorials on this topic so not worth covering here. I'm using WordPress 4.5.x

Requirements

Download and install the following theme and plugins:

Theme:
Pingraphy - https://wordpress.org/themes/pingraphy/
Pingraphy-child theme - https://github.com/vienie/pingraphy-child

Plugins:
Advanced Custom Fields - https://wordpress.org/plugins/advanced-custom-fields/
Featured Video Plus - https://wordpress.org/plugins/featured-video-plus/
Social Media Flying Icons | Floating Social Media Icon - https://wordpress.org/plugins/floating-social-media-icon/
Contact Form 7 - https://wordpress.org/plugins/contact-form-7/

WordPress themes and plugins can be installed using WordPress admin UI. See this video on installing a theme and this video on installing plugins. Remember do a search for the following theme and plugins. You will not find Pingraphy-child because this exist on Github, not on wordpress.org. But don't worry, read below to download and install child theme.

Once you have installed and activated the theme and all plugins. The next step is to install the child theme - Download Pingraphy-child from GitHub and unzip the master zip file. Rename the theme folder - pingraphy-child-master to pingraphy-child and upload the whole directory theme to /wp-content/themes/ in your WP installation.

Then, go to Menu --> Appearances --> Themes. You will see Pingraphy-child theme. Mouseover the thumbnail image of the theme with your cursor and click on 'activate' button.

Quick note about child theme: A child theme in WordPress is a theme which inherits everything from a parent theme (the main theme). This means we can make changes to a parent theme just be overriding it in our child theme. The advantages is that we keep the parent theme intact so when we update the theme, we will not lose our changes we have applied to th theme. In Drupal, this wuold be the difference between base theme (parent) and subtheme (child).

Pingraphy is the parent theme and Pingraphy-child is the child theme. One final point to make is that everything is already setup in the child theme but for the sake of learning and knowing where evreything goes i thought doing an article on this would makes thing clear.

 

Configuration and setup

Advance Custom Fields (plugin)

Basically, we want to add a new field to the already existing Posts Type for teaser text. To do this, follow the steps below:

Once plugin is installed, go to menu --> custom fields and click on 'add new' button.

In the title field, enter Post type

Under the location - rules box, in the select list for 'Show this field group if', select 'Post type' and 'is equal to' and 'post', see image below:

custom post type

 

Now click on '+ add field' button to add a new field to Post type. This field will be used to enter teaser text.

In the field label, enter: Teaser Text

In the field name, enter: teaser_text

In the field type, select: Textarea

In the field instruction, give it a description text. Something like: Add a summary text. This will not show on the full post page.

Set it to be required so user/editor must fill out this field.

It should look like the image below:

post type 2

 

You can ignore the rest of the other fields and click on 'update' button (at top right of the page) to save it.

Go to add a new post (menu --> Posts --> Add new), you should now see a new field called teaser text (as shown in image below),

posts type with new field

 

We want this field to only show in the masonry box on homepage and all category pages.

Copy the theme files from Pingraphy to your child theme:

pingraphy-child/template-parts/content.php
pingraphy-child/template-parts/content-video.php

(This is already done in Pingraphy-child)

Remove excerpt from theme:

<?php 
  the_excerpt();
?>

Replace it with:

<?php the_field('teaser_text'); ?>

teaser_text must match the Advance Custom Fields - Post types field name we have created previously. So if you have a different field name, replace it with your own.

This is done already in Pingraphy-child theme

 

Featured Video Plus (plugin)

Once this plugin is installed, you'll see a featured video box in Posts. This is for adding video from Youtube / Vimeo / Dailymotion into your post. You can customised how the video should be displayed in menu --> settings -- Media. We will cover how to embed video in 'Adding content' step later.

 

Social Media Flying Icons | Floating Social Media Icon (plugin)

Once the plugin is installed, go to menu --> Floating social media settings. Here, you can select which icosn you want. Don't forget to add your social media links under 'Social Media Configuration', otherwise it willl not be displayed on your page.

Under the 'Social Media Integration Settings' select: Manual Only (Using Shortcode or PHP code - will not float).

Your setup should look similar to this:

Social media

And save the changes you have made.

Now we want to display the social media in the theme but only on the full post page. Copy theme file content-single.php from Pingraphy and place it in your child theme:

pingraphy-child/template-parts/content-single.php

Add the following somewhere you want to display the social media. I chose to render it next to post date:

<?php if (function_exists("DISPLAY_ACURAX_ICONS")) { DISPLAY_ACURAX_ICONS(); } ?>

This is already done in Pingraphy-child theme.

 

Contact Form 7 (plugins)

Once this plugin is installed, go to menu --> Contact

As you can see, it already has a contact form setup. We can just use this default one. Click on 'Contact form 1' and click on the mail tab. Enter your emailing details. If you want to alter any of the contact form fields, you can do this under the form tab. 

Let's create a page for the contct form. Go to menu --> Pages --> Add new.

Copy the contact form shortcode into the page content:

[contact-form-7 id="52" title="Contact form 1"]

One more thing, in the page right sidebar under 'Page attributes', select 'default template'. This will render the contact form with a sidebar.

 

Adding content

Go to menu --> Posts --> Categories, and add some Categories you want.

Add some test posts for now. You can add real content later.

There are 2 features we can add to the post, an image or video.

To add a post with featured image or video:

Fill out the fields - Title, Teaser text, body text.

In the sidebar, you'll see 'featured image' and 'featured video'.

Featured post

If you want to add a post with images, click on 'set featured image' and upload an image.

If you want to add a post with video, paste in the video URL.

Don't use both at once though. Only either one per post.

The image or video will render as a thumbnail for the masonary box and full image/video on full post page. See demo: https://wp.duvien.com

Don't forget to add some tags for each post as well so we can see them on the page and working.

 

Theming

Let's make the Tags to be displayed in masonry box and full post page, under the content. Open up the following theme file:

pingraphy-child/template-parts/content.php

Add it before the footer post meta (<?php pingraphy_footer_post_meta(); ?>):

<?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>

Do the same in the following theme files:

pingraphy-child/template-parts/content-video.php
pingraphy-child/template-parts/content-single.php

Again, this is done for you in  the Pingraphy-child theme.

 

The last steps is to setup your menu. Go to menu --> Appearance --> Menus. Under Menu settings, select secondary menu and save.

Now we will add pages and categories to the menu. Just follow the steps shown in image below:

menu

Finally, we want to customise a bit of the theme. Dont' worry about CSS styling, this is all done already in Pingraphy-child theme but we want to alter the background color and etc.

Go to menu --> Appearance --> Customise

Click on 'Site Identity' and add your own.

Click arrow icon to go back.

Click on 'General Options' and add your own footer text.

Click arrow icon to go back.

Click on 'Colours' and add your own background colour. I used #FAFAFA hex colour.

Click on Static Front Page and select: Your latest posts

That's it! All done in one day's work...

 

Update:
If you want to add a Featured frontpage Post, check this article: Create a featured post for frontpage using Query Wrangler for WordPress