Wordpress and Smugmug

vintagekeys

I consider myself well versed with smugmug, but the time has finally come for me to move to a word press website for blogging. While I am a wedding and corporate photographer, I have a decade of galleries and links to galleries on my domain. I must keep these links alive and pointing to the galleries.

My question is this, as someone techie but new to wordpress, will I need to have a separate domain or subdomain to use wordpress but still have smugmug linked to my current website?

I would prefer to have the wordpress as my main site, but still have links given to old clients still link to their galleries. I rank pretty good on google. Will this destroy my ranks to migrate off smugmug server and then use a plugin to link to the galleries for blogs and such? I thought about starting a subdomain blog.robbmccormick.com, but really would like to have to all under www.robbmccormick.com. I plan on using smugmug to house my client galleries in the future for ecommerce and such. I've seen guys who do something like galleries.robbmccormick.com, but I imagine that would remove all my existing links. My gut says start a subdomain blog.robbmccormick.com and try to match my smugmug page to be similar. However, that doesn't seem optimal.

Currently, there is not a ton of content on the surface of my website, but underneath there are a ton of links and keywords indexed by google. In the long run, having a blog that is updated regularly will be better for seo.

Any advice on how to approach this?

Hikin' Mike

If you are already ranking then I would suggest create a sub-domain for your WordPress blog ONLY (blog.robbmccormick.com). If you want to use your WordPress for your main website you are going to have to use a bunch of 301 redirect from your SmugMug site to your new WordPress site. Then you need to create a sub-domain for only your SmugMug (gallery.robbmccormick.com).

In my case my main website is WordPress and I use SmugMug ONLY for the galleries. I set up a sub-domain (gallery.imagesinthebackcountry.com) and point that to SmugMug. To match the two, I liked the theme I created on my WordPress site and since I know how to use HTML/CSS, I matched my SM to my WP site.

Hikin' Mike

Also, you are NOT going to have both your SmugMug and your WordPress site "under" your domain, www.robbmccormick.com. You are going to have to make a sub-domain for one of them, no way around that.

vintagekeys

Thanks Mike. I will set it up as a sub domain and do my best to match the wordpress site. Any advice on where to start as far as matching smugmug to wordpress?

leftquark

I've done something similar with my own SM site (www.aaronmphotography.com) and my Wordpress blog (http://blog.aaronmphotography.com). I picked a WordPress theme that sorta matched my SmugMug site, and then used WordPress's CSS tweaks to make it a little bit closer to matching.

One of the benefits of doing this is that it can greatly benefit your SEO. If you take the links to the images from SmugMug and use that to embed the photos into wordpress, you'll be creating a link between SmugMug and WordPress that strengths the SEO ranking of each. What I mean by this is: don't upload the photos to wordpress. Instead grab the share link to the photo that's on SmugMug, and use that on WordPress.

Hikin' Mike

I started with a free WordPress parent theme that I modified by creating a child theme. Once I was done, I made my SM site the same. For me, it was easier to make my SM site look like the WP site then they other way around.

I still upload my blog entry photos to my WordPress.

vintagekeys

So I have created a subdomain and have my new blog up and running at blog.robbmccormick.com. I really love the feel of the page, especially the typography. I don't think it will be hard to match the look of the blog to my smugmug page, but I'm not very knowledgeable when it comes to coding.

What I am trying to do is change the fonts on smugmug to match the fonts on the blog page. The main header font is Cormorant Height (Italic font size is 40 and 48 line height). The menu text I would love to match the blog menu text which is open sans 600 12 size 22 line size. The normal text is open sans 300. I found an article here: http://www.aaronmphotography.com/Customizations/Fonts-Links/Google-Fonts. I am very confused on how to set this up and also set for different things like headers, menu etc..

I would also like to move the menu under the logo and move the logo to the center to match the blog. Again, no idea where to start.

Whew. This is a challenge. CSS is totally new to me.

I GREATLY appreciate any help!!!

Hikin' Mike

Looks like your WordPress headers are using the italic version of Cormorant. While SmugMug uses Google Fonts, they haven't loaded it. So we'll loaded it manually.
Add this to your theme's CSS:

/**
* Loads Google Fonts
****************************************/
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 400;
  src:  local('Cormorant Italic'), 
        local('Cormorant-Italic'), 
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbmfQcKutQXcIrRfyR5jdjY8.eot),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbmfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbiwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbrrIa-7acMAeDBVuclsi6Gc.woff) format('woff'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/**
* Header Fonts
****************************************/
.sm-user-ui h1, 
.sm-user-ui h2, 
.sm-user-ui h3, 
.sm-user-ui h4, 
.sm-user-ui h5, 
.sm-user-ui .sm-title-xl, 
.sm-user-ui .sm-h1, 
.sm-user-ui .sm-h2, 
.sm-user-ui .sm-h3, 
.sm-user-ui .sm-h4, 
.sm-user-ui .sm-h5, 
.sm-user-ui .sm-heading {
    font-family: Cormorant;
    }

Once you have that loaded and working, post back for round 2...

vintagekeys

Mike,
You rock first of all and I appreciate you help. So I added this to under theme>wrench icon>css and though it changed the header fonts, they aren't italic but I think they are cormorant. I also added a CSS block to the top of my homepage and it did the same thing....changed the header font to a sort of a squashed version of cormorant.

Here is the link to the google version if that helps at all: https://fonts.google.com/specimen/Cormorant

Thank you again for your help!

vintagekeys

Aha! If I open the text editor I can make it Italic! It definitely looks close to the wordpress font (thank you so much!), but it is definitely a bit different. On the blog it is Size 40px Line Height 48px if that makes any difference. Seriously, you rock for getting me this far. This is way outside my comfort zone.

Hikin' Mike

@vintagekeys said:
Aha! If I open the text editor I can make it Italic! It definitely looks close to the wordpress font (thank you so much!), but it is definitely a bit different. On the blog it is Size 40px Line Height 48px if that makes any difference. Seriously, you rock for getting me this far. This is way outside my comfort zone.

I didn't think you would need to add the italic since I only uploaded the italic font (and I didn't verify it). Glad it worked out.

You should be able to move your logo on top of the navigation stuff in the customization section.

vintagekeys

Any idea how we can change the menu font to match the blog?

Hikin' Mike

@vintagekeys said:
Any idea how we can change the menu font to match the blog?

Looks like your blog is using 'Open Sans' with the body font at 300 and the navigation at 600, Add this to your theme's CSS:

/**
* Body Font
***************************************************/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src:  local('Open Sans Light'), 
        local('OpenSans-Light'), 
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff'),
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


.sm-user-ui body, 
.sm-user-ui select, 
.sm-user-ui input, 
.sm-user-ui button, 
.sm-user-ui textarea, 
.sm-user-ui .yui3-g [class*="yui3-u"], 
.sm-user-ui .yui3-g-r [class*="yui3-u"], 
.sm-nui {
    font-family: Open Sans;
    font-weight: 300;
    }

/**
* Navigation Font
***************************************************/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src:  local('Open Sans Semibold'), 
        local('OpenSans-Semibold'), 
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'),
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.sm-user-ui .sm-page-widget-nav {
    font-family: "Open Sans";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.24rem;
    line-height: 1.8;
    }

BeautifulWorld

@vintagekeys I tried doing something like this too. Here is my blog https://karthikraja.blog/ which is on Wordpress and my photo galleries are on smugmug. I tried to keep themes and color the same with visual ties between the two. I do have two domains though, both www.karthiraja.blog and www.beautifulworld.photography. Hope it helps.