Home » WordPress (Page 2)
Category Archives: WordPress
Installing WordPress Plugins
- Always have a backup of your WordPress site, belt and braces is best. Use your file manager or FTP to make a copy of the site and use and export your WordPress database using mySQLi admin on your local PC.
- Plugins can interact with each other so try out the plugin with the others inactivated first. Then re-activate one by one and check out the site.
- Make sure you have the latest version of the plugin preferably via the WordPress site.
- Check out the plugin is still valid with updates of WordPress, if not consider deactivating until it is.
Check out the tutorial on how to install WordPress plugins.
The “Perils of Plugin” – or how I learned to live dangerously
Why might I want a plugin?
It does something that is useful that I don’t know how to do and I’m not going to pay a WordPress developer to do it Ta very much. “The site really looks good now I have a load of butterflys making love to the world in the corner.” If that is you, you really need to read on.
What should I check for?
- Has the WordPress plugin been verified as compatible with your current version of WordPress? If not – leave it!
- Check the star rating is high and there are many users.
How old is it?
Does the WordPress plugin developer or publisher support the site or is there simply a pay wall you have to get through.
Why should I worry it’s Free and Free is good!
Yup but so is the flu free, care for some? You are over the flu in days, some hacked sites may take weeks to get back to normal.
Hacked? What you mean.
Look at WordPress there are always security updates from a big development team. How good is the PHP/WordPress that produce this plugin? Are there backdoors in it that will pass your site’s security?
Plugins can slow your site down. Many times people have contacted me and said their site renders pages really slowly. Perhaps it might be the 30 plugins you have – most of which are active but you don’t use and what’s more you have not got round to doing all those security update they say they have. Keep your site lean, for Google like speedy sites as enhancing viewers’ experience. That means a higher ranking…. Mobile can also be slow at rendering
If you are going to use plugins read this…
Sub-sub menu Twenty fourteen secondary menu is not aligned
A work round for where your sub menus in Twenty fourteen secondary menu is not aligned, detached or overlaps.
If you have customised your 2014 secondary menu and the sub or sub-sub menu doesnt’ work then add a style change in your twenty fourteen child’s CSS. Simply change the xxxpx width of the CSS “class secondary-navigation ul ul” rule to whatever fixes the problem. Simpy use firebug or keep changing the setting until you get what works.
.secondary-navigation ul ul {
width:xxxpx;
}
Obviously
.secondary-navigation ul {
width:xxxpx;
}
will set the WordPress twenty fourteen initial submenu width.
Removing “Proudly powered by WordPress”
You should always create a child theme for the theme you are using and modify those templates. If your web developer has not removed or modified the message “Proudly powered by WordPress,” then the chances are they don’t know how to! The are two majour types of website designer using WordPress. Those with no real IT background and have picked up WordPress and the ones that can hack the underlying PHP code. You need to do this to really customise a website design.
The PHP file that contains “Proudly powered by WordPress” is a file called footer.php. It will be in your theme’s wp-content folder. We are going to concentrate on the WordPress Twenty Fourteen theme. In a typical example installation the folder might be:
/wp-content/themes/twentyfourteen
However you should make a child theme and put a copy into into:
/freelancewebsitedesigner/wp-content/themes/twentyfourteen-child
In the dashboard select the “Appearance” , “Editor” option
Find the Select theme to edit drop down box (Top right)
And choose “twentyfourteen-child”
Below will be listed your templates in a browse panel. Click on footer.php
The code for footer.php will appear in the “Edit Themed” main Panel. Simple search for “Proudly powered by WordPress” and delete it or replace the text with other text like your name or maybe the html for logo image, e.g. <img src=”/img/mylogo.jpg”>
Setting a different header image on a mobile phone
This method can be used both in a WordPress website or a non-WordPress web design. Basically, I’ve made here an assumption that the website design header image is displayed as a background image in a div called header. The need for any positional information is ignored here for clarity. Assuming the header image is 1080 x 198 pixels on a PCm we need to replace it with something that fits and still looks good on 480px wide mobile. The default layout CSS could be:
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
Below the website designer decides to make a different smaller more squarer jpg image for the mobile 480pixel screen. The header div CSS is then changed to hold it. Initially the default is set in this case, but then overridden by the @media rule if the screen is small.
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
@media only screen and (max-device-width: 480px) {
#header {
background-image: url(headermobile.jpg);
height: 480px;
width: 480px;
}
}Using CSS3 @media Rule to produce a responsive WordPress website design
Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices.
<link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css">
However, the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses media queries to check out
- width and height of the device
- width and height of the area of a web page visible to a viewer on a browser ( viewport)
- landscape or portrait orientation
- resolution
@media not|only mediatype and (media feature) {
a list of CSS rules….
}
Media types can be:
- all For use with all media type devices
- print For printer output
- screen PCs Laptops, tablets, smart-phones
- speech for browsers with speech output
A short list of some of the media features are:
aspect-ratio of the viewport
color supported on the output device
color-index The number of colors available
device-height of the device’s screen
device-width
height of the viewport
width of the viewport
max-device-height
max-device-width
max-height of the display area, e.g a browser window
max-resolution of the device, using dpi or dpcm
min-resolution
max-width display area, e.g. browser window
min-device-width of the device
min-device-height
min-height of the display area
min-width
orientation landscape or portrait
An example of setting a larger font for a lower resolution mobile phone screen of 480 pixels or less. The better resolution screens can use 12pixels instead.
@media only screen and (max-width: 480px) {
.content{
font-size:14px;
}
@media screen and (min-width: 481px) {
.content{
font-size:12px;
}
}
Migrating your WordPress website to a new hosting
The best way to do this is to use a good Export Ppuging to back up your WordPress website’s content onto a PC and then to FTP the Whole site onto your PC.
By this combination you will make sure the two things that make up your WordPres website is safe -the content and design. Often users do not realise that the website developer they used created a customised theme and these modification may be in a child theme. They may be anywhere really so safe is FTP the whole site.DNS
DNS and Name servers
You will need to make sure that DNS entry for your website is changed so that it points to the new hosting. Your new hosting will be able to help you there. We do all that for you if you migrate. The name server may need changing when you leave the hosting. This Name server is with the people (or registrar) you registered the domain with e.g. 123-reg. You may find they will charge you for this. If they charge you silly money leave it there and change the DNS on that system if free .
Setting up
Install WordPress if needed and your theme on your new server
FTP across your wp-content and wp-include folders along with any other folders for example images/img, flash. The naming will vary according to the developer.
Log into WordPress and run the Import plugin you chose, following their instructions.
Now test all the pages on your site for funnies
Plugins that limit what certain admin users can do in WordPress.
As a WordPress website developer you sometimes you need to limit or extend what certain admin users can do in WordPress beyond what WordPress allows. Often to protect your WordPress newbie client from the odd major booboo in their early days on the system. This is where user ‘Role’ comes in. WordPress Plugins are a good answer. For example WPFront User Role Editor. This will allow to modify:
Roles List, Add Role, Edit Role, Delete Role,
Each WordPress ‘Role’ allows a certain capability or permission to customise accesss to the admin area , such as Posts/Pages , Navigation Menu Permissions , Widget Permissions and so forth beyond the normal WordPress access features i.e. you can extended the current configurable permissions. Simply associate a user with a predefined role,
Changing WordPress Twenty Fourteen’s navigation hover background
Simply add the following to your WordPress child menu theme’s style.css file. The colour here is set to dark grey (#333) – simply set the background colour to your choice.
.primary-navigation ul ul {
background-color: #333;
}
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #333;
}
.secondary-navigation ul ul {
background-color: #333;
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #333;
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #333;
}
Centering WordPress Twenty Fourteen’s webpages
This is a useful trick when using the Twenty Fourteen theme to develop websites. In your WordPress website’s ‘child theme’ style sheet add the following CSS
.site { margin: 0px auto; }