hi,

 

I have purchased a theme from http://themeforest.net

 

I downloaded Wordpress, using the child theme template and using http://mamp.info servers to customize it locally. I've set up my website via Wordpress dashboard but now I'd like to make more personalised customizations to the design.

 

I have Sublime Text 2 as my editor. I've managed to be able to live preview index.html files I create myself using sublime text 2 and link it so I can view changes on a browser.

 

*However - I have no idea how to edit on sublime text 2 the theme I purchased, so I can make these personalised changes to the code and then visually see them as I do them on a browser too (or live preview window).

 

I uploaded the theme folder I downloaded from themeforest to Sublime Text 2 and have all the files there but if I view any of them in a browser it's just is a blank page.

 

Do I have to connect it to Wordpress somehow? Or how do I set this up so I can start working on it?

 

*How do I edit Wordpress theme files in an external editor and then visually see the website as a whole as I play around with it?

 

Thanks for your help

 

 

I think we can help you with this. please feel free to contact us. http://www.digitalpoin8.com/contact-us/

The easiest way to modify a theme in WordPress is to create a child theme. The idea is to create a theme that only contains overrides for particular files and style rules in the parent theme.

It is not a good idea to make edits in the original theme files as your edits would be lost when the theme is updated.

The minimum required setup for a child theme is a theme folder in wp-content/themes and a stylesheet located in the folder named style.css. The stylesheet must contain a special header in which you specify the the parent theme and the name of the child theme.

Here is the required parameters in the stylesheet header:

/*
Theme Name: A name for your child theme
Description: My child theme for ...
Author: Your Name
Template: parent_theme_folder_here
*/


/*Start writing your CSS below. Any rule you specify here will override this particular style in the parent theme*/

body {
    background: cyan;
}
h1{
    font-family:serif;
}

The important parameter here is the template parameter. You must change this value to be the same as the folder name for your purchased theme.

When you have created the folder and the stylesheet you can select the child theme as the active theme from the dashboard.

If you need to override more than just styles you can also create php files in your folder as well.

Say you want some a custom HTML in your footer. In that case copy (not move) the footer.php file from the parrent theme folder to the child theme folder. This file (with any edits you add) will now be loaded instead of the original file.

 

You can also create a folder called page-templates in you child theme folder. The different templates can be selected for different pages in the dashboard. A template file must also have a header:

/**
 * Template Name: FullWidthPage
 * @package WordPress
 * @subpackage the_child_theme_folder
 */
/*Paste the content eg from the index.php in the parent theme and edit it to use as a custom page*/

But before creating templates of your own I'd recomend that you read about the loop which is the code that process the database requests to and prints the returned posts in to your page.

 

The loop:

<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	<?php }
}
?>

Usually you don't have to create your own PHP functions as WordPress has a bunch of build in functions. Here are some examples:

//These functions are usually executed outside the loop
get_header(); //Loads the header.php file
get_sidebar(); // Loads the sidebar.php file
get_footer(); // Take a wild guess
get_search_form();//Most functions are rather self explanatory

Here is the complete function reference: https://codex.wordpress.org/Function_Reference

Edited October 4, 201510 yr by Nillervision