WordPress climbed to the top of free website builders a long time ago. As a developer who watched them battle it out from the beginning, I have used the platform on many occasions. It is a very fast way to build a website that can be managed very easily and has extra features called plugins that can add extra functionality with a click of the mouse.
However, the popularity and ease does not come without a price because it is a very popular target for hackers. Here is why. First of all, the second we build a WordPress website, its default coding will output public html that leaves a footprint saying “This site is built with WordPress”. Hackers built bots to crawl websites and if they are WordPress, or a specific modified WordPress site, it will attempt an automated attack such as registration which allows the user ‘in’ to alter code as a user.
As we look around the Internet, we can find many ways to avoid these issues, like deny user registration, use safe, updated plugins, updated WordPress version and strong passwords. In addition, if there is user registration, we must ensure it is only a subscriber because if we build a site and this gets switched to admin somehow, then,new registrations will be admins and they have ‘full power’ in the WordPress backend.
The problem? Is that this is a continual, tiring game. Our website could be up and running fine, unchecked for months. Meanwhile, the day an exploit is known and becomes public, the hacker could have done his damage because we did not act fast enough top fix the exploit.
For this reason, we must stay on top of WordPress installations if we use it. Otherwise, building a strong app with Laravel Framework or html/css/js can keep exploits more at bay.
This article is about customizing a WordPress theme with custom html, css, javascript and php. It will not refer to plugins that can be added to themes, but, rather refer to how you can add your own code to the current template files.
For starters, your WordPress website will have a current theme that will style your home page, posts, pages and other such navigational pages like categories and archives. A good reference to see what exists in a typical WordPress page can be found at the WordPress.org website theme development.
Please keep in mind that many custom themes that are free or paid may have their own custom named files that handle specific requests; such as a page that lists of posts of a specific category, or archived pages based on the date.
To edit the pages, you need to know where they are. You have two means of editing the content; one through the WordPress backend and the other from editing files within the wp-content/themes/mythemename folder.
Method #1: WordPress backend
If you plan to use the WordPress backend, you can find them at Appearance >Editor. After you select ‘Editor’, the pages will be displayed on the right hand side of the screen. Do note, that some themes can extend another theme and that means you need to go to a parent theme in order to make your desired changes.
Once you make the changes, you can simply click the ‘Update File’ button of the bottom of the page that you are editing. If you plan to edit content this way, I recommend backing up the wp-content folder or file in order to have a disaster-proof plan.
Method #2: Files From Directory
If you navigate to the wp-content/themes/mytheme(your actual theme you are using) folder, you can edit any of these files as you want. Thus, you can open your favorite editor and code away.
After many years running a blog on Joomla 1.5, I decided to migrate to the latest WordPress since it was useless without a responsive design.
I chose WordPress rather than upgrade to the latest Joomla 3.XX for many reasons. One of those reasons are that Joomla 1.5 had so many security issues that had to be addressed; even to the limit of disabling all file uploads to the website account, removing all third party editors, and more.
WordPress was also selected because it is simpler to just create a new template and code PHP however you desire.
The final deal breaker was that WordPress had free migration plugins while Joomla was going to cost.
So, here is how I made the migration that had about 800 blog posts filled with code blocks and illustrations. After all, the blog was about Lampstack development.
- Installed WordPress to a subfolder
- Installed the FG Joomla to WordPress plugin.
- Opened the Joomla configuation.php to copy the database details into the FG Joomla to WordPress plugin.
- Ran the plugin to make the upgrade. The upgrade happened very quickly and moved images, text, etc.
- Installed a desired WordPress theme that looked good with the content.
- Made minor changes to code blogs as a little formatting was lost.
Moving WordPress from a subfolder to a root folder can be very quick and easy. This example will explain how to move it from a subfolder like example.com/wordpress to the root folder example.com.
For simplicity, this tutorial will use the subfolder ‘wordpress’ for instructional purposes.
The first thing to do is copy the files from the wordpress subfolder to the root folder. This can be done with ftp or Linux command line.
Once the files are moved the root folder, logging into the new admin at example.com/wp-admin can be problematic. So, here is what you can do after you moved the files.
Login to your Cpanel or phpMyAdmin. Hopefully, you have phpMyAdmin or some other mySQL admin manager. Once you have logged in, open up your database. At this point, you will have access to all the tables.
A quick way to find the old url in database tables is to search all tables for the string like ‘example.com/wordpress’. You will then see a list of tables like wp_options. If you used a different prefix than the default, the table would be yourprefix_options. In this table, you will want to change the option_name fields which are site_url and home. They are the first two items in the list. Meanwhile, you may want to change recently_edited.
Changing Posts
Now, if you have old links you may want to update them. The code below will remove the wordpress subfolder from the url so that image links and other links will work within the current folder.
UPDATE `wp_posts`
SET `post_content` = replace(post_content, ‘example.com/wordpress’, ‘example.com’)UPDATE `wp_posts`
SET `guid` = replace(guid, ‘example.com/wordpress’, ‘example.com’)
Asides from that, you may want to check your .htaccess file and make sure rewritebase is ‘RewriteBase /’ and not ‘RewriteBase /wordpress’.
So, you love the speed you get with Varnish, but, have suddenly noticed that you cannot login and make any changes. Although you could manage the site with phpMyAdmin, you more than likely want to login to the backend and make changes; like the high majority of WordPress users.
Well, with a little adjustment to you default.vcl file, you can easily keep those web pages in the cache while your wp-login and wp-admin pages will not be cached. If you do not make changes to your default.vcl file, you cannot login.
When you open your default.vcl file with an editor like Vim or Nano, you will add a small statement to the sub vcl_recv and sub vcl_fetch methods. The vcl_recv method takes the request once a web surfer has viewed a page, and decides what to do with that request. Of course, it depends whether or not it finds it in the cache.
If varnish finds it, it hits the cache and serves the file. If not, Apache takes over and serves the request. Once the file is retrieved, the request runs through vcl_fetch. If the file came from the cache, it is served and not cached again. If the file was a miss and delivered by Apache, it is cached and delivered.
The following examples show how exclude the wp-login and wp-admin pages from being cached.
sub vcl_rec
Here is a quick briefing about the following code. If the domain name is example.com or www.example.com and the wp-login or wp-admin pages are served, use the specific backend ip for that account. In this case, we use default2, which is a dedicated ip address.
Extra Note:
If you wanted to cache pages, you would have unset req.http.cookie; on a line above set req.backend = default2; Using unset removes cookies so Varnish can cache the object. If a page has cookies and unset is not in place, it would not cache.
elsif(req.http.host ~ "^(www\.)?example\.com" && req.url ~ "/wp-(login|admin)"){ set req.backend = default2; }
sub vcl_fetch
Hers is a quick synopsis about vcl_fetch. There is no time defined to cache an object. Therefore, Varnish will not cache the wp-login or wp-admin pages.
Extra Note:
If you did want to cache these pages, you would need to use a line between {} that says something like set beresp.ttl = 86400s;
This line tells Varnish to cache either of those pages for 86400 seconds, which is 1 day. After a day, the page would be removed from the cache.
elsif(req.http.host ~ "^(www\.)?example\.com" && req.url ~ "/wp-(login|admin)"){ }
Conclusion:
Now that you know how to use Varnish with WordPress, you can easily exclude the backend from caching while maintaining the cache on the frontend. Once you have Varnish up and running, you may want to configure it to cache everything, and make exclusions as you need them. For example, you will want to make conditions for all or some backends.
When you move a WordPress site to a subdomain, there are a few steps that can follow to ensure that the new subdomain will look and operate and you want. The steps are outlines below.
At this point, you can open the new subdomain and see the website. It may or may not look exactly as you expect. One issue could be that the header is missing files. This can be fixed. Open the original domain and find the header image name with ‘View Source’. Do a find and replace in the database using phpmyadmin (or command line). The url for a subdomain will change in size. Believe it or not, the size is important.
Now, the website should display properly.
If you have decided to use WordPress for your website or blog, it is a fine tool that will work right out of the box. Furthermore, shall you decide to create custom applications with WordPress, you can code freely code as you want. In order to create a custom application, you can create a custom php page based on page.php that is located in your default template folder. With a custom application, you can use WordPress function like get_header(), get_sidebar() and get_footer(). With the template file, you can add an inlude file to connect to a different database than the one used in the WordPress installation. Then, you can code freely with ‘pure php’.
To create a custom WordPress application,
1) Create a New Page with WordPress.
2) Choose a custom template for the new page. The template would be based on page.php.
3) Add a little text within the page; such as the text for the top of the page.
4) Choose the new template from the drop down menu.
5) Open you template file in Notepad++ or your desired editor.
6) Code the template file and add any include files.
Notes:
To access any images for the template, you can add the following code:
<img src=”<?php bloginfo(“template_url”); ?>/images/foldername/myfile.jpg” />
To include files, you can add the following code:
include (TEMPLATEPATH . ‘/foldername/myfile.php’);
WordPress seo issues? Google not crawling?
2) Make robots.txt
User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: /category/*/*
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Disallow: /*?*
Disallow: /*?
Allow: /wp-content/uploads
# Google Image
User-agent: Googlebot-Image
Disallow:
Allow: /*
# Google AdSense
User-agent: Mediapartners-Google*
Disallow:
Allow: /*
# digg mirror
User-agent: duggmirror
Disallow: /
Sitemap: http://mysite.com/mysite.xml
3) Sign in to Google webmaster tools
4) Create or open the site
5) Site configuration >sitemap >submit sitemap or check its status. You want the checkmark.
6) Site configuration >Crawler access >test robots.txt file >You want to see Googlebot allowed on the bottom
7) Diagnostics >crawl errors >You may have issue like url restricted by robots.txt
8) Diagnostics >fetch as Googlebot >Fetch >You want success as fetch status >You can also immediately index the page as well.
When working on a WordPress site, you have the option to allow Google to crawl the website or to make it private.
To make it private,
1) Open wp-admin
2) Settings >Privacy
3) Select ‘I would like to block search engines, but allow normal visitors’.
To make WordPress searchable and crawlable,
1) Open wp-admin
2) Settings >Privacy
3) Select ‘‘.
To create custom meta tags,
1) Open wp-includes folder.
2) Open general-template.php.
3) Set custom follow meta tags if desired.
After a plugin is installed and activated to a WordPress site, you may find that the plugin shows up on each and every page(or post). However, you only want the plugin to show up on the home page, or a specific page. WordPress has built-in functions to allow you to add code to files such as index.php, page.php and category.php so that you can customize on which places should display the plugin.
The code below can be used within index.php or page.php to allow only the home page to display the plugin called with the function.
The code below can be used within index.php or page.php to allow only the front page to display the plugin called with the function.
The code below can be used within single.php to allow only the specified post to display the plugin called with the function.
When you make a WordPress 3 site, you may want it to behave more as a content management system rather than a blog. The simple method, is to avoid using posts since they will group in widget categories and can cause building the site a lengthier exercise. If only pages are used, then the site can be built in logical order.
To create the home page,
1) Click Settings >Reading >Front Page Displays: A static page >Select Static Page >Save Changes.
But, yes…but. But what if I want a blog on one page and the others as pages? Can that be done. Of course. To allow a blog (which uses posts), you make a menu link to a post category. The link on the menu could be something like http://localhost/mysite/archives/category/uncategorized This page will call this category, which in this case is uncategorized. Now, you can add a widget for the catgories. If only the category.php file uses the get_sidebar(); function, the category list will only show up on the blog page. Now, all categories can be clicked and the web surfer can use the blog as it had been intended to be used.
After a WordPress plugin has been approved and added to the SVN depository, you may want to modify the WordPress plugin. Modifying the plugin is quite simple. You simply edit the files for which are connected to the WordPress SVN. After modification, you change the information header to the new WordPress plugin version, change readme.txt version and recommit the files to the SVN. Then, you create the tagged version for which you send files into the tags folder with the new version.
The benefits of updating a WordPress plugins are plentiful. Not only is it improved, but, it will be placed higher on the list for its tags. For example, if the readme.txt file has various tags for your plugin; such as mp3 player, it would crawl back to the top for those tags since WordPress tags are ordered by date descending.
To install WordPress,
1) Download WordPress from http://wordpress.org/download/
2) Create a new folder on your desktop. It can have any name like WordPress.
3) Copy and paste the wordpress zip file (i.e. wordpress-3.2.1) into the directory
4) Extract the file with zip utility.
5) Rename the WordPress file for the website name (like mysite.com).
6) Copy and paste or transfer the files into the appropriate server directory.
7) Open the web address or local Wamp directory
8) Click ‘Crate a Configuration File’
9) Select ‘Let’s Go’
10) Create a database with phpMyAdmin or root mysql>
11) Enter the appropriate databasename, username, password and prefix. The prefix should be something different for security purposes.For Wamp, the username is root, password is ‘blank’ and prefix is what you want.
12) Advance to the next page when you have the appropriate database name, username, password and prefix.
13) Select ‘Run the Install’
14) Select a ‘Site Title’
15) Fill in a username or leave Username as admin, password, and email address.
16) Select ‘Install WordPress’.
17) Login to wp-ad at http://localhost/sitename/wp-admin or view page at http://localhost/sitename/
Tortoise is SVC software which can be used to add your files and versions to the WordPress plugins directory.
INSTRUCTIONS:
1) Install Tortoise
2) Update readme.txt
3) Make a new trunk folder which will have all your plugin files and the read me file. This can be located anywhere such as on the desktop.
4) Right Click on trunk folder > SVN Checkout > Select the Trunk Folder as destination. Choose all files and folders > Click OK
To add files to the trunk folder,
1) Right Click on trunk folder > Select SVN Commit
To make new versions,
1) Right click on trunk folder.
2) Select SVN > Branch / Tag
3) Create a tag version folder like:
http://plugins.svn.wordpress.org/mypluginname/tags/0.8
4) Click OK. After this, you can edit any version or make new tags from any version or the trunk version.
To take a previous WordPress plugin version and make a new version,
1) Right click the version folder.
2) Select SVN > Branch / Tag
3) Create a tag version folder like:
http://plugins.svn.wordpress.org/mypluginname/tags/0.8
4) Click OK.
More Tortoise SVN Features
As you can see on your plugin page, the version in your tags is shown in the compatibility widget. This set of files is actually in the the tags/version# folder
To access your trunk or tags folders,
1) Open Tortoise > Repo(Repository) Browser > Open current version (The version in trunk and tags/version# folder > Select Folder > Delete >Click OK
To add a tag folder after deletion,
1) Go to plugin folder on your pc (It may have a large green check mark)
2) Right click > Tortoise SVN > Branch / Tag > Write the tag url like: http://plugins.svn.wordpress.org/myplugin/tags/0.3
3) Click OK
The Tortoise Repository Browser is similar to FTP. You can add files, copy to working working folder, and more.
Worpress will display comments at the bottom of an article. This looks very bloggy. You can edit any post or page and delete comments. However, comments closed can still appear on the page underneath the article.
To remove the comment data from under each article,
1) Find the css class or id that displays the comments data from below the article.
2) Go to style.css and add display:none to css class or id for the author tag.
3) Save file.
Worpress will display date information on top of the article. This looks very bloggy.
To remove the date tag and name,
1) Find the css that displays the date and author css class or id.
2) Go to style.css and add display:none to css class or id for the author tag.
3) Save file.
Worpress will display date and author information on top of the article. This looks very bloggy.
To remove the author tag and name,
1) Find the css that displays the author css class or id.
2) Go to style.css and add display:none to css class or id for the author tag.
3) Save file.
Often, as a WordPress sites nears to completion, you have a few classes and functions that display text for which you want removed. For one, you may want to disable comments for one or more pages or posts. Opening a page or post is all that is required to disable comments if the checkbox is ‘not selected’.
Another area which may need editing is the article information. Here is a snippet of default text that will appear for a post.
To remove the information under a post, you must edit the php in functions.php and loop.php.
Editing loop.php will help remove any other undesired text and will allow for a clean article and title.
By examining the css ids, classes and html text, you can find where to disable the appropriate output in the php classes and functions.
Making a WordPress theme can be done with any html/css file or various computer generated software. Both have advantages and drawbacks.
Computer Generated Templates
The advantages of using software to make a computer generated WordPress template are to save time and to create a theme with no or limited coding skills. Most designs will look generic, but the template can look ‘clean and professional’. Some software to complete the jobs are from Sitegrinder and Artisteer.
Sitegrinder
Sitegrinder can be used to make html/css which can be converted into a WordPress theme, or it can make a WordPress template with the proper plugin. If the html/css is used, you will have to alter many div tags and css since most of the generated page will have exact heights and widths; not auto or measurements like 95%. Having used Sitegrinder which costs near $400, it makes a W3C valid site, but, it creates many, many div ids and layers. The code can be messy to convert and edit after a conversion. Quite frankly, it is best used to pump out a very small website with a handful of pages.
Nevertheless, there is one option for which the psd file can be made into a potential Worpdress theme. It is called the grow hint. When you use the grow hint, you can make a stretchable page that will increase or decrease as content size alters.
However, the grow hint does have a small setback and that is that the text area cannot contain other elements; but rather just a wide swoop of text. If that is okay, you can always go and add a new div element under the line after the html/css is output and add other nested div elements which can be resized.
Now, you can take or make any PSD file with Photoshop and make a sufficient WordPress theme. With 1 large grow hint, you can add other div elements afterwards. To help speed up development time using this method you may want to position all new style id and classes at the top or bottom of the css file in order to make these changes quick and simple; since the css could easily be more than 1100 lines of code. Minifying the css could bring it near half the size.
Although building a WordPress theme with this method is possible, looking at the html/css with its naming conventions and coding placement can be tiresome and editing will not be as fast as dealing with optimized, well written html/css. It may seem like a shortcut, and it is if non-coding is desired, but it just won’t measure up to hand-coding…during building and future revisions.
Quite frankly, the only real benefit I see for using Sitegrinder converting html/css for WordPress would be to build a funky menu (and maybe a few stylish static columns) that is a perfectly sized chunk of html/css for the header.php file. The new html/css would be inserted into my hand-coded header.php template file. Then, recreating any changes to the menu could take place in the future and the html/css could be swapped back into the header.php and style.css files.
Artisteer
Making a template with Artisteer can be done quickly. It runs near $150 which is nice, but it too makes very long code.
Hand Coding
This might sound techie and laborious, but hand-coding is very efficient and creates fast loading templates. A website only needs a background, 2 or 3 content containers and maybe a few more child containers to hold a page. It is very fast to take a psd mockup and slice files for a website, then position all text and images through hand-coding. You may find 100 lines of html and css does the same thing as 2500 lines of computer generated software.
Furthermore, reusing templates to build new sites can be speed up the completion time on new projects.
If you use a premade html/css template, you can always inspect the code to estimate the time it would take to convert the html/css into a WordPress template.
Making a WordPress template requires basic file editing; primarily php and css. WordPress is very ordered and simple to use if you have built PHP websites with typical header and footer includes.
For starters, a simple way to create a custom WordPress theme is to re-work a default template like twentyten or twentyeleven. Since both templates have different PHP functions, you can just pick one as a solid place to start.
With the template, you will edit various files. Here is a list of the various files which will be edited so that WordPress will function normally and can be used to show pages, posts, archives and error messages. Since WordPress displays content using various php files, the list is rather long. Below, is a list and descriptions for files that were edited from the twenyten template to create a custom template.
single.php
Single.php displays an individual post when it is selected from a menu item or category.
page.php
Page.php is used to display pages.
index.php
Index.php is used to display the site’s homepage
archive.php
Archive.php is used to display archives and recent posts
404.php
404.php is used to display errors
comments.php
Displays comments
To remove “comments are closed” look near line 72 and remove the following line:
-<p class=”nocomments”><?php _e( ‘Comments are closed.’, ‘lightningbolt’ ); ?></p>
wp_includes/category_template.php
This file is optional to edit the function get_the_category_list
If you remove $rel, the site can be html5 Valid from W3C
Custom Menu Items
For this template, make custom menu in header.php and make permalinks or use post urls for menu items; using <ul></ul> and <li></li> tags
style.css
Style.css is the bread and butter to styling a new theme and add specs if you want to submit a theme to the WordPress directory.
-add for author name, etc
/*
Theme Name: Put Name Here
Theme URI: http://www.mysite.com
Author: My Name
Author URI: http://www.mysite.com
Description: Custom theme (Twenty Ten)
Version: 1.0
*/
screenshot.png
Change screenshot.png for site image in wp-admin
Making the Theme:
Making the theme requires putting the menu and any desired html in the header.php file. IOt can include any other div tags you want for the website. The page templates like index.php, single.php, page.php and catagory.php can use the same or different html div tags. It is possible to take any html/css template with a css menu and move the div tags into the ideal sections like header.php, footer.php and any other pages that will hold content. When you look a page like index.php you can float a sidebar anywhere and you use the appropriate function to display content.
The code below shows a snippet of index.php. It shows the get_header(); class which gets header on the top, followed by custom div tags which hold content, a sidebar class which loads the sidebar or widget into a floated right position, followed by an almight loop which loads all typical WordPress content on the homepage. Finally, a class to load the footer at the bottom. These 3 classes are existent and look almost exactly the same in the files which will display content.
INDEX.PHP
<div id=”main2″ >
<div>
<div style=”float:right;”><?php get_sidebar(); ?></div>
<div>
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( ‘loop’, ‘index’ );
?></div>
</div></div>
<?php get_footer(); ?>
SINGLE.PHP
Here is single.php with added static content. As you can see, it has get_header();, <?php get_sidebar(); ?>, get_template_part( ‘loop’, ‘index’ ); and <?php get_footer(); ?> similar to index.php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( ‘loop’, ‘index’ );
?></div>
</div></div>
<div style=”clear:both;”></div>
<div style=”float:left; width:47%; padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border:2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>SERVICES</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”float:right; width:47%;padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border: 2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>ABOUT US</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”clear:both;”></div>
<div style=”display:block; float:left; margin-left:0; “>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; height:auto; margin-top:0px;” ><br /><b><span style=”font-size:16px;”>MOBILE WEB DESIGN</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;” ><br /><b><span style=”font-size:16px;”>WEB 2.0</span></b> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block;float:left; margin-left:0px; “>
<div style=”padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;”><br /><b><span style=”font-size:16px;”>SEO / PAY PER CLICK</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>WEBSITE OPTIMIZATION</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>ONGOING SUPPORT</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>Call Today</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”clear:both;”></div>
<br/>
</div>
<!–End of style–>
<?php get_footer(); ?>
PAGE.PHP
Here is page.php with added content like single.php. It also has get_header();, <?php get_sidebar(); ?>, get_template_part( ‘loop’, ‘page’ ); and <?php get_footer(); ?> similar to index.php
<div id=”main2″ >
<div style=”float:right;”><?php get_sidebar(); ?></div>
<div> <?php
/* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
get_template_part( ‘loop’, ‘page’ );
?></div><div style=”clear:both;”></div>
</div>
<div style=”clear:both;”></div>
<div style=”float:left; width:47%; padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border:2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>SERVICES</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”float:right; width:47%;padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border: 2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>ABOUT US</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”clear:both;”></div>
<div style=”display:block; float:left; margin-left:0; “>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; height:auto; margin-top:0px;” ><br /><b><span style=”font-size:16px;”>MOBILE WEB DESIGN</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;” ><br /><b><span style=”font-size:16px;”>WEB 2.0</span></b> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div><div style=”display:block;float:left; margin-left:0px; “>
<div style=”padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;”><br /><b><span style=”font-size:16px;”>SEO / PAY PER CLICK</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>WEBSITE OPTIMIZATION</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>ONGOING SUPPORT</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>Call Today</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”clear:both;”></div>
<br/><br/>
</div>
<?php get_footer(); ?>
HEADER.PHP
Header.php will look unique. You can go down to the ul and li menu tags and make custom pages.Then, just add any div tags for custom content.
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
// Add the blog name.
bloginfo( ‘name’ );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo ” | $site_description”;
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘lightningbolt’ ), max( $paged, $page ) );
?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
//wp_head();
?>
</head>
<body id=”body”<?php /*body_class(); */?>>
<div id=”container_mymain”>
<div id=”main”>
<div id=”nav_bg”>
<ul id=”navigation” >
<li><a href=”index.php”>Home</a></li>
<li><a href=”sample-page”>Comment</a></li>
<li><a href=”new-page”>No Comment</a></li>
<li><a href=”new-page”>Page4</a></li>
<li><a href=”new-page”>Contact</a></li>
<li><span style=”font-size:40px; display:none;”><i>Welcome!</i></span></li>
</ul></div>
<? /////?>
<h1 style=”color:#2f2f2f; font-style:italic; padding:10px; “>MY BLOG, STORE AND COMMUNITY</h1>
<div><div><img style=”float:left; padding:0px 10px 0px 10px;” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/website-design-148.png” alt=”web-design”/></div>
<div style=”float:right;”><?php //get_sidebar(); ?></div></div>
<p></p>
<p style=”text-align:justify; “><span style=”font-size:16px; font-family:Arial, Helvetica, sans-serif;”>Welcome to the site!</span><br/><br/><span style=”font-size:18px;”><i>Your website is only limited to your imagination.</i></span></p>
<div style=”clear:both;”></div>
<br/>
<img style=”padding:0px 0px 0px 0px;” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/header-690.png” alt=”web-design”/></div>
</div>
<div>
<div style=”clear:both;”></div>
</div>
<div style=”clear:both;”></div>
<div id=”containertwo”>
ADD THEME:
Here is the web address to add a theme to the WordPress directory:
http://wordpress.org/extend/themes/upload/
Often, there comes a time when a password is lost, forgotten, or somehow altered.
However, changing a WordPress user password is an easy task and you have two options:
Option A: Click ‘Lost Password’ link and reset it.
Option B: Use phpmyadmin or mysql prompt to alter database password.
To alter the code in the database,
1) UPDATE `mywpprefix_users` SET `user_pass` = MD5( ‘newpassword’ ) WHERE `mywpprefix_users`.`user_login` = “ad_or_other_user” ;
Installing WordPress on Wamp
To install WordPress on Wamp,
1) Download wordpress from http://wordpress.org/download/
2) Move zip file to a new folder in www directory
3) Extract zip file
4) cOPY AND paste files from extracted folder into wordpress folder
5) In browser open http://localhost/phpmyadmin/
6) Create a new database
7) In address bar type: http://localhost/WORDPRESS/
8) Select Create a configuration file
9) Select Let’s Go
10) Add Database name, username, password and a new table prefix (if desired)
For wamp, this could be:
Database name: wordpress1
Database username: root
Database password:
Database host: localhost
Table prefix (if you want to run more than one WordPress in a single database): mywp_or wp_
11) Select Submit
12) Select Run the Install
13) Add a Site Title, Username and Password.
14) Select Install WordPress
To rename a WordPress installation,
1) Rename the folder.
2) Change .htaccess to correct address.
2) Open wp-admin
3) Select Settings > General > Change WordPress Address and Site Address
To move a WordPress installation,
1) Move the folder.
2) Change .htaccess to correct address.
2) Open wp-admin
3) Select Settings > General > Change WordPress Address and Site Address.
To Copy a WordPress installation and not use the previous installation,
1) FTP files to a new folder like mywebsite.com/new_wordpress
2) Alter .htaccess to point to new url
3) Go to phpmyadmin
4) Select wp_options
5) Edit siteurl > under option_name column change home option_value to new address >change recently_edited old url to new one
** Basically, change old urls to new ones
To Copy a WordPress installation and keep using the existing installation,
1) FTP files to a new folder like mywebsite.com/new_wordpress
2) Create a new database and dump data
3) change wp-config.php to new database details; database name, username and password.
4) Alter .htaccess to point to new url
5) Go to phpmyadmin
6) Select wp_options
7) Edit siteurl > under option_name column change home option_value to new address >change recently_edited old url to new one
** Basically, change old urls to new ones
8) Goto Settings > General > Add the proper WordPress address (URL) and Site address (URL).
Google Adsense can be a widget in a sidebar, or embeded in WordPress posts.
WordPress Widgets and Adsense
There are several WordPress plugins that can be installed to allow Google ads to be positioned in a typical ‘sidebar’ location.
However, they are not necessary.
1) Get the code from the ‘Ad Unit’ in WordPress.
The code looks like the following below, but with script tags:
google_ad_client = “ca-pub-idstring”;
/* Med Rectangle */
google_ad_slot = “slot_number”;
google_ad_width = 300;
google_ad_height = 250;
//–>
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
2) Select Appearance > Widgets.
3) Add a text Widget ‘Arbitary Text or HTML’
4) Paste the code.
5) Make a title, if desired.
6) Select Position.
7) Save widget.
With a default WordPress installation, you can automatically add links to a sidebar. Alternatively, you can always add a ‘Links’ widget to add links if you lost or deleted it somewhere along the way. When new links are added, they are shown in an order where the most recent posts are listed on top. If that works for you, you are good to go. But, you may want to add or rearrange posts at some point in time.
My Link Order
To have control over the link order,
1) Download the ‘My Link Order Plugin’ and install it.
2) Add a ‘My Link Order’ Widget’.
3) Select Links > My Link Order
4) Arrange categories and posts as desired.
To arrange posts in one category,
1) Open Links > My Link Order.
2) Under ‘Order Links’ select a category.
3) Drag and Drop the desired order for the posts.
5)Select ‘ Click to order’.
To arrange categories,
1) Open Links > My Link Order.
2) Drag and Drop the desired order for the categories.
5)Select ‘ Click to order’.
To change database table prefixes with WordPress using mysql prompt,
1) Open mysql command line.
2) Enter: Show databases.
3) Enter: Use desired database.
4) Enter the command:
Rename table wp_comments to newprefix_comments;
4) With mysql prompt, renaming each table will need to be typed each time one query is finished. Altering the database prefix is much faster with phpmyadmin. The following explains how to change database table prefixes with phpmyadmin.
5) Alter wp-config and change the wp_ prefix to the desired prefix.
To change database table prefixes with WordPress using phpmyadmin,
1) Open php myadmin.
2) Open sql window.
3) Enter the command:
Rename table wp_comments to newprefix_comments;
4) Every time you paste one line into the SQL window, click on GO and see the table name change on your left. Keep changing the table names until all your WordPress tables have the new prefix.
5) Alter wp-config and change the wp_ prefix to the desired prefix.
By default, the WordPress backend uses the url mysite.com/wp-admin to access the dashboard. So, any username and password scanners can make allow the access to at least make an attempt. Changing the username from admin can help too.
To make the wp-admin only accessible from your pc you can add the following code into the .htaccess file within the wp-admin directory,
1) Add the following code to .htaccess,
AuthName “Admin Only”
AuthType Basic
<Limit GET POST>
order deny,allow
deny from all
allow from xxx.xxx.xxx.xxx
</Limit>
To make the wp-admin only accessible from more than one ip address, add the following into the .htaccess file within the wp-admin directory,
AuthName “Admin Only”
AuthType Basic
<Limit GET POST>
order deny,allow
deny from all
allow from xxx.xxx.xxx.xxx
allow from xxx.xxx.xxx.xxx
</Limit>
Now, if someone tries to access the wp-admin login they will get a page that displays the horrible message ‘Internal Server Error’.
If you have ever used a content management system you obviously know there are default methods for accessing the backend. If you look at server stats, you will see many requests to your website trying to access the administrator backend. Obviously, you may wonder why people are snooping around in an area which has nothing to do with web content. You can’t stop this, but, by taking away the default urls to access the backend, or creating other methods to make backend access difficult, you will deter most cases from hackers looking for easy pickings.
To create a second level of security, you can password protect the wp-admin folder with a second, very secure username and password.
If the directory is in a subfolder, you may not be able to password-protect the directory with Cpanel. But, there is another simple method to password protect any directory.
To password-protect a directory,
1) Create a file in the wp-admin folder called .htaccess and add the following code:
AuthName “Password Protected Directory”
AuthType Basic
AuthUserFile /home/username/.htpasswds/public_html/mysite.com/myblog/.htpasswd/myblog/.htpasswd
<Limit GET POST PUT>
Require valid-user
</Limit>
Note:
The AuthUserFile will be the location of a new password file and could be the path for your WordPress Installation. You could locate the file outside the WordPress installation for extra security.
2) Create a file called .htpasswd and save the file in the desired directory. The file is stored in the path displayed in the .htaccess file.
/home/username/.htpasswds/public_html/mysite.com/myblog/.htpasswd/myblog/.htpasswd
3) Go to http://www.htaccesstools.com/htpasswd-generator/ or another website to generate a htpasswd.
4) Copy and the password into the .htpasswd file.
The password looks like:
johndoe:$apr1$IsfHg/..$VU1q23fkHf0XKUjXlO3q10
That is all there is to it to password protect the directory.
The WordPress sidebar can be setup to display links, categories, images, archives, etc.
Although you can display categories and many default WordPress sidebar items, using the ‘widget’ in the administrator zone will allow for greater control of what you want to appear.
Displaying Widgets
To use widgets,
1) Login to admin
2) Under ‘Appearance’ select ‘Widgets’.
3) Add what you want to see in the sidebar.
4) You can select the position where you want the widget placed.
When you set up a main menu with WordPress, the order for the pages on the main menu will be exactly in the order for which they are created. The menu will work fine for a site with a simple menu. But what if you want to change the menu order or menu names?
Changing Menu Names
Changing menu names is very simple. You just go to the dashboard and select pages. Then, select a page, change the name, and click update.
Changing Menu Order
Changing menu order is a little more difficult to do.
To change the order,
1) Login to WordPress admin
2) Select Pages
3) Put a number in the order. For example, your home page could be number 0 or number 1. If it was number 1, the next page would be number 2, and so on.
If new pages are added, yo just do another order shuffle.
All submenu pages for the parent pages will remain intact.
There may come a time when you want to move Joomla articles into a WordPress blog or vice-versa. Alternatively, content can easily be moved between the big 3; Joomla, WordPress and Drupal.
The procedure is very simple to move a single page or few pages.
To move the content,
1) Open up the editor in HTML or source mode
2) Select all
3) Copy
4) Paste into HTML or Source code into the editor of choice.
Large Sites
Option A: Plugin
Find a WordPress plugin that will do this for you; such as FG Joomla to WordPress.
Option B:
Build a Custom PHP / mySQL Script
If you have many pages that need to be moved, you can export any pages, categories and sections that you want with phpMyAdmin. Then, create a new table with phpmyadmin and dump the desired files into an sql file. Now, you just need to match the tables up with your WordPress Installation; while leaving the autoincrement field blank. Once the tables are the same, you can export it and import it into WordPress.
Alternatively, you can create a custom php / mySQL script which will select the data you want from your Joomla database and insert it into your WordPress database. When you run the insert command, you can use the Joomla content and page name for the WordPress post_title, and post_name. The guid can be inserted using the the last_inserted_id() function for which you append the id onto the appropriate guid string. Then, you add what is appropriate into the other fields; such as dates, post_author and post_parent.
If you install or use WordPress, you may eventually hit a minor wall regarding the theme style. One major issue is the sidebar on the left(or right). By default, WordPress will have ‘Bookmarks’, ‘Archives’ and a ‘Search’ box in the vertical menu.
If you use or alter a default template, you can always select Appearance>Widgets in the administrator zone and remove them from showing up. With other templates, hand-made or computer generated, you can open up the editor and delete code. You can open up the sidebar PHP file; such as sidebar1.php located: Appearance>Editor.
The code below is represents the search widget. By cutting the following code and saving the new file, the search box and title will disappear. It is always a good idea to keep a backup file while editing a new file; especially if you have limited PHP knowledge.
WordPress users dominate 8.5% of the web. This stat was made made public by CMSWIRE.com in article on September 2010. My prediction is that this number will continue to climb since WordPress is a top 20 website, which hangs around other elite company like Google, Yahoo, Facebook and MySpace. Now that WordPress has partnered with Microsoft, users can now publish posts from Windows Live. WordPress also has apps for Android and other devices so users can create and publish content.
However, the numbers can be misleading because WordPress hosts free blogs and many people jump on the free bandwagon, then get hesitant to pay for a real website and hosting.
Although I like WordPress and its simplicity, I still think Joomla and a paid blog is a better option since it has great seo, styling, and comment controls. All in all, a seasoned WordPress programmer and a seasoned WordPress expert could spice a blog quite nicely with specific user rights and comment controls.
WordPress took 2nd place in 2009 for the CMS of the year which is hosted annually by PackT Publishing, a world leader in computer technology text books. As usual, Joomla and Drupal were battling it out, but WordPress had surprised some people.
But, when you look at the plugins that can be used with WordPress, it has the ability to be used as a simple blogging platform to ecommerce to a community website.
Taking an analysis a step further according to Alexa, wordpress.com is one of the Top 20 most visited websites in the world for July, August and September 2010 while joomla.org ranks at 258 and drupal.org at 469.
Some interesting stats according to Alexa is that Drupal viewers tend to have a large selection of users with a grad school education, male, and between the ages of 25-34 and are browsing from home. Joomla’s audience is similar to Drupal’s with the exception of a higher percentage of users between the ages of 35-44 and that most of the users view from work. Finally, WordPress does not tend to have an excessive amount of male or female viewers (more equal than Joomla and Drupal), a more younger crowd as the 18-35 crowd is over populated and most viewers browse from school.
A top 20 website is a force and if younger viewers are gravitating towards this system of choice, the writing could be on the wall to which cms could dominate for years to come. Looking at recent years, it looks like WordPress could become a very mainstream tool just like Facebook and Google; since they now all share a spot in the Top 20 websites.
Having worked extensively with open source cms technology, this is not surprising WordPress is the easiest CMS to use. Even if WordPress is used quite often as a blog, it would be a logical step for any one having used this blog platform to want to stretch out and expand a website into a CMS with familiarity.
The downside of using any open source cms for a quick solution is that knowledge of html, css, php and mySQL is necessary at some point along the web design and development process or the website will have no functionality beyond image and text changes. In some ways, the explosion of popularity of open source cms can help a lot of PHP/mySQL developers stay with work because modifying a simple site can help make it more important to have a larger skill set than html of the web 1.0 era. By seeing a potential trend of having static html/css websites obsolete, a company could have a lot of difficulty making it without PHP/mySQL skills.
Owner of Fullstack Web Studio
Quality Coding
Digital Marketing
When Performance and Flexibility Matters
Affordable web design,custom web development and mobile apps for individuals and businesses.
Let us analyze your data and competition to acquire more traffic! Professional SEO content writer
© 2018 ALL Rights Reserved | Sitemap
Vancouver | North Vancouver | Burnaby | Richmond | Coquitlam | Port Coquitlam | Surrey | Langley | Maple Ridge | Mission | Abbotsford | Kamloops | Kelowna | Victoria | Squamish | Whistler | Pemberton