Freelancer a StartBootstrap theme for Wordpress

Freelancer theme
Share this

This week was my first introduction to the world of Wordpress, I am not an expert, but thanks to some tutorials like Tania Rascia I have created this simple guide/project. 


You can find it on Github, here


 

So, let’s start. The first thing about Wordpress is that you can do a lot of thing with plugins, that is right and works fine, but also you can adopt a lot of web resources if you know a little about PHP, HTML, and CSS. So the main recommendation is not to be afraid to start a theme from scratch and look for a good template in pure HTML. 

I like bootstrap so a template that includes it makes the things easy for me, you can find a lot of resources from here

 

Name

Description

Start Bootstrap

Free to download, open source templates and themes for Bootstrap up to date for Bootstrap 4!

Bootswatch

Free themes for Bootstrap, simply download a CSS file and replace the one Bootstrap.

BlackTie

Free Handsome Bootstrap Themes

BootstrapMade

Elegant, clean and beautiful free website templates using Bootstrap, the most popular HTML, CSS & JS framework.

 

In my case, I choose the Freelancer theme from StartBootstrap, is very simple, is divided into sections, have nice animations and a good configured contact form. Download the project from Github, or clone it. 

free lancer
 

So now, let’s go to wordpress; Install it.

Once you have installed your WordPress site, create a new theme. Go to startwordpress/wp-content/themes, create a folder for your theme and two files:  style.css and index.php.

Add this to your style.css 

/*
Theme Name: Freelance
Author: Josué Valencia
Description: Startbootstrap theme
Version: 0.0.1
Tags: bootstrap
*/


And in the index.php you need to paste all the “structure” of the template from Freelancer. Copy all the index.html from the template and paste it in the index.php

Your theme has now been created. Go to the WordPress dashboard, and click on Appearance > Themes. You’ll see the theme in the collection with all the default themes.
 

Theme ready

Done, the theme is working now. Is time to give it some PHP from Wordpress to the theme. Also, we need to connect the css, js, etc from the Freelancer theme. 
The index.php is basically calling all the resources, the css and the js, but they don't come, if you go to the website and inspect the element you will see why. 
 

We need to tell it to dynamically link to the themes folder. with the help of:

<?php echo get_bloginfo('template_directory'); ?>

which will print the theme route. 

<!-- Bootstrap core CSS -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Plugin CSS -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/css/freelancer.min.css" rel="stylesheet">

divide et impera.


Is time to divide all Index, like web components, but is not like that, I will write a blog about that later, now let's focus on reuse the different sections in different pages. This means, for example, separate the contact form, and if we create a new page, we will not write again all the code in a different page, that is not necessary, we can call the contact form easily from anywhere.  


We are going to dive the index.php in Header, Navigation, banner, Post Grid Section, About Section, Contact Section and footer. 
So, the first thing to do is create all that new files with the .php extension. And start to move the content from the index.php to those files. 
Everything from <!DOCTYPE html> to the main blog header will be in the header file. The header usually contains all the necessary head styles. The only addition I will make to the code is adding <?php wp_head(); ?> right before the closing </head>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
        <!-- site title -->
    <title>Freelancer StartBootstrap Wordpress</title>        
    <!-- Bootstrap core CSS -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Plugin CSS -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?php echo get_bloginfo('template_directory'); ?>/css/freelancer.min.css" rel="stylesheet">
    <?php wp_head();?>
  </head>

Now for calling this go back to the empty index.php and at the beginning, (cuz we removed the entire header) add this: 
 

<?php get_header(); ?>

Now reload the page, it should be working fine. At the end of the day my index look like this: 

<?php get_header(); ?>
  <body id="page-top">
    <!-- Navigation -->
      <?php get_template_part( 'navigation'); ?>
    <!-- Banner -->
      <?php get_template_part( 'banner'); ?>
    <!-- Post Grid Section -->
      <?php get_template_part( 'portfolio'); ?>
    <!-- About Section -->
    <?php get_template_part( 'about'); ?>
    <!-- Contact Section -->
    <?php get_template_part( 'contact'); ?>
<?php get_footer(); ?>

A smart theme. 

Before we start pulling in posts and pages, we need to configure some main settings of WordPress. For example, my title right now is “Freelancer”, hard coded in HTML. I want the <title> and <h1> of my site to be changeable through the back end.
In your dashboard, go to Settings > General. Set your title.

be smart

I can show that in my header.php and in the banner.php
 
For the title:    

<title><?php echo get_bloginfo( 'name' ); ?></title>        

And for the header.php we added more changes: 

    <header class="masthead bg-primary text-white text-center">
      <div class="container">
        <img class="img-fluid mb-5 d-block mx-auto" src="<?php echo get_bloginfo('template_directory'); ?>/img/profile.png" alt="">
        <h1 class="text-uppercase mb-0">
        		<?php echo get_bloginfo( 'name' ); ?>
        </h1>
        <hr class="star-light">
        <h2 class="font-weight-light mb-0">
        	<?php echo get_bloginfo( 'description' ); ?>
        </h2>
      </div>
    </header>

Look that here I am calling also the profile image.png from the template. This is not recommendable cuz the final user can not change the image, but for now is fine. 

Real content. 

We have two main things in this template, the “portfolio” that I already call Posts and the “About Us” section. 

Post Section: (which is actually the portfolio.php file). 

The post section is a view of all my posts. So before to start here, go and add a few of them, you can use the Freelancer content for example. 
In the portfolio.php, with the content from the post section, after the main row, everything starts to change, we need a loop, so let’s use this: 

<?php 
get_template_part('recent', 'posts');
if ( have_posts() ) : while ( have_posts() ) : the_post(); 
?>

This will call all the post, now we can start adding the HTML template to customize and set how we want to print that post. 
Just reuse the HTML structure from the start bootstrap theme: 
 

          <?php 
          get_template_part('recent', 'posts');
          if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <div class="col-md-6 col-lg-4">
            <!-- print the post link -->
            <a class="portfolio-item d-block mx-auto" href="<?php the_permalink(); ?>">
              <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
                <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
                  <i class="fa fa-search-plus fa-3x"></i>
                </div>
              </div>
              <!-- print the post image -->
              <?php the_post_thumbnail('', array('class' => 'img-fluid')); ?>
            </a>
          </div>
          <?php endwhile; endif; ?>

About us Section:

Now, this section will be a Page, this is not a post. So for the final user will be easy to edit the content and change whatever he wants.

page about us

I don't want to create the same view for all the pages, just for this one in particular, so i will print it like Freelancer does. In my about.php file, with the about section from the freelancer theme i will call the specific about.php page, and print it. 

The call: 

<?php 
$id = 2; // add the ID of the page where the 2 is
$p = get_page($id);
$t = $p->post_title;
?>

After get the post, i don't need the loop structure, cuz i will just print one. 

 <section class="bg-primary text-white mb-0" id="about">
      <div class="container">
        <h2 class="text-center text-uppercase text-white">
          <?php 
          echo apply_filters('post_title', $t); // the title is here wrapped with h3
           ?>
        </h2>
        <hr class="star-light mb-5">
        <div class="row">
          <div class=" ml-auto">
            <p class="lead">
              <?php echo apply_filters('the_content', $p->post_content); ?>
            </p>
          </div>
        </div>
        <div class="text-center mt-4">
          <a class="btn btn-xl btn-outline-light" href="https://github.com/josuevalrob/freelancer-startBootstrap-wordpress.git">
            <i class="fa fa-download mr-2"></i>
            Git Hub Project!
          </a>
        </div>
      </div>
    </section>

Contact Form:

The contact form, could be made by any WordPress module, but for this tutorial, we will use the contact section from the Freelancer Theme, if you want to know more about this go to the freelancer page https://startbootstrap.com/template-overviews/freelancer/

Conclusion: 

Wordpress is a classic tool for web developers and is simple to use for blog sites. You can improve it and start adding more things, but at one point it will be complicated to maintain, particular if you want the final user to maintain the site. For a more complex website, with more than a simple blog I recommend you to use Drupal or other CMS, you can find a tutorial about how to theming alsto a Start Bootstrap theme with Drupal. 


Good luck! 


 

Comments

Submitted by Citiface Wed, 03/14/2018 - 20:25

Hola, excelente blog! ¿Funcionar un blog como este requiere
mucho trabajo? No tengo conocimiento de programación mas esperaba iniciar mi propio blog pronto.
De todos modos, si tiene alguna sugerencia
o sugerencia para nuevos propietarios de blogs, por favor
comparta. Sé que esto está fuera de tema, mas solo tuve
que consultar. ¡Gracias! ¡Volveré, puesto que he marcado esta
página como favorita y lo he twitteado a mis seguidores!

Also visit my page; http://citiface.com/es

Submitted by Marketing Online Sun, 03/25/2018 - 20:53

Estoy muy impresionado con tus habilidades de escritura
y también con el diseño de tu blog. ¿Es este un tema
pagado o lo personalizaste mismo? De cualquier forma, sigan con la escritura de calidad, es raro ver un buen blog como este en estos días.
¡Volveré, en tanto que he marcado esta página como
preferida y lo he twitteado a mis seguidores!

my web site :: Marketing Online

Submitted by fundiciongutie… Wed, 03/28/2018 - 08:41

Con tantos contenidos y artículos, ¿alguna vez se encuentra
con algún problema de plagorismo o violación de derechos de autor?
Mi sitio tiene mucho contenido completamente único que he creado yo
mismo o subcontratado, pero semeja que una gran parte está apareciendo en toda
la web sin mi consentimiento. ¿Conoces alguna solución para asistir a resguardar contra el contenido de
ser engañado? Ciertamente lo apreciaría. ¡Volveré, en tanto
que he marcado esta página como preferida y lo
he twitteado a mis seguidores!

Here is my webpage ... fundiciongutierrez.co

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.