Keep Moving Forward… 08.09.10

Customize WordPress

My Crius is “unresponsive”

UPDATE: Unfortunately I was too lazy to head and shoulders deep into repairing this theme and have finally bitten th bullet and swapped it out for a generic template. I found that in a desktop web browser the pages weren’t loading, and on mobile not even the menu would load. Such a shame really, I did so like this theme. When I get off my lazy, fat, behind I might get around to developing my own custom site once i finish my Coding Studies…

____________________

The theme in use on this site was the Crius Responsive Theme, purchased from a developer on Themeforest in 2013. Unfortunately the developer is no longer supporting it, and the theme itself is no longer available for purchase.

This in and of itself is not an issue, however there are many, many installations of this theme across the web and they are all going to crash one way or another as a result of the implementation of php 7.0 and most site owners are not going to know why there is a problem. So here’s the heads up, the skinny, if you will.

As of php 7.0 there are several backwards incompatibilities you, or your web developer, will need to be aware of. You, or your developer, will either, need to completely re-write the code, or take the time to change the incompatible code, and there might be quite a bit of it, or…

get a new theme. It is after all, soooo 2013!

BUT! fear not, I have just spent the last hour or so making the necessary changes. It turns out that the help of a WordPress Plugin you can keep your site live, AND scan all the code for incompatibilities with php 7.0 What an amazing tool! It has taken all the worry and guesswork out of the equation.

Are you ready for a major ugrade to your Crius Responsive Theme based site? Here’s what to do.

  1. From the Dashboard, got to WordPress Plugins, Add a New Plugin and search for PHP Compatibility Checker. It should be the first one on the list. Install It!
  2. Activate the Plugin and Run it.After a while it’ll return some Errors and Warnings. In my case 24 errors, and 8 warnings. These basically amounted to 4 distinct issues, site wide. (print out the list)
  3. Next, from your Web Host’s login landing page, log into cPanel, then goto to your File Manager. Follow the file path to the relevant file, click on the file, Click on, “Edit” and make the necessary changes.
  4. Job Done!

The warnings amount to issues related to php 4 style class constructors, so it is strongly advised that you look into these and make some updated changes. The only other issue requires a small amount of rewritten code due to the deprecated, create_function( ) function, which cannot be replaced with the anonymous function, function( ) as it doesn’t directly swap over like, ereg( ) which can be substituted with, preg_match( )

So, if you are having problems navigating around my website, it’s not you, really… it’s me… well, the php.


Adding Menu Items to your Crius Responsive Theme

A bit over a year ago I got a question from Margo about how I added sub-menu items to my navigation menu. Well, that’s an option that is not directly related to the Crius Responsive Them. It common to all WordPress themes and is managed via the WordPress Navigation Menues.
Screen Shot 2015-04-30 at 5.25.36 PM

So, you need to Hover on Appearance and from the sub-menu select Menus. The editing page will then give you something like this.
Screen Shot 2015-04-30 at 5.25.05 PM

Now you should find a basic menu there made from any pages you have previously created. If not you can drag Page Items from the left onto the menu builder box.

For Custom links you need to open the dropdown Link and then start creating custom links.
Screen Shot 2015-04-30 at 5.32.09 PM

Finally, if you created any categories on your New Posts Editor Page, you can also create links which will filter your content.
Screen Shot 2015-04-30 at 5.33.09 PM

And that’s about it. Its fairly straight forward and should easily customize into whatever you want, within reason.

For today, that’s what’s in my
line of Sight.


Modding the Crius Responsive Theme

Good News!

You’ve been looking and looking for an awesome template and finally after ages of searching you bite the bullet and Buy a Custom Theme. The brand new, shiny, all the bells and whistles, doesn’t it look fantastic, “Crius Responsive Photographers Theme.”

So you install it, activate it and start to play. Oops! It ain’t all that responsive after all! No, it’s more like the immortal words of Douglas Adams, “Looks like a fish, moves like a fish, steers like a cow.” It’s intuitiveness starts to challenge the very definition of the word. ‘And of course you read the manual, top to bottom, and watched all the silent movies (tutorials) as well… Not…

…well, kinda. And you want to change some stuff, customize it so it doesn’t look the same as almost 90% of all the other great and not so great sites using it. You want to put your distinctive mark on it to stand out. That’s why you bought it in the first place, its a stand out theme.

So, you go to Themeforest and browse Support thread, well ok, add your frustrated question to the long list of similar frustrated questions rather than read through the whole thread, After all, who has the time these days to skim through 30+ pages of the same asinine inquiries with with pretty much the same equally asinine response from the author – RTFM: Read the F**** Manual.

So you read the manual, carefully, only to find it’s a bit thin on the ground and doesn’t address some of the problems your having. No, you need to download more software, edit code or hire a custom Tweekspert to do the job, unless of course there are many hundreds of users wanting the exact same feature you want.

Well. I’m not the author and I don’t know all the ins and outs of this  chook’s bum but I do have the answers to some of the most commonly requested Customizations and I’M putting it all down here so that I DON’T FORGET how to do them next time I decide to get all screwy with my website and change something, again.

So here’s some documentation of the things I want to do, right from a new install.

AND, oh yes, I DID read through all 31pages (as of this time) of Theme Support before I got all this sorted, found some great and interesting sites worth visiting and pulled together my wishlist of custom tweaks.

One last thing, if you choose to go this route, you’re on your own. The is no developer Support beyond the basic changed you can make within the existing theme admin.

Screen shot 2013-04-01 at 7.12.11 PM

So, here is a list of Changes so far:

1. Own Logo, Colour of Menu Bar, Colour of Menu Text, Font Choice, Menu Items and Submenu items.

2. Own gallery of images, using a slideshow on contact page instead of the sample background image.

3. Created Client Galleries with passwords, AND added a google map to the contact page.

Screen shot 2013-04-01 at 7.29.20 PM

So, currently the site looks nice, in the way it was designed to look. I have my blog plus some content links to specific topics. I have my client galleries which work fine and I have a jazzed up contact page with a map.

What more could I possibly want?

A) I want to change the Plus sign on the sliding menu…

Screen shot 2013-04-01 at 7.30.45 PM

because none of my visitors can work out that it’s meant to slide open to reveal the navigation.

Screen shot 2013-04-01 at 7.31.07 PMFirst off, the Plus sign is a gif which is called from the image folder by header.php

Want to change the plus sign?

a) Pick some other icon sized image rename it plus_nav.gif and upload it via ftp to wp-content > themes > cruis > images and overwrite the existing plus_nav.gif file.

b) (and/or) change the name of the image file that is called in header.php: select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “plus_nav” and then change the file name to one that suits you.

Screen shot 2013-04-01 at 7.45.48 PM

Voila!

B) I want to change “Table of Contents” to something more suitable. My website is not an online magazine…

This too is not that hard. Remember the header.php file? well just a few lines down is the line for, “Table of Contents”. Another way is to edit BOTH the .po and .mo files, using PoEdit, to change this items text and then upload the changed files to your website. You can also change certain system generated messages as they might appear to site users here as well.

Now, what can we change this to? well its php and html, so just about anything that normally works.

Change “Table of Contents” to … “Index”  (or some other word or group of words) – select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “Table of Contents” and and replace the words, Table of Contents” with “Index”, then update the header.php file.

Change “Table of Contents” to … an image –  select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “Table of Contents” and and replace the words, <?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ?> with “<img src=”/wp-content/themes/crius/images/name_of_image.gif”>”, then update the header.php file, and upload your image to the designated image folder. NOTE: if you’re gonna be changing lots of stuff it’s best to make the changes by commenting out what you don’t need. e.g. <?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ?> becomes <!– ?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ? –> That way, if you make a change you do not like you haven’t lost the code that you changed.

Screen shot 2013-04-01 at 7.59.45 PM

Want to center the menu heading make it linkable etc?

Same thing as above, just observe correct coding syntax and you should be fine.

Screen shot 2013-04-01 at 8.07.37 PM

Next, onto this: How do I change the background color of each page title (contact, blog, gallery, etc.) when it is displayed at the top of the page after it slides out?

The answer is: Open /css/screen.css find ”#page_caption h1” change its background colour.

OR Like So…

open the screen.css file with your editor of choice, I use textedit,. The file is located in the Cruis > cruise > css folder in your downloaded and unzipped package from your theme server, wherever you saved that on your harddisk. Using Find and Replace, (cmd F on a Mac)  find the line with “#page_caption h1” and change, “background: #000;” to whatever colour you like. Here it gives three hex digits, you can substitute a 6 hex digit number as well. My page background if white so I use, “background: #fff;” – works for me.

You can also change your Page Header font colour here as well. When done, you need to upload your edited screen.css file to your server and overwrite the existing file.

Screen shot 2013-04-02 at 7.00.04 PM

DO BE CAREFUL!

Changing this file can screw up the appearance of your installation, so, before you change ANYTHING, rename the old file to “screen.bak” that way at least you have something to fall back to.

AND This is about as far as most people want to go. But wait, there’s more  😉

 

Now, see that nasty little white minus/em dash sign in the menu? Want it to go?

Then this is where you really start messing with the beast AND Theme Author Support stops.

As above, you need to edit the file screen.css but this time however, you’re looking for, “hr.small_menu_hr”  then you need to change the line, “border-bottom: 2px solid #fff;” to, “border-bottom: 0px solid #fff; and HEY PRESTO! after you upload the edited file that nasty little piece of pixel work is gone!   Mwuuhaa haa haaa!

Now, the plat de résistance for this theme, in my mind at least is a semi-opaque slider menu where you can see the underlying images. I recon that’s pretty damn cool. Thanks to Fabrizio from fabriziozampetti.com who has some incredibly cool images. Here’s how it’s done.

IF you DO this, make sure you know what your doing, otherwise you WIL stuff something up.  Be warned!

In the screen.css file find the line “#nav_wrapper” and replace the entire code segment between the braces. Save the file, and replace the online copy with the edited file. To change the opacity of your navigation strip, modify the line, “filter:alpha(opacity=70);” by changing the opacity value, saving, uploading and viewing the change until you have found what you like.

 

#nav_wrapper

{

position: fixed;

right: -250px;

top: 0;

width: 250px;

height: 100%;

background: #f9d20b;

filter:alpha(opacity=70);

-moz-opacity:.70;

opacity:.70;

-webkit-box-shadow: 0 -1px 15px rgba(0,0,0,.2);

-moz-box-shadow: 0 -1px 15px rgba(0,0,0,.2);

box-shadow: 0 -1px 15px rgba(0,0,0,.2);

z-index: 999;

}

THERE IS A CAUTION! When you change this you also change the opacity of your Social Media icons… now, I wonder is it possible to change their colour…?

That’s all I’m afraid. I don’t do music.

I don’t understand why a site owner would inflict music on an unsuspecting visitor and then have them grope about the site trying to find a way to switch it off. That’s just plain rude, if you ask me.

The Crius theme, thankfully makes these not to difficult but IMHO site MUZAK ought to be a visitor enabled option not one that the visitor must content with prior to working out what your site is about…  sorry, let me strangle that rant before it gets too far away…

For today, that’s what’s in my,

Line of Sight.


Changing Menu Images for WP Picture Perfect Theme

If you’re a recent visitor, you will notice that our site has undergone some fundamental changes. Firstly, we’ve decided to change from a custom designed website to a WordPress driven one. This allows for custom pages to be made that all respond in blog format. This is of interest to us because the most recent additions get added to the top of the blogroll, and people seem to respond to this quite well. This also means that as we are periodically published and work, tearsheets can be added at their relevant point in time, and the newest work is always at the top.

The next issue is that blogs in general are not always so photography friendly, however there are a few WordPress Themes around that seem to do a reasonable job. We’ve chosen to use Picture Perfect as our core design unit, as it also allows for a simple design integration of the TTG client selection galleries that we also use.

Now, one of the things that seems to be undocumented in the Picture Perfect theme is the mechanism for changing the images in the slider index on the left. Which is the purpose of this post (… so as I don’t forget sometime later and have to re-look everywhere to find it again….)

  • There are eight images used in the slider menu, [jpg’s with the names: 1 2 2a 3 4 5 6 7].  Why 2a? I’ve got no clue.
  • The images are portrait oriented and 240 px x 300 px in size.
  • They are located in the folder area, …wp-content/themes/picture-perfect/imagemenu/images and you’ll need ftp access to change them.
  • The number of menu options can be changed by selecting Network Admin (if you have more than one wordpress site) – themes – picture perfect – edit and then choosing Theme Functions (functions.php). In the line, for ( $counter = $count+1; $counter <= 6; $counter += 1) { Change the <=6 value up or down as needed.
  • Ensure that you have sufficient images for the number of menu items. Picture Perfect was designed for up to 7 menu items, as far as I can tell, I’m not sure how it’d handle 8 or more menu items. and whether they’d populate with local images. My guess is that they would.
  • Menu titles are set by adding Pages in the Dashboard and the Menu populates by the order in which you add your menu pages.
  • To link to external sites you’ll need the Link Pages To plugin, and you’ll need to leave the page content empty.
  • If you create a multi-wordpress site, then the theme needs to be network activated and then activated on each wordpress site and the menu changes populated via Pages on each wordpress site, which is a bit of work. if you want a consistent look for your overall Site.
  • Lastly, so that all Page titles refer back to the main page you need to go to Network Admin – Themes – Picture Perfect – Edit select Header (header.php) and edit the the first  a href tag in the body, <h1><a href=”…”> replacing the characters between the quotes with your homepage address.

And, that completes the most basic tweaks of this particular theme. It took us about a day to make the change over and to populate all the tweaks, then test, but so far it seems ok. One up and coming change to look out for in the future is the addition of a Stock Image library. More on that as developments arise.

For today, that’s what’s in my

Line of Sight.